I have application structure like this: 1. app 1. Shared Module 2. Modules 1. ExternalSourceModule Child Modules 1. SourceModule 2. EntityModule ExternalSourceSharedModule
1. `ExternalSourceSharedModule` imports `SharedModule` because shared module has application level dependencies 2. `ExternalSourceModule` and it child modules imports `ExternalSourceSharedModule` because `ExternalSourceSharedModule` has some dependencies which `ExternalSourceModule` and it's `Child Modules Needs` Code of `ExternalSourceSharedModule`: @NgModule({ ... imports: [ ShareModule, ] ... }); Code of `ExternalSourceModule` which imports `ExternalSourceSharedModule` @NgModule({ ... imports: [ ExternalSourceSharedModule, RouterModule.forChild(externalSourceRoutes) ], ... }); Now `ExternalSourceModule` Lazy Loads it's child Module: export const externalSourceRoutes: Routes = [ { path: 'source', loadChildren: './modules/source/source.module#SourceModule' }, { path: 'entity', loadChildren: './modules/entity/entity.module#EntityModule' } ] `ExternalSourceSharedModule` has dependencies for `ExternalSourceModule` as well as `SourceModule` and `EntityModule` So i've to import that `ExternalSourceSharedModule` in `SourceModule` and `EntityModule` as well code: `EntityModule:` @NgModule({ ... imports: [ ExternalSourceSharedModule RouterModule.forChild(entityRoutes) ], ... }); export class EntityModule {} `SourceModule:` @NgModule({ ... imports: [ ExternalSourceSharedModule RouterModule.forChild(entityRoutes) ], ... }); export class SourceModule {} I'm using `@angular/cli` for my project, Doing `ng build` returns this: Time: 9020ms chunk {0} 0.chunk.js, 0.chunk.js.map 1.17 MB {1} {2} {3} {4} {5} {6} {9} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 1.19 MB {0} {2} {3} {4} {5} {6} {9} [rendered] chunk {2} 2.chunk.js, 2.chunk.js.map 394 kB {0} {1} {3} {4} {5} {6} {9} [rendered] chunk {3} 3.chunk.js, 3.chunk.js.map 1.44 MB {0} {1} {2} {4} {5} {6} {9} [rendered] chunk {4} 4.chunk.js, 4.chunk.js.map 1.18 MB {0} {1} {2} {3} {5} {6} {9} [rendered] chunk {5} 5.chunk.js, 5.chunk.js.map 5.29 kB {0} {1} {2} {3} {4} {6} {9} chunk {6} 6.chunk.js, 6.chunk.js.map 11.8 kB {0} {1} {2} {3} {4} {5} {9} chunk {7} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {11} [initial] chunk {8} styles.bundle.js, styles.bundle.js.map (styles) 256 kB {11} [initial] chunk {9} main.bundle.js, main.bundle.js.map (main) 122 kB {10} [initial] [rendered] chunk {10} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.58 MB [initial] [rendered] chunk {11} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] Let assume: - 1.chunk.js is `ExternalSourceModule` - 0.chunk.js is `EntityModule` which is a child of `ExternalSourceModule` - 3.chunk.js is `SourceModule` which is a child of `ExternalSourceModule` You can see the size of these chunks which has > 1 MB now when i remove `ExternalSourceSharedModule` from `EntityModule` and `SourceModule` then doing `ng build` returns: Time: 8779ms chunk {0} 0.chunk.js, 0.chunk.js.map 84.3 kB {1} {2} {3} {4} {5} {6} {9} [rendered] chunk {1} 1.chunk.js, 1.chunk.js.map 1.19 MB {0} {2} {3} {4} {5} {6} {9} [rendered] chunk {2} 2.chunk.js, 2.chunk.js.map 394 kB {0} {1} {3} {4} {5} {6} {9} [rendered] chunk {3} 3.chunk.js, 3.chunk.js.map 355 kB {0} {1} {2} {4} {5} {6} {9} [rendered] chunk {4} 4.chunk.js, 4.chunk.js.map 89.3 kB {0} {1} {2} {3} {5} {6} {9} [rendered] chunk {5} 5.chunk.js, 5.chunk.js.map 5.29 kB {0} {1} {2} {3} {4} {6} {9} chunk {6} 6.chunk.js, 6.chunk.js.map 11.8 kB {0} {1} {2} {3} {4} {5} {9} chunk {7} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {11} [initial] chunk {8} styles.bundle.js, styles.bundle.js.map (styles) 256 kB {11} [initial] chunk {9} main.bundle.js, main.bundle.js.map (main) 122 kB {10} [initial] [rendered] chunk {10} vendor.bundle.js, vendor.bundle.js.map (vendor) 4.58 MB [initial] [rendered] chunk {11} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] Now if you see the sizes of chunks reduces to below < 1 MB so the questions becomes is there is any technique where i can tell to `ExternalSourceModule` that use `ExternalSourceSharedModule` for it's child modules as well, so that i don't need to import `ExternalSourceSharedModule` in child modules. Currently removing `ExternalSourceSharedModule` from child modules breaks my application. Hope i have cleared my questions. -- You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group. To unsubscribe from this group and stop receiving emails from it, send an email to angular+unsubscr...@googlegroups.com. To post to this group, send email to angular@googlegroups.com. Visit this group at https://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.