5

I have a client's project that is using the Angular 6 framework. There are several modules in the project, 16 of which are supposed to be lazy-loaded (e.g. loadChildren).

But when I run build for production, only 9 of those modules have their own chunks, the other 7 modules are merged with the main chunk (i.e. main.js), therefore those modules will be loaded eagerly.

I have compared some of the lazy-loaded modules with a few eagerly loaded modules to find out what I did wrong, but couldn't spot any difference among those.

Can anyone help me understand why this is happening and how to fix it? Any hint will be highly appreciated.

shihab
  • 51
  • 2
  • 1
    Check if that lazy loaded modules aren't included in other modules. – Elias Soares Jun 07 '20 at 11:06
  • 5
    @EliasSoares, thanks for you reply. I checked and those were not included anywhere. But while checking out for the second time, I found that those lazy modules are being exported from an index.ts file, which exports some eager-loaded modules and those eager-loaded modules are being imported in the main routing module from the index.ts file. Even though I was importing only those eager-loaded modules, everything exported from that index file was included in the main chunk, something I didn't expect. Learned something new here. Anyway, thanks a lot. – shihab Jun 07 '20 at 11:40
  • Hi, did you ever find a solution for this? I'm facing the same problem, and the behavior I'm seeing (which you're explaining too) doesn't make sense to me. Why would @angular/compiler include javascript modules in the main bundle, just because they're exposed from a library? It doesn't really make sense and I feel that there's gotta be some solution for this... – Pieterjan Sep 29 '22 at 07:34

0 Answers0