10.1.0 Router empty path regression

[akturatech]

🐞 bug report

Summary

Upgrading to Angular 10.1.0 does not stop routing on the first matching route entry.

Is this a regression?

Yes, this used to work in all previous versions of Angular (from v2 onwards).

Description

Previous versions of Angular allowed routes to be defined in a prioritized order. As per the screenshot below, we direct the route to specific module if a path is provided, however if no path is provided, we route to the main application module.

It appears that V10.1.0 now triggers the last path (the one highlighted in the screenshot above) even if the other paths load first. In our case, if we try to login via the auth path, it first shows the login page for a brief few milliseconds and then it tries to navigate to the main module via the path: '' entry but this fails the auth check and redirects back to the auth module and this cycle then repeats forever.

🔬 Minimal Reproduction

Removing the highlighted line in the above screenshot stops the repeated loading from occurring. But this isn't a fix as it stops our app from working as well.

🌍 Your Environment

Angular Version:

Angular CLI: 10.1.0
Node: 12.10.0
OS: linux x64

Angular: 10.1.0
... 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.1000.7
@angular-devkit/build-angular     0.1001.0
@angular-devkit/build-optimizer   0.1001.0
@angular-devkit/build-webpack     0.1001.0
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.1.0
@angular/cdk                      10.1.3
@ngtools/webpack                  10.1.0
@schematics/angular               10.1.0
@schematics/update                0.1001.0
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.44.1

[indraraj26]

i think you will have to add pathMatch:"full" in you blank path:""

[akturatech]

Good morning @indraraj26 . Thank you for your suggestion.

I tested this and unfortunately it doesn't work. The reason is that the last route redirects to our main module which has many routes of its own. With a full match, the routes within the main module no longer work.

Hopefully this explains our routing system (which was implemented when the first version of angular was released with lazy loaded modules and has worked until now):

/ : app module. has shared libraries for parent modules (auth, main etc)
  /auth : auth module allows login, signup etc. auth modules has its own lazy loaded modules
  / : main module. has guard to stop access. redirects to auth if not logged in. has shared libraries for main modules
    request : example lazy loaded page. this has its own modules as well
    calendar : another example lazy loaded page
    ...

Some examples paths are:

/ : will try to access main module which will redirect to requests module if logged in. if not, will redirect to auth module to log in
/auth/sign-in 
/requests/edit : will work only if signed in
/calendar : will work only if signed in

[akturatech]

OK I tried changing the path to '**' instead of empty and this actually gets me a little bit further - it now loads the main module but doesn't load any of the children in the main module.

My main module has routes like this:

I'm guessing here that '**' in the app route is consuming the entire path and therefore only the path:'' at the top of the main route is matching.

The only way i can get the new version of Angular to work is to provide the main module with a path name like this:

But this is not an option for me as our app is used by our users to build forms and each form has a path that is included in an email that our users send to our clients. Changing our path to these forms is not an option as it will disrupt several hundred users as the previous form paths will no longer be valid.

[indraraj26]

Hi @akturatech ,

Do you have router-outlet in MainComponent.html it is needed so that children can render, as you are not using component-less routing.

Also is it possible for you to provide reproduction via stackblitz ?

[akturatech]

Hi @indraraj26,

Do you have router-outlet in MainComponent.html

Yes i do.

Also is it possible for you to provide reproduction via stackblitz

Yes sure...

Example project is here in v10.0.9. It works: https://stackblitz.com/edit/angular-ivy-crjaz8?file=src%2Fapp%2Fguard%2Fa.guard.ts
If you upgrade to v10.1.0 it blows up.

The reason is that the guard on the empty path in the app module is running when it shouldn't be. It should run only when the path: '' is activated, but it runs even if we go to '/auth' path. This is only happening in 10.1.0 and not in older versions.

Note that the empty path is not activating as it is not printing "main works!". I believe routing is working as it should. It appears that canLoad guard though is incorrectly firing.

In my main app, we use the guard on the empty path to check that the user is authorised and redirect back to the 'auth' path if they are not. In v10.1, as the guard is now firing even when we go to 'auth' path, it is failing auth check and returning false and redirecting back to auth path, which causes the guard to check again and repeat forever.

[akturatech]

One more clue - if i name the empty path (eg path: 'main') then the guard works correctly and runs only when the 'main' path is activated. So the issue is:
canLoad on an empty path is running the guard even if the path is not being loaded.

[AlexanderOpran]

We have the exact same issue as described by @akturatech. Any updates regarding this?

[akturatech]

@AlexanderOpran No. This issue seems to haven fallen through the cracks.

@indraraj26 Do you know how I can raise this with the angular team as we've had no response yet. Should I re-raise the issue again?

[akturatech]

@AlexanderOpran I wonder if it is worth you raising this as your own issue and linking back to this one or including my stackblizt replicating the issue? All the newer bugs seem to be getting assigned to people and have confirmed tags etc. This one seems to have been lost.

[atscott]

Likely caused by d7dd295 which should be reverted.

[atscott]

Note that as a temporary workaround, you can use
return this.router.createUrlTree(['auth']);
instead of

this.router.navigate(['auth']);
return false;

because the PR was meant to respect the ordering with prioritization, but only works with returning UrlTrees and fails to do so if a guard calls router.navigate to "redirect" which cancels the current navigation immediately and proceeds with the new one.

[akturatech]

@atscott Thank you for the update and workaround :)

[atscott]

@akturatech I have a fix for this out for review and it should make it into the 10.1.2 release next week. If you want the fix now, it actually happens to already be fixed in 11.0.0-next.1.

[emillime]

Note that as a temporary workaround, you can use
return this.router.createUrlTree(['auth']);
instead of

this.router.navigate(['auth']);
return false;

because the PR was meant to respect the ordering with prioritization, but only works with returning UrlTrees and fails to do so if a guard calls router.navigate to "redirect" which cancels the current navigation immediately and proceeds with the new one.

I have the same issue, thank you for the workaround!
But what do we return as UrlTree in the case where it returned true before?

Edit:
Nevermind, I saw in the documentation that the type of CanLoad is boolean | UrlTree so we can still return true.
This seems like a better solution than using router.navigate. Thank you!

[atscott]

Fixed in 9c51ba3

[akturatech]

That is awesome @atscott . Thank you so much.
Love Angular and love the team as well. Such a great framework.

[akturatech]

@atscott Thank you for the workaround suggestion. I finally got to test it. Unfortunately setting UrlTree doesn't work for us as the guard redirects to a different subdomain on authentication failure (or app has a subdomain per user and a root subdomain for login) and therefore we cannot use UrlTree.
I'll report back when 10.1.2 is released and let you know if the fix works.

[AlexanderOpran]

Issue still persists even with 10.1.2

[atscott]

Hi @AlexanderOpran, could you provide a reproduction? The stackblitz for this report does work with 10.1.2: https://stackblitz.com/edit/angular-ivy-sez7kw?file=src%2Fapp%2Fapp.component.ts

[akturatech]

Good morning @atscott. I can confirm my project now works perfectly with 10.1.2. Thank you!!

[AlexanderOpran]

@atscott I will try and do a stackblitz to reproduce this. Perhaps another related issue but router.navigate does not seem to work from inside guards. It will trigger the module guard infinitely even if the page/module I try to navigate to is not protected by any. This is also happening only with the ** path, not the named ones.

[angular-automatic-lock-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.}