question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Resolve not invoked with lazy-loaded module using loadChildren as promise

See original GitHub issue

🐞 bug report

Affected Package

RouterModule from @angular/router

Is this a regression?

I am running Angular 8 and I can reproduce in Angular 9

Description

When the feature module is lazy loaded, the resolver never gets called.

const routes: Routes = [
  {
    path: 'second',
    loadChildren: () => import('/second/second.module')
      .then(m => m.SecondModule),
    resolve: {
      data: SecondResolverService
    }
  },

I tried pre-loading and eager-loading the feature module, but the resolver is never invoked.

I’ve searched the issues but I cannot find anything related to this issue I’m seeing. I did find a stack overflow answer that said it should be working, but I can reproduce the issue fairly easily. (see “Minimal Reproduction” below)

This is the stackoverflow answer: https://stackoverflow.com/questions/53346976/resolver-on-lazy-loading-angular

Not sure if this is intended to be this way, if it is, it would be nice to state in the documentation. https://angular.io/api/router/Resolve https://angular.io/guide/lazy-loading-ngmodules#verify-lazy-loading https://angular.io/guide/router#lazy-loading-route-configuration https://angular.io/guide/router#preloading-background-loading-of-feature-areas From what I read, there is never an example where a resolver is used with lazy-loading module routes. But it’s also never explicitly stated that we should NOT use it this way, either.

🔬 Minimal Reproduction

Here is the stackblitz where the issue is reproducible: https://stackblitz.com/edit/angular-ivy-ubes1q?file=src%2Fapp%2Fapp.module.ts

(The child module is lazy loaded, the resolver never gets called, which is proven by the child guard in child module routes.)

🔥 Exception or Error

none

🌍 Your Environment

Angular Version: 8 and 9

Anything else relevant?

I did see this issue that maybe is related: #36193 but as the tags say it’s “confusing”

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
atscottcommented, Dec 18, 2020

Resolved by #38079, particularly this sentence in the docs for Resolve:

When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded. For example, consider the following route configuration:

1reaction
atscottcommented, Aug 7, 2020

Thanks for the reply and your work @atscott ! I don’t really understand why you say the guard would return false in this case, though since I didn’t include a guard in the route, just a resolver.

The child route that you’re activating has a guard which returns false. Note that all guards are performed before the resolvers. The execution is not guard for parent config -> resolver for parent config -> guard for child config -> resolver for child config but rather guard for parent config -> guard for child config -> resolver for parent config -> resolver for child config

Read more comments on GitHub >

github_iconTop Results From Across the Web

"Uncaught (in promise): Error: Cannot find module 'app/lazy ...
I am not using loadChildren, I have the ViewChild, SystemJsNgModuleLoader, and NgModuleFactory all set up which I know because this was ...
Read more >
Router's loadChildren Callback Doesn't Have To Be A Fat ...
It states that the loadChildren property needs to use the Fat-arrow syntax ... that is called to resolve a collection of lazy-loaded routes....
Read more >
How To Use Lazy Loading Routes in Angular | DigitalOcean
Learn how to enable feature modules to be lazy-loaded in Angular, allowing to load the code for some routes to be loaded on-demand....
Read more >
Angular Modules and NgModule - Complete Guide
If we try to use a component directly that is not part of a module, we will get the following error: Unhandled Promise...
Read more >
Router tutorial: tour of heroes - Angular
To use the Router , you must first register the RouterModule from the ... This milestone shows you how to configure a special-purpose...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found