0

Given 2 lazy loaded modules tableau-de-bord and import. These 2 modules are both importing a common shared-module which is actually shared between all the modules of the app.

My problem is, when I run ng serve or ng build, I should have let's say 2 chunks for the two modules. Instead, I have 3 (src-app-modules-import-import-module.js, src-app-modules-tableau-de-bord-tableau-de-bord-module.js and default~src-app-modules-import-import-module~src-app-modules-tableau-de-bord-tableau-de-bord-module.js).

When I first created the import module and ran ng serve, that default~src thing was not there. Some times later, it appeared.

Of course if I delete that file, one of the two modules will fail to load.

It is really annoying because when I load one of import or tableau-de-bord, that file is downloaded too and it also increases the final size of the app.

So why is creating this file and can I get rid of it? If yes, how?

Note that i have other modules that have the same issue. The app is holding 8 modules but this doesn't happen on all of them.

Edit: Turns out it is because the two modules linked are importing one same module. For instance, import-module and tableau-de-bord-module are both importing FontAwesomeModule (I only need it in these two). I've removed the import on import-module and the default~src was gone.

Then I tryed to put FonAwesomeModule inside shared-module hoping it will be available on the modules where I need it without creating another linked chunk but nope. The chunk got created every time I use font-awesome in both modules.

So there come the question. How can I share a module between modules without having that default~src stuff created?

Is it even a normal behaviour?

Buu97
  • 158
  • 2
  • 15
  • what makes you think it is redundant chunks? – angularrocks.com Feb 15 '20 at 00:42
  • @kuncevic.dev Well, it should be 1 chunk per module, right? It doesn't make sense that I have a file that is kinda linking 2 independent modules. – Buu97 Feb 17 '20 at 02:03
  • How about shared code? Say you have a module that you sharing across other modules in your app - you do not want this code get duplicated across, right? – angularrocks.com Feb 17 '20 at 03:15
  • @kuncevic.dev yes, the main purpose of shared-module is that some components are used on all of the other modules. All modules have then to import shared-module which contains the declarations of these components. – Buu97 Feb 17 '20 at 06:36
  • 1
    Please read this article https://medium.com/angular-in-depth/angular-code-splitting-or-how-to-share-components-between-lazy-modules-432c755e389c – yurzui Feb 24 '20 at 14:30
  • @yurzui Thank you very much. I understand it now. And that explains why, after some trials, I made it to remove one of the default chunks by placing it inside sharedModule but the other one was still in a separate chunk. – Buu97 Feb 24 '20 at 16:38

0 Answers0