CODEWITHSUNDEEP
angular
Thibs
Thibs

Reputation: 8258

Angular 4 - Multiple instances of modules in memory

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.

enter image description here

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?

Upvotes: 4

Views: 1628

Answers (2)

Max Koretskyi
Max Koretskyi

Reputation: 105497

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:

Upvotes: 7

bryan60
bryan60

Reputation: 29325

You should put all of these shared modules into a core module which is only ever loaded once and only imported by the app module

Upvotes: 2

Related Questions