Est-ce normal?
Oui, cela est normal de travailler sur une application Angular sans voir l’hash(#). Il est toujours existant seulement qu’il est désactivé par défaut sur les différentes versions d’Angular.
Un piège !
Étonnant n’est-ce pas ? Oui, un piège le souci se pose une fois l’application déployer sur un serveur de production. Vous vous dites, mais si cela marche en local en principe pas de problème pour un environnement de production, hélas non généralement en environnement de production lorsqu’on essaie de naviguer entre les pages ou même actualisé la page d’entrée nous avons une erreur de type 404page introuvable.
La solution
L’équipe d’Angular propose l’utilisation d’Angular Universel. Si vous voulez utiliser une solution simple et facile, je recommande l’utilisation de l’hash
Comment activé l’hash ?
Pour activer l’hash nous avons deux méthodes
Première méthode
Dans app.module.ts
- On importe
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
- Ensuite, on ajoute cette ligne dans le NgModule comme provider
{provide: LocationStrategy, useClass: HashLocationStrategy}
Exemple (app.module.ts):
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { AppComponent } from './app.component';import { HashLocationStrategy, LocationStrategy } from '@angular/common';@NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}], bootstrap: [AppComponent],})export class AppModule {}Seconde méthode
On utilise RouterModule.forRoot avec pour argument {useHash: true}.
Exemple: (app-routing.module.ts)
import { NgModule } from '@angular/core';...const routes: Routes = [//routes in here];@NgModule({ imports: [ BrowserModule, FormsModule, RouterModule.forRoot(routes, { useHash: true }) ], bootstrap: [AppComponent]})export class AppModule { }Conclusion
Et c’est tout, si vous avez du mal avec l’activation de l’hash laisser simplement un commentaire, je me ferais un plaisir de vous répondre.
