Chunk 不包含延迟加载的组件

Question

我刚刚将我的 Angular 9 应用拆分为 2 个模块以优化加载时间。不幸的是，编译产生的块非常小，似乎只包含我的功能模块和路由器的代码。该模块中包含的所有组件仍在主js文件中。

这就是我所做的：

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 { }

共享模块：

@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 { }

功能（ConfigModule）模块

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

功能模块延迟加载到 App 的路由中：

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

最后功能模块像这样定义自己的路由：

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

我错过了什么？

我原以为该块包含功能模块中包含的所有内容，而不仅仅是一小部分代码。

编译结果为：

5-es2015.js : 4KB
主要-es2015.js：3.1MB
polyfills-es2015：62KB
runtime-es2015 : 3KB

我会理解 main 应该更大，因为所有依赖关系，但它不应该包含功能模块的组件。

感谢您的帮助

Answer 1

@MikeOne 在他的评论中是正确的，我不应该在我的主模块中包含我的功能模块：

@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 不包含延迟加载的组件

Chunk does not contains lazy-loaded components

angular

lazy-loading

angular-module

angular-ivy