angular: When CanActivate guard redirects to / on initial load, router does not render component

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior When a CanActivate guard navigates to the root path / on the initial load, the router does not render the root component. If the guard navigates elsewhere (e.g. /elsewhere) then it correctly renders the component for that route.

Expected behavior Navigating to root should have the same behavior as navigating to any other route. It should always render.

Minimal reproduction of the problem with instructions See https://github.com/nertzy/angular-issue-13530

What is the motivation / use case for changing the behavior? This used to work in Angular 2.2.x. We want to redirect to the root path when a user is unauthenticated in our application.

Angular version: We’ve seen it in 2.3.1 and 2.4.1
Browser: all
Language: TypeScript

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 21
Comments: 35 (7 by maintainers)

Commits related to this issue

Reproduce https://github.com/angular/angular/issues/13530 Signed-off-by: Michael Stuart <mistuart@corelogic.com> — committed to nertzy/angular-issue-13530 by nertzy 7 years ago
fix(router): fix CanActivate redirect to the root on initial load Closes #13530 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to angular/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to nertzy/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to nertzy/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to angular/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to angular/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to asnowwolf/angular by DzmitryShylovich 7 years ago
fix(router): fix CanActivate redirect to the root on initial load (#13929) Closes #13530 PR Close #13929 — committed to juleskremer/angular by DzmitryShylovich 7 years ago

Most upvoted comments

Still seeing this in angular 6 as well. @grigorig did you find a workaround?

kwkelly on Oct 9, 2018

I got the same issue in Angular 4. My guard was looking like this:

this._authService.isAuthenticated().subscribe(authenticated => {
          return authenticated;
});

Fixed it by doing this:

 return this._authService.isAuthenticated().map(authenticated => {
        return authenticated;
});

Sauruz on Oct 11, 2017

Still seeing this with @angular/router 7.2.5

fredsa on Feb 22, 2019

I’m seeing this with a new app based on Angular 6. The problem occurs even if my AuthGuard canActivate function is extremely simple (return false).

It works if I explicitly redirect to my fallback (login) page in the AuthGuard. Is this how it is supposed to work now? My expectation is that routes that can’t be activated are ignored by the router, which then will continue to match the other routes in the list. Is this model wrong?

grigorig on Jul 7, 2018

I’m getting exactly same issue in angular 4.1.3, ng2Admin application. suggestions are appreciated thanks…

raja1988m on Sep 5, 2017

Try with redirectTo and pathMatch http://stackoverflow.com/a/39055118/4872010

anderflash on Jan 12, 2017

https://plnkr.co/edit/qXH60zedNRpRUp0nHQxO?p=preview

DzmitryShylovich on Jan 9, 2017

I’ve deployed it to a GitHub page as well: https://nertzy.github.io/angular-issue-13530/

The GitHub page shows that it still happens for the angular routing root when there is a <base href> set to a non-root path.

nertzy on Jan 4, 2017

@nertzy please check your code for router.navigate on the initial web app load.

I’ve had the same symptoms while accessing/redirecting to guarded route; the initial navigation was cancelled by another router.navigate to ‘/’ (which i’ve redirected to guarded path) and the component was never rendered.

kaznovac on Dec 26, 2016

I am also seeing the same issue, for me as well the steps to reproduce are the same as @nertzy mentioned above. In my application I have the canActivate guard on the login page and I am having it to redirect to the home page if the user is already logged in. The home page does not have any guards and similar to the issue mentioned above the home page does not render but the promise is fulfilled as a success. I am using angular 2.4.0 and angular/router 3.4.1. However the same code works flawlessly with angular/router 3.2.1 and angular 2.4.1

@nertzy which version of angular/router are you using, if you are using 3.4.1, can you try downgrading it to 3.2.1 and see if it works for you.

ffrindz on Dec 25, 2016