Routing issue after upgrading from Angular 10 to Angular 11

Affected Package

@angular/router

Description

Lazy loaded module routing flow ends with 'RouteConfigLoadEnd' event, next expected state 'RoutesRecognized' is not logged. The lazy loaded component is not applied to the outlet, there is no error logged in console.

btw: I'm using webpack dev stack not the Angular CLI

🌍 Your Environment

Angular Version:

11.0.3

I'm open to provide access (e.g. Remote desktop) to my development machine to be able to debug the issue. The project is relatively large and needs also a server side (WebApi) to run.

@mdudek

@mdudek - Can you first attempt to create a stackblitz reproduction? You should be able to extract the route config you're trying to activate into a demo that reproduces the error. Since the issue is with activating a certain route, it shouldn't take too long to extract the relevant parts.

@atscott

@atscott - I recently tried to make 'similar' stackblitz project and it works without issues. Hard to say if the problem could be caused by different build stack. The Stackblitz is using Angular cli, my project is based on Webpack dev stack without Angular cli.

@mdudek

@mdudek - I see. Can you debug this a bit further to try to isolate the issue?
RouteConfigLoadEnd happens during the applyRedirects stage. Can you put a breakpoint here to see what the urlAfterRedirects value is that's being sent to the recognize stage? https://github.com/angular/angular/blob/master/packages/router/src/router.ts#L587-L589
It's curious that you report RoutesRecognized not happening, but also that there is no error. I'm wondering if the applyRedirects never finishes. If that's the case, then it might be that lazy loading never completes for one of the configs. That happens here:

angular/packages/router/src/apply_redirects.ts

Lines 327 to 342 in 3ec2807

    
             if (route._loadedConfig !== undefined) { 
        
               return of(route._loadedConfig); 
        
             } 
        
             return this.runCanLoadGuards(ngModule.injector, route, segments) 
        
                 .pipe(mergeMap((shouldLoadResult: boolean) => { 
        
                   if (shouldLoadResult) { 
        
                     return this.configLoader.load(ngModule.injector, route) 
        
                         .pipe(map((cfg: LoadedRouterConfig) => { 
        
                           route._loadedConfig = cfg; 
        
                           return cfg; 
        
                         })); 
        
                   } 
        
                   return canLoadFails(route); 
        
                 })); 
        
           }

A few other questions:

What route are you trying to activate?
What is the Routes config for getting to that route?
Do any of the Routes have an empty path?
Can you send the stackblitz of your attempted reproduction. I know you said it works, but that would at least help clarify where you're seeing the issue.

The ApplyRedirects algorithm was one of the things that did change in v11. I'm working on another fix that will change the approach once again so maybe if the first change is what broke you, this upcoming change will fix it.

@atscott

@atscott - I have followed your instructions and I can confirm that applyRedirects never finishes and recognize stage is not hitted.

It seems that lazy loaded module is loaded (I checked that loaded module constructor is called). The mentioned code part (Lines 327 to 342) is called and 'route._loadedConfig = cfg; ' is called.

There are the answers to your questions:

The testing route is 'https://localhost:8081/a'
You can see the routes config in reproduction stackblitz https://stackblitz.com/edit/angular11-lazy-loading

@mdudek

@mdudek Hmmm... I don't really see what could be the issue. Are you able to create a minimal github reproduction? Using your project as a base, try removing all the unneeded parts until you have just the skeleton reproduction. You should be able to remove the need for the WebApi server by faking your server calls with just an rxjs Observable. Remote desktop isn't a good option for debugging.

fix(router): apply redirects should match named outlets with empty pa…

@mdudek

Hi @mdudek, could you try updating to 11.0.6 and see if this resolves your issue?

@atscott

Hi @atscott , I can confirm that my migrated project is working without issues with version 11.0.6.

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.}

Navigation Menu

Repository navigation

Routing issue after upgrading from Angular 10 to Angular 11 #39952

Affected Package

Description

🌍 Your Environment

22 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	if (route._loadedConfig !== undefined) {
	return of(route._loadedConfig);
	}

	return this.runCanLoadGuards(ngModule.injector, route, segments)
	.pipe(mergeMap((shouldLoadResult: boolean) => {
	if (shouldLoadResult) {
	return this.configLoader.load(ngModule.injector, route)
	.pipe(map((cfg: LoadedRouterConfig) => {
	route._loadedConfig = cfg;
	return cfg;
	}));
	}
	return canLoadFails(route);
	}));
	}

Routing issue after upgrading from Angular 10 to Angular 11 #39952

Description

Affected Package

Description

🌍 Your Environment

Activity

mdudek commented on Dec 7, 2020

atscott commented on Dec 8, 2020

mdudek commented on Dec 8, 2020

atscott commented on Dec 8, 2020

mdudek commented on Dec 8, 2020

atscott commented on Dec 8, 2020

22 remaining items

atscott commented on Jan 6, 2021

mdudek commented on Jan 8, 2021

angular-automatic-lock-bot commented on Feb 8, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions