I have an angular (4.2.5) app, and at some point in my code, I do this :

this._appService
    .post('/createhero/save', opts)
    .subscribe(
        (resData: any) => 
        {   
            this._router.navigate(['home']);
        }
    );

The router call to navigate() doesn't work - nothing happens. I enabled route debug, and this is what I get :

So the navigation is canceled without given reason. In others ponents, I have the same kind of navigate() (some in observable callbacks too) which works well. The route /home works as well.

I'm starting to run out of ideas, and I don't even know why the navigate() won't work in this case.

I have an angular (4.2.5) app, and at some point in my code, I do this :

this._appService
    .post('/createhero/save', opts)
    .subscribe(
        (resData: any) => 
        {   
            this._router.navigate(['home']);
        }
    );

The router call to navigate() doesn't work - nothing happens. I enabled route debug, and this is what I get :

So the navigation is canceled without given reason. In others ponents, I have the same kind of navigate() (some in observable callbacks too) which works well. The route /home works as well.

I'm starting to run out of ideas, and I don't even know why the navigate() won't work in this case.

• javascript
• angular
• routes
• angular-routing

• Where did you use your navigate code? – TheUnreal Commented Jul 7, 2017 at 14:56
• In my CreateHeroComponent save() method, which is triggered by a button <button (click)="save()">Done</button> – Adam S Commented Jul 7, 2017 at 15:03
• For me, the issue was ing from a guard as well (the MsalGuard one from @azure/[email protected]) and was only occurring at initial navigation on small-name routes like "/foo" (a bug from @azure/msal-angular; in particular, the problem disappeared by renaming the route to "/foo-bar-baz") – fservantdev Commented Nov 24, 2021 at 17:29

1 Answer 1

Had similar issue, reason really doesn't help does it :)

What my issue was, was that the route I tried to navigate had a guard on its own which subscribed to observable and since I already gave value to it, the initial value of observable was false and since route was blocked, navigation was canceled.

Can it be that some other guard is blocking the route and canActivate() gives out true/false while depending on your query result but not actually waiting for the result?

Hope this helps a bit at debugging :)