Router navigate not redirecting within a promise in Angular 11

Question

I am trying to navigate back to a home page within .then() after a promise but it does not seem to redirect. I have added a console log to see if this block is reached and I can confirm it is reached.

This code is within a service in an angular project, version 11.

I even tried to use ngzone which a few people suggested but this did not seem to resolve the issue.

Attempt 1 without ngzone:

        if (this.authService.isAuthenticated()) {
          this.logService.info('Refreshing auth token...');
          this.authService
            .refreshAccessToken()
            .toPromise()
            .then(() => {
              // ISSUE IS HERE, NOT NAVIGATING TO '/'
              this.router.navigate(['/']);
              this.isLoading = false;
            });
        }

Attempt 2 with ngzone:

        if (this.authService.isAuthenticated()) {
          this.logService.info('Refreshing auth token...');
          this.authService
            .refreshAccessToken()
            .toPromise()
            .then(() => {
              // ISSUE IS HERE, NOT NAVIGATING TO '/'
              this.zone.run(() => this.router.navigate(['/']););
              this.isLoading = false;
            });
        }

Please feel free to ask any questions and it would be much appreciated if any answers would have explanations.

Can you please add the routing file? And aslo, where is this action being performed? In a service? In the Guard? In a component? — Jacopo Sciampi, Feb 17 '22 at 12:38
@JacopoSciampi this is within a service and called by a component, app routing is perfectly fine. — hhww59, Feb 17 '22 at 12:52
@AakashGarg unfortunately I cannot provide much more within stackblitz as this is private project — hhww59, Feb 17 '22 at 12:52
@JacopoSciampi - Routing is set up fine and this path is working fine, the router.navigate doesn't seem to be triggered — hhww59, Feb 17 '22 at 12:54
what do you mean doesn't seem to be triggered? maybe you can mock the same situation over stackblitz? — Aakash Garg, Feb 17 '22 at 13:09
@akotech i have console logged the result of the promise and I can confirm the promise is successful and no errors :( — hhww59, Feb 17 '22 at 13:20

score 1 · Accepted Answer · answered Feb 23 '22 at 13:14

I found the solution today and I observed that the issue problem is with other resolvers which is defined in my route. Before calling my page, these resolvers are getting called and one of the resolver is not emitting value when this redirection happens.

By enabling tracing to debug I figured this out and I would recommend if anyone has navigation issues with angular.

How to enable routing tracing:

imports: [
    RouterModule.forRoot(
      routes,
      { enableTracing: true } // <-- debugging purposes only
    )
]

Example of tracing and what helped me find the problem:

The answer from the following also helped: angular: At least one route resolver didn't emit any value and so page not loading all times

Router navigate not redirecting within a promise in Angular 11

1 Answers1