Angular — Le piège du hash (#)

Pour les développeur·s·e·s qui utilisent le SPA, cela peut être courant de remarquer un dièse (#) au niveau de l’URL. Depuis la nouvelle version d’Angular il est possible de travailler sur une application sans voir ce fameux caractère # au niveau de l’URL. Est-ce normal ? Pour la plupart des gens cela semble être plutôt cool, à vrai dire c’est bien le cas c’est cool, car on retrouve la syntaxique habituelle des URLs.

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.

Merci !