Angular 2 Rimuovi Hash (#) dall’URL

Sto cercando di rimuovere il segno # dall’URL in Angular 2 ma non sono riuscito a trovare alcuna spiegazione valida su come rimuoverlo senza generare alcun problema.

Ricordo che su AngularJS 1 era più facile aggiungere $locationProvider.html5Mode(true);

Inoltre sarei grato se puoi dirmi se questa è una buona pratica (rimozione di #) o potrebbe influenzare il SEO per l’applicazione (o migliorarla).

PS: sto usando Angular 2 con typescript

Come ha sottolineato @Volodymyr Bilyachat, PathLocationStrategy è una strategia di posizione predefinita in Angular2, e se il # è presente nell’url, deve essere stato sovrascritto da qualche parte.

Accanto ai fornitori del modulo, controlla le importazioni del tuo modulo, può anche essere sovrascritto fornendo { useHash: true } come secondo argomento di RouterModule.forRoot :

 imports: [ ... RouterModule.forRoot(routes, { useHash: true }) // remove second argument ] 

Si noti inoltre che quando si utilizza PathLocationStrategy è necessario configurare il server Web per servire index.html (punto di ingresso dell’app) per tutte le posizioni richieste.

In angular c’è la strategia di localizzazione

Cerca in app.module.ts in cui l’app viene avviata automaticamente lì

 @NgModule({ ....... providers: [ .... { provide: LocationStrategy, useClass: HashLocationStrategy }, .... ] }); 

E rimuovere questa parte poiché PathLocationStrategy è la strategia predefinita

Le risposte sopra hanno la spiegazione corretta sulla rimozione dell’Hash dall’URL, ma quando cambi LocationStrategy tuo back-end sarà interessato dal fatto che il back-end non comprende tutti i tuoi Angular 2 Routes. Ecco i passaggi per rimuovere hash con il supporto back-end.

1) Cambia angular per utilizzare PathLocationStrategy

 @NgModule({ ..... providers: [ // Below line is optional as default LocationStrategy is PathLocationStrategy {provide: LocationStrategy, useClass: PathLocationStrategy} ] }) 

2) Cambia la base Href in index.html, Angular2 gestirà tutte le rotte post base Href

  

Per esempio

  

3) Sul server di back-end, dobbiamo rendere il file index.html per qualsiasi richiesta in arrivo con pattern sottostante

 "/app/**" - Render index.html for any request coming with "/app/**" pattern 

index.html

     My App   Loading...