Routing issue after upgrading from Angular 10 to Angular 11

[mdudek]

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

[mdudek]

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.

[atscott]

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

[mdudek]

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

[atscott]

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

[mdudek]

@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:

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

[atscott]

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

[mdudek]

@atscott - I have successfully created minimal skeleton project to demonstrate the routing issue.

Sample Project: Angular11RoutingIssue.zip

1. Extract to folder
2. npm install
3. npm run start
4. open http://localhost:8081/
5. check router log in browser console. The last logged stage is 'RouteConfigLoadEnd'.

[atscott]

@mdudek - Awesome! Thanks for the reproduction! I did a bit of debugging and couldn't quite pin down what was causing this. All of the execution in applyRedirects looks correct, but for some reason one of the observables doesn't emit.

I was able to confirm that my pending work would fix this issue though. I'm hoping to get this submitted soon. Thanks for your patience!

[atscott]

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

[mdudek]

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

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