J'essaie de supprimer le signe # de l'url dans Angular 2 mais je n'ai pas trouvé de bonne explication 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);
J'apprécierais également que vous puissiez me dire s'il s'agit d'une bonne pratique (suppression du #) ou si cela pourrait affecter le référencement de l'application (ou l'améliorer).
PS : J'utilise Angular 2 avec Typescript.
Comme l'a souligné @Volodymyr Bilyachat, PathLocationStrategy est une valeur par défaut stratégie d'implantation dans Angular2, et si le # est présent dans l'url, cela doit être surchargé quelque part.
En plus des fournisseurs de modules, vérifiez vos importations de modules, elles peuvent également être surchargées en fournissant l'attribut { useHash: true } comme deuxième argument de la méthode 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.
Voici des exemples de configuration pour certains des serveurs web les plus populaires : https://angular.io/guide/deployment#fallback-configuration-examples
Les amis, dans ng build --prod cette solution ne fonctionne pas, donne une erreur 404..un indice ?
Cela résout le problème de la suppression du # mais lorsque nous rafraîchissons la page ou le h5, cela ne fonctionne pas.
@HydTechie, JinnaBalu, Lorsque vous utilisez PathLocationStrategy (routage HTML5), vous devez configurer votre serveur Web pour qu'il serve le fichier index.html (point d'entrée de l'application) pour toutes les urls demandées.
En angulaire, il y a stratégie d'implantation
Regardez dans app.module.ts où l'application est démarrée, vous y avez
@NgModule({
.......
providers: [
....
{ provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});Et supprimer cette partie puisque PathLocationStrategy est stratégie par défaut
L'erreur est 404, le lien sans # est montré comme 404 dans IIS . Je sais qu'il y a quelques paramètres à configurer dans IIS pour rediriger, mais je cherchais sans cela, si possible. merci !
Les réponses ci-dessus ont l'explication correcte concernant la suppression du hachage de l'URL, mais lorsque vous changez le nom de l'URL, vous pouvez le faire. LocationStrategy votre back-end sera affecté parce que le back-end ne comprend pas tous vos Angular 2 Itinéraires. Voici les étapes à suivre pour supprimer le hachage avec le support back-end.
1) Modifier Angular pour utiliser PathLocationStrategy
@NgModule({
.....
providers: [
// Below line is optional as default LocationStrategy is PathLocationStrategy
{provide: LocationStrategy, useClass: PathLocationStrategy}
]
})2) Changez la base Href dans index.html, Angular2 gérera toutes les routes post base Href.
<base href="http://stackoverflow.com/app-context/">Par exemple
<base href="http://stackoverflow.com/app/">3) Sur le serveur dorsal, nous devons rendre le fichier index.html pour toute requête présentant le modèle suivant
"/app/**" - Render index.html for any request coming with "/app/**" patternindex.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="http://stackoverflow.com/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> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
