web-dev-qa-db-fra.com

Angular 2 Supprimer le hachage (#) de l'URL

J'essaie de supprimer le signe # de l'URL dans Angular 2 mais je n'ai pas trouvé d'explication satisfaisante sur la façon de le supprimer sans générer de problème.

Je me souviens que sur AngularJS 1, il était plus facile d’ajouter $locationProvider.html5Mode(true);

Je vous serais également reconnaissant de bien vouloir me dire si c’est une bonne pratique (supprimer #) ou si cela pourrait affecter le référencement de l’application (ou l’améliorer).

PS: J'utilise Angular 2 avec TypeScript

html5angulartypescript
51
jorgevasquezang

Comme @Volodymyr Bilyachat a souligné, PathLocationStrategy est une valeur par défaut stratégie de localisation dans Angular2, et si le # est présent dans l'URL, il doit avoir été surchargé quelque part.

En plus des fournisseurs de modules, vérifiez vos importations de modules, vous pouvez également les remplacer en fournissant le { useHash: true } comme deuxième argument du RouterModule.forRoot:

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

Notez également que lorsque vous utilisez PathLocationStrategy, vous devez configurer votre serveur Web pour servir index.html (point d'entrée de l'application) pour tous les emplacements demandés.

83
Seid Mehmedovic

Dans angular il y a stratégie de localisation

Regardez dans app.module.ts où app est démarré il y a

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

Et supprimez cette partie puisque PathLocationStrategy est stratégie par défaut

28
Volodymyr Bilyachat

Les réponses ci-dessus expliquent correctement comment supprimer le hachage de l'URL, mais lorsque vous modifiez LocationStrategy, votre back-end sera affecté car le back-end ne comprend pas tous vos Angular 2 Routes. Voici les étapes à suivre pour supprimer le hachage avec le support dorsal.

1) Changez Angular pour utiliser PathLocationStrategy

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

2) Modifiez la base Href dans index.html, Angular2 gérera tous les itinéraires postérieurs à la base Href.

<base href="/app-context/">

Par exemple

<base href="/app/">

3) Sur le serveur principal, nous devons rendre le fichier index.html pour toute requête venant avec le motif ci-dessous.

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

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <base href="/app/">
  </head>
  <body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="vendor.bundle.js"></script>
    <script type="text/javascript" src="main.bundle.js"></script>
  </body>
</html>
18
jonuojha