Share an external module between lazy loaded modules in angular2

Question

My app has components that use a heavy-weight external package (ag-grid, about 1MB) that is provided as an angular2 module (AgGridModule). I would like to load this package only when the components using it are required, so my ContentModule and all of its submodules are lazy-loaded. The whole structure looks like this:

However, when I import AgGridModule into both Submodule1 and Submodule3, it ends up being included in compiled JS twice, making both 1.chunk.js and 3.chunk.js large. I tried importing it into ContentModule, but then the submodules do not recognize the components that are included in AgGridModule, even if I list them in the exports property of ContentModule.

@NgModule({
  imports: [
    ContentRoutingModule,
    SomeOtherModule,
    AgGridModule.withComponents([])
  ],
  exports: [
    // this is the component from AgGridModule that I use
    AgGridNg2
  ]
})
export class ContentModule { }

Is there a way to share a module between lazy loaded modules, or to expose some components of an imported module to lazy loaded children?

UPD: Creating a shared module and importing it into submodules does not help, there are still two chunks with about 1MB each:

UPD2: I solved the problem temporarily by merging Submodule1 and Submodule3 into a single module.

You should add the entire `AgGridModule` to the exports array. You can only export declarations within your `ContentModule` or entire other modules — Poul Kruijt, Jan 24 '17 at 11:38
@PierreDuc no, exporting the entire `AgGridModule` does not solve it, the component is still not being recognized. — Anton Poznyakovskiy, Jan 24 '17 at 12:25
Have you tried writing `AgGridModule` in `imports` array of `ContentModule`? As I am implementing the same scenario and working for me. P.S. I haven't created module files for child components. — Fawkes, Jan 30 '17 at 05:55
@BCoder yes, I posted the definition of my ContentModule in the question. How do you define routes to your child components, with `children` or with `loadChildren`? — Anton Poznyakovskiy, Jan 30 '17 at 12:35
I have defined routes with `children`. Like this: `{ path: 'auth', component: AuthComponent, children : [ { path: 'dashboard', component: DashboardComponent } ] }` — Fawkes, Jan 31 '17 at 13:06
@BCoder then your submodules are eager loaded. I'd like mine to be lazy loaded. — Anton Poznyakovskiy, Jan 31 '17 at 13:08
Also it gives me error if I try to load same component or directives twice. — Fawkes, Jan 31 '17 at 13:13
just for clarification (or maybe a facepalm): from your screenshot, the two chunks using the module seems to be 1 and 2, approx 1mb each. From your diagram chunks 1 and 3 should be using the module. Which one is it? — corolla, Feb 01 '17 at 16:14
@corolla names on the screenshot are slightly different. 2.chunk.js should be 3.chunk.js and vice versa. Sorry for the confusion, but I can't easily manupulate the names of chunks. — Anton Poznyakovskiy, Feb 01 '17 at 23:35

score 7 · Answer 1 · answered Jan 24 '17 at 12:42

7

You need to create a SharedAgGridModule:

@NgModule({
  imports: [
    AgGridModule.withComponents([])
  ],
  exports: [
    ContentModule,
    AgGridModule
  ]
})
export class SharedAgGridModule{}

Then you should import this module just for the submodules which uses AgGrid. No need to also import the ContentModule in those submodules, because it is exported in this module

answered Jan 24 '17 at 12:42

Poul Kruijt

69,713
12
145
149

Same as with Santanu's answer, unfortunately :( I am not importing ContentModule into submodules anyway. – Anton Poznyakovskiy Jan 24 '17 at 12:55

score 0 · Answer 2 · answered Jan 24 '17 at 12:06

0

You can use a SharedModule where you import as well as export the AgGridModule. You have to export the complete module AgGridModule and not just the components you use.

Then you can simply import the SharedModule in your Submodule1 and Submodule3.

answered Jan 24 '17 at 12:06

Santanu Biswas

4,699
2
22
21

Unfortunately, this leads to the same result. All modules that use `SharedModule` generate chunks that include the entire ag-grid. – Anton Poznyakovskiy Jan 24 '17 at 12:38
That means there are services inside the `AgGridModule` and they need to be added to AppModule. – Santanu Biswas Jan 24 '17 at 12:42
But I am not using any of the services from AgGridModule. I only use one of its components. – Anton Poznyakovskiy Jan 24 '17 at 12:46
You may not be using the services directly. The components maybe using them. – Santanu Biswas Jan 24 '17 at 12:48
Looked it up: The module does not expose any services. – Anton Poznyakovskiy Jan 24 '17 at 12:55
Sorry @AntonPoznyakovskiy, in that case, you have to contact the module author. – Santanu Biswas Jan 24 '17 at 12:59

score 0 · Answer 3 · answered May 06 '17 at 00:45

0

We facing the same issue.

2 Solutions

Put into ShareModule import and exports it. Sub module import the ShareModule. Basically, ShareModule is without lazy load.
Merge to the same path/module lazy load together.

answered May 06 '17 at 00:45

ChokYeeFan

293
1
3
8

Share an external module between lazy loaded modules in angular2

3 Answers3