Angular 4 - Multiple instances of modules in memory

Question

We have a large Angular 4 application using lazy loading along with the preloading strategy of preloadAllModules. We are using Angular CLI.

While looking at a memory issue in the Chrome inspector, I noticed that we have multiple module instances everywhere.

If I am reading this right, we have 83 instances of TranslateModule and HttpModule etc...

Only thing I can think of is that every lazy loaded module has its own root which needs to create its own module for that bundle?

Is it possible to get rid of all these instances or is that just how it works?

Answer 1

Is it possible to get rid of all these instances or is that just how it works?

Yes, just import them into root AppModule. However, while you can avoid putting HttModule into every loaded module and can import it only once into root AppModule, you can't avoid duplication for RouterModule which should be used like this RouterModule.forChild(routes).

The duplication happens because every lazy loaded module has its own injector with its own instances of all imported modules. So if you have 83 lazy-loaded modules and each module imports HttpModule and RouterModule you will have 83 instances of each imported module.

For more information read here:

• Avoiding common confusions with modules in Angular