I have an app that uses HashLocationStrategy and I want to change it to PathLocationStrategy. The issue is that I don't want to break existing links (ie bookmarked by users).
The main idea is to receive urls like localhost:3002/#/crisis-center and redirecting to localhost:3002/crisis-center
How can I configure this apart from removing useHash from the code below?
RouterModule.forRoot(routes, { useHash: true })
On
I think this link has the quick answer you are looking for.
Here is the code for it:
export class AppComponent implements OnInit, OnDestroy {
constructor (private router: Router) { }
ngOnInit() {
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
if (!!event.url && event.url.match(/^\/#/)) {
this.router.navigate([event.url.replace('/#', '')]);
}
}
});
}
ngOnDestroy() {
console.log("App Component is destroy!!");
}
}
But I think if you have access to the web server, you should do a redirect there instead. That's because with this front-end solution, it will only work if and only if the app.component stay alive the entire time. It is possible that it might get destroyed. I added the console.log in the ngOnDestroy life cycle hook. You should test your application to see if this will ever get called.
I decided to contribute what I ended up doing:
Fist I thought I would give the solution in a Guard associated with my application:
As I realised, only external links would be broken. Internal ones are formed by Angular's router. Then I thought why whould I wait for the router to get triggerred so an alternative is to add it in index.html first thing first in head tag: