Chunk 不包含延迟加载的组件答案

【问题标题】：Chunk does not contains lazy-loaded componentsChunk 不包含延迟加载的组件
【发布时间】：2020-05-30 11:02:06
【问题描述】：

我刚刚将 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
main-es2015.js：3.1MB
polyfills-es2015：62KB
运行时-es2015：3KB

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

感谢您的帮助

【问题讨论】：

你的功能模块不应该在你的应用模块中声明？
您的组件似乎以某种方式包含在主模块依赖项中。你的项目源是开放的吗？可以帮助找到问题
我会仔细检查，但要创建我的功能模块，我将组件从 AppModule 复制/粘贴到 ConfigModule ，因此任何依赖项都应该由于路径更改而触发编译错误

标签： angular lazy-loading angular-module angular-ivy

【解决方案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 { }

【讨论】：