Navigating to lazy loaded module from route guard causes the URL path to briefly be blank

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

Not sure

Description

If you have a page that is protected by a route guard which triggers a redirect (thus cancelling the current navigation) to a page which is lazy-loaded, the URL will briefly read just the host name (/) while the module loads. (An example of this would be having a dashboard that’s protected by a user login guard that redirects to the login page (which in my case is lazy-loaded).)

This is further an issue because it changes the history so that if the user hits the back button, they will be taken to / rather than the page they originally tried to navigate to.

Also, if there is a network issue retrieving the module, the user will be abandoned on the home page. If they refresh to try to fix the issue, they will no longer be where they started.

🔬 Minimal Reproduction

angular-lazy-load-guard-test.zip

Navigate to /page1 and you should get redirected to /page2. However, notice that the URL briefly reads /. If this is not apparent, try adding network throttling (a Firefox feature) to slow down the retrieval of the lazy module.

I also have a second redirect that emulates the behavior of the guard in the Page1Component. If you disable the card, the page1 component will still redirect. However, note that the URL never reads blank at this point…it always shows something.

🔥 Exception or Error

N/A

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.7
Node: 12.3.1
OS: linux x64

Angular: 9.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.7
@angular-devkit/build-angular     0.900.7
@angular-devkit/build-optimizer   0.900.7
@angular-devkit/build-webpack     0.900.7
@angular-devkit/core              9.0.7
@angular-devkit/schematics        9.0.7
@ngtools/webpack                  9.0.7
@schematics/angular               9.0.7
@schematics/update                0.900.7
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[chris13524]

If this is going to be closed, then the example in the documentation should also be updated: https://angular.io/guide/router#canactivate-requiring-authentication

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}