1

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

这就是我所做的：

应用模块

@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
  • 运行时-es2015：3KB

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

谢谢你的帮助

4

1 回答 1

0

@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 { }
于 2020-02-17T08:08:39.697 回答