Angular 8 routing rewrite fails

Question

I have an app that uses MSAL.js for Azure B2C authentication. So it follows a regular OAuth 2.0 implicit flow to auth the user - when user clicks on a Login button it gets redirected to "authorize" endpoint, then the user is redirected back to the app upon successful login.

And here's the problem - the reply request comes as follows:

https://localhost:4200/run#state=dc81c410-4cbd-4218-bc78-9c5b5e9bebe5&client_info={...}

In order to make it work I have to rewrite this Url to run/state, so the resulting Url would be:

https://localhost:4200/run/state=f5f2c20f-ed72-4631-b834-80bf60aa6cd7&client_info={...}

And this is done in AppComponent.ngInit:

    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        if (!!event.url && event.url.match(/^\/run#state/)) {
          const newUrl = event.url.replace("run#state", "run/state");
          console.warn(`newUrl = ${newUrl}`);
          this.router.navigate([newUrl]);
        }
      }
    });

Now I see the rewrite in the logs.

But the problem is it redirects to root now. From the log:

• NavigationStart for run/state
• URL REWRITE (but this time nothing to rewrite already, it's run/state now)
• "Angular is running in the development mode. Call enableProdMode() to enable the production mode."
• "Processing the callback from redirect response" - MSAL.js callback function
• "CHECK USER" - from CanLoad guard (which is simply returns true for now)
• RouteConfigLoadStart
• Navigated to https://localhost:4200/ BOOM!!!

Why on Earth does it redirect to root?

One important thing - if I navigate to:

https://localhost:4200/run/state=04e49903-1510-47da-9b24-cee988229d16&client_info={...}

in the browser, it does open that route (no redirects!).

The repo is on github.

The console:

Answer 1

• If You need to route (rewrite) on route/state you should try this,

  this.router.events.subscribe(event => { if (event instanceof NavigationStart) { if (!!event.url && event.url.match(/^\/run#state/)) { this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => this.router.navigate(['/run/state'])); } } }); I hope It Will work for you