0

Let's say we are lazy loading module B from module A. For example:

// routes for module A

const routes: Routes = [ 
  { path: '', loadChildren: './pages/B/B.module#BModule'}
]

// routes for module B

const routes: Routes = [ 
  { path: '', component: 'BComponent'}
]

My question is where should I use resolve for component/module B. Inside the routes for A or B? Which is the correct / a better approach?

Arda Oğul Üçpınar
  • 881
  • 1
  • 14
  • 38
  • 1
    The correct approach will be inside the lazy loaded module, because you are probably going to use a service which will only be necessary for the loaded module, and will only be provided there. If you add the service to the root app, it will add to the initial bundle size. – Poul Kruijt Oct 31 '19 at 07:33
  • I think resolving from the parent should work faster since the resolver will start before the child module lazy-loads. But, looks like you say I'm wrong? – Arda Oğul Üçpınar Oct 31 '19 at 07:39
  • That also makes sense yes, didn't think of that. I don't know if it resolves before, or waits until the module has been loaded. You should look into that, and I guess decide for yourself what's more important. Another point is that if you want to reuse the module in another path, you have to add the resolver there as well, if you don't add it to the module itself, but outside of it – Poul Kruijt Oct 31 '19 at 07:46
  • Just thought about it, but why would it work faster? It either resolves first, then loads the lazy module, or loads the lazy module and then resolves. Shouldn't make much of a difference timewise – Poul Kruijt Oct 31 '19 at 07:49
  • For re-using, yes, your approach looks more promising. Also since my pages are heavily loaded, I should use every chance to reduce main bundle size. For the speed difference, my resolvers are also very heavy, especially for the homepage (it handles 7 different API calls and all of them affect the meaning of the page), so even 100ms counts. – Arda Oğul Üçpınar Oct 31 '19 at 07:54
  • 1
    I understand, but I don't see how there will be a speed difference, because it has to resolve anyways, and it has to lazy load anyways. Changing the order of these, won't change the overal time it takes. If you want the initial drawing of the lazy loaded module to be faster, you should look into not using resolvers, and load it in the `ngOnInit` of the, in this case, `BComponent`. While showing some sort of loading indicator. This will give the idea the page loads fast, even though it will be around the same – Poul Kruijt Oct 31 '19 at 08:04
  • Not using resolvers was my first approach but the client requests every element safe and sound when the page opens. So, I’m stuck with resolvers. Whatever, I will resolve inside the lazy loading component as you suggest. Thank you for your time and concern – Arda Oğul Üçpınar Oct 31 '19 at 08:30

1 Answers1

1

I would do it in my lazy-loaded module. As adding resolve to the Mod A, will wait for resolve to complete and only then it will move to downloading required modules for that lazy route.

One other suggestion, if you need to use resolve(and if it takes considerable time to complete), try prefetching that lazy route. This might reduce your time considerably.

KiraAG
  • 773
  • 4
  • 19