Angular Routing Issue: Not Working for 'http://localhost:4200/#access_token=MytokenValue

Question

I am getting a route from Third Party app post authentication, Route is like below: http://localhost:4200/#access_token=dynamicTokenValue

I had configured this route as below when I was using Angular 11 and it was working as expected, Post upgrade to Angular 16, It stopped working. { path: 'access_token', data: { breadcrumb: 'ABC', }, redirectTo: 'mycomp', }

P.S: I have path configured for 'mycomp' with lazy loading (ESM).

I tried below but did not work for me, It's treating 'access_token=:id' as a string instead of treating :id as dynamic value.

{ path: 'access_token=:id', data: { breadcrumb: 'ABC', }, redirectTo: 'mycomp', }

Below are examples: Working in Angular 11:

https://stackblitz.com/edit/angualar-routing-in-angular-demo-example-yz3igv?file=src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.module.ts

Working Route: https://angualar-routing-in-angular-demo-example-yz3igv.stackblitz.io/#access_token=2332

Not working in Angular 16:

https://stackblitz.com/edit/angular-erafn2?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fapp-routing.module.ts,src%2Fapp%2Fapp.component.html

Not Working Route: https://angular-erafn2.stackblitz.io/#access_token=24224

Answer 1

You can try this fix

Inside app component ts file:-

  ngOnInit() {
    // Check if the 'access_token' query parameter is present in the URL
    const hashURL= location.hash.slice(1);
    const urlParams = new URLSearchParams(hashURL);

    if (urlParams.has('access_token')) {
      // Redirect to your file
      this.router.navigate(['/mycomp']);
    }
  }