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 [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
