Angular - Migrate from HashLocationStrategy to PathLocationStrategy Maintaining Bookmarks

Issue

Currently I am working on migrating us from HashLocationStrategy to PathLocationStrategy and I am running into an issue with a requirement I have: "Existing bookmarked URLs must still work". But when I change the location strategy over here's what happens:

Before:

localhost:4200/#/admin

After:

localhost:4200/admin

Bookmarked saved as "localhost:4200/#/admin" clicked:

localhost:4200/home#/admin

Is there any way to just have this understand that the /#/ is just to be ignored now? I was hoping that Angular would naturally route away from the hash, but sadly it doesn't seem to be doing what I expected.

Currently the only thing I changed is adding this in place of "HashLocationStrategy" in app.module.ts:

{ provide: LocationStrategy, useClass: PathLocationStrategy },

Let me know if there's any more information needed and I'll add it!

Solution

I had the same exact problems and stumbled multiple times before finally figuring the problems and solutions, i'm sharing my findings for anyone who will encounter same problems:

EXPLANATION

for vanilla html, the hash symbol inside a url is a reserved identifier appended at the end of the URL, referred as url fragment, and is ignored when the browser tries to fetch the html page from server.

So when given following routes config:

    { path: 'admin', component: adminComponent, canActivate: [AuthGuard]}, // 1
    { path: 'home', component: homeComponent, canActivate: [AuthGuard]}, // 2
    { path: '', redirectTo: 'home', pathMatch: 'full'}, // 3

After changing our angular app to PathLocationStrategy, when a user navigated to our webpage using old url containing hash, the way that angular will interpret the address are now as follows:

• on url navigated: https:example.com/#/admin
• address get interpreted as: https:example.com/, ignoring the hash: #/admin
• the interpreted address will then matched with the 3rd route, and be redirected to: https:example.com/home
• finally, re-append the hash: #/admin, forming: https:example.com/home#/admin

which explain the wonky url when an old hash url is used.

SOLUTION

though I'm unable to discover any good fix for above issue (seeing as no one provided any answer for OP's question), I've come up with a somewhat ugly solutions:

// app.component.ts

// grab url fragment
this._ActivatedRoute.fragment.subscribe(fragment => {
    if(!fragment) return
    const fragmentArr = fragment.split("/")  // split url fragment by "/"
    if(fragment.length > 1){ // if the split is valid, re-route
        fragmentArr.shift()
        this.router.navigate(fragmentArr, { fragment })
    }
})

the solutions which i provided works by:

• on url navigated: https:example.com/home#/admin
• grab the url fragments as a string: /admin
• split the url fragment to an array, then re-navigate to following: https:example.com/admin

warning: the reason i mentioned my solution as ugly is because it overwrites the intended use of url fragment(hashtag), so please use with care

CREDIT

to give credit to an article which helps me understand the main issue: https://codecraft.tv/courses/angular/routing/routing-strategies/

Answered By - aii-yin