Angular Parent and Child Modules

I have an application structure like this:

1. app
   1. Shared Module
   2. Modules
      1. ExternalSourceModule
         Child Modules
            1. SourceModule
            2. EntityModule
         ExternalSourceSharedModule

      

        
        
        
      

    

• ExternalSourceSharedModule
  
  imports SharedModule
  
  because the shared module has application level dependencies

• ExternalSourceModule
  
  , and the child modules import ExternalSourceSharedModule
  
  because it ExternalSourceSharedModule
  
  has some dependencies, which ExternalSourceModule
  
  andChild Modules Needs
  
  

Code ExternalSourceSharedModule

:

@NgModule({
   ...
   imports: [
     ShareModule,
   ]
   ...
});  

      

        
        
        
      

    

Code ExternalSourceModule

that importsExternalSourceSharedModule

@NgModule({
   ...
   imports: [
    ExternalSourceSharedModule,
    RouterModule.forChild(externalSourceRoutes)
  ],
   ...
});

      

        
        
        
      

    

Now ExternalSourceModule

Lazy Loads the 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 need to import this ExternalSourceSharedModule

into SourceModule

and EntityModule

as well as code:

EntityModule:

@NgModule({
  ...
  imports: [
    ExternalSourceSharedModule
    RouterModule.forChild(entityRoutes)
  ],
  ...
});

export class EntityModule {}

      

        
        
        
      

    

SourceModule:

@NgModule({
  ...
  imports: [
    ExternalSourceSharedModule
    RouterModule.forChild(entityRoutes)
  ],
  ...
});

export class SourceModule {}

      

        
        
        
      

    

I am 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's assume:

• 1.chunk.js ExternalSourceModule
  
  
• 0.chunk.js EntityModule
  
  which is a childExternalSourceModule
  
  
• 3.chunk.js SourceModule
  
  which is a childExternalSourceModule
  
  

You can see the size of these chunks, which is> 1MB when I remove ExternalSourceSharedModule

from EntityModule

and SourceModule

and then 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 chunk sizes shrink to below <1MB, so the question is, is there any technique where I can tell ExternalSourceModule

which is used ExternalSourceSharedModule

for its child modules so that I don't have to import ExternalSourceSharedModule

into the children modules.

Currently removing ExternalSourceSharedModule

from child modules breaks my application.

webpack-bundle-analyzer

Screenshot: https://box.everhelper.me/attachment/1011387/e86e6209-48b7-464d-912d-a5daa4f4cca4/227833-DmqHiBXBvJD2Puep/screen.png

Environment: @angular: 4 @ angular / cli: 1.0

Hope I cleared my question.