Chunk does not contains lazy-loaded components

Question

I just finished splitting my Angular 9 app into 2 modules to optimize the loading time. Unfortunately the chunk produced by the compilation is very small and seems to contains only the code of my feature module and router. All the components included in this module are still in the main js file.

This is what i have done :

AppModule

@NgModule({
  declarations: [
    //List of components (21)
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
    ConfigModule // My feature Module
  ],
  providers: [
    AuthGuard,
    DpGuard,
    AITIGuard,
    ApiService,
    StatusSocketService,
    VideoSocketService,
    Title
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule :

@NgModule({
  declarations: [
      // List of shared components (7)
  ],
  imports: [
    CommonModule,
    FormsModule,
    NgbModule,
    TreeModule,
    TranslateModule.forChild()
  ],
  exports: [
    PasswordStrengthBarComponent,
    CameraslistComponent,
    VideoComponent,
    MaskdrawerComponent,
    FilterselectorComponent,
    TranslateModule,
    NgbModule,
    FormsModule,
    TreeModule,
    ZonedrawerComponent
  ]
})
export class SharedModule { }

Feature (ConfigModule) Module

@NgModule({
  declarations: [
    //LIST OF FEATURE COMPONENTS (47)
  ],
  imports: [
    SharedModule,
    CommonModule,
    ConfigRoutingModule,
    HttpClientModule
  ]
})
export class ConfigModule { }

The feature module is lazy loaded in the routes of App with :

{
    path: 'config',
    canActivate: [AuthGuard],
    loadChildren:() => import('./config/config.module').then(m => m.ConfigModule)
}

And finally the feature module define his own routes like this :

const routes: Routes = [{
    path: '',
    canActivate: [AuthGuard],
    children : [
      { path: '', component:MenuconfigComponent },
      { path: 'system',component: ConfigSystemComponent},
      ... ,
    ]
  }];

What am i missing ?

I was expecting that the chunk contains every thing included in the feature module and not only a small part of code.

The results of compilation is :

5-es2015.js : 4KB
main-es2015.js : 3.1MB
polyfills-es2015 : 62KB
runtime-es2015 : 3KB

I'll understand that main should be bigger because of all dependencies but it should not contains the components of the feature module.

Thanks for your help

You feature module shouldn’t be declared in you app module? — MikeOne, Feb 14 '20 at 18:15
it seems like your components are included into main module dependencies somehow. is your project source open? could help to find the issue — Andrei, Feb 14 '20 at 18:40
i'll double check , but to create my feature module i copy/pasted the components from AppModule to ConfigModule , so any depencies should have triggered a compilation error due path change — grunk, Feb 14 '20 at 18:57

score 2 · Accepted Answer · answered Feb 17 '20 at 08:08

@MikeOne was right in his comment , i shouldn't have included my feature module in my main module :

@NgModule({
  declarations: [
    //List of components (21)
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // required animations module
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
    ConfigModule // <== Remove this
  ],
  providers: [
    AuthGuard,
    DpGuard,
    AITIGuard,
    ApiService,
    StatusSocketService,
    VideoSocketService,
    Title
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Chunk does not contains lazy-loaded components

1 Answers1