Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan verwijderen zonder enig probleem te genereren.
Ik herinner me dat het op AngularJS 1 gemakkelijker was om $locationProvider.html5Mode(true);
toe te voegen
Ik zou het ook op prijs stellen als je me kunt vertellen of dit een goede gewoonte is (verwijderen van #) of de SEO voor de applicatie kan beïnvloeden (of verbeteren).
PS: ik gebruik Angular 2 met typoscript
Antwoord 1, autoriteit 100%
Zoals @Volodymyr Bilyachat al aangaf, is PathLocationStrategyeen standaard locatiestrategiein Angular2, en als de #aanwezig is in de url, moet dat ergens zijn overschreven.
Controleer naast de moduleproviders uw module-import, deze kan ook worden overschreven door de { useHash: true }op te geven als het tweede argument van de RouterModule.forRoot:
imports: [
...
RouterModule.forRoot(routes, { useHash: true }) // remove second argument
]
Houd er rekening mee dat wanneer u PathLocationStrategygebruikt, u uw webserver moet configureren om index.html(het toegangspunt van de app) voor alle aangevraagde locaties te dienen.
Hier zijn configuratievoorbeelden voor enkele van de populaire webservers: https://angular .io/guide/deployment#fallback-configuration-examples
Antwoord 2, autoriteit 42%
In angular is er locatiestrategie
Kijk in app.module.ts waar de app is opgestart, daar heb je
@NgModule({
.......
providers: [
....
{ provide: LocationStrategy, useClass: HashLocationStrategy },
....
]
});
En verwijder dit onderdeel aangezien PathLocationStrategy standaard is strategie
Antwoord 3, autoriteit 24%
Bovenstaande antwoorden hebben de juiste uitleg over het verwijderen van de hash uit de URL, maar wanneer u LocationStrategywijzigt, wordt uw back-end beïnvloed omdat de back-end niet al uw Angular 2Routes. Hier zijn de stappen om hash te verwijderen met de back-end ondersteuning.
1) Verander Angular om PathLocationStrategy te gebruiken
@NgModule({
.....
providers: [
// Below line is optional as default LocationStrategy is PathLocationStrategy
{provide: LocationStrategy, useClass: PathLocationStrategy}
]
})
2) Wijzig de basis Href in index.html, Angular2 zal alle routes na de basis Href afhandelen
<base href="/app-context/">
Bijvoorbeeld
<base href="/app/">
3) Op de backend-server moeten we het index.html-bestand renderen voor elk verzoek met het onderstaande patroon
"/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>