如何配置angular-cli / webpack以创建每个功能模块的单独捆绑（Angular 4）

Question

如何配置Angular-cli或Webpack以创建单独的每个功能模块（Angular 4），而不需要路由

Answer 1

您不需要配置CLI或webpack。只需对您的应用路由使用延迟加载。你的app-routing.module.ts看起来像

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '', loadChildren: '../modules/feature/feature.module#FeatrueModule' }
]

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes, { useHash: true }) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

在你的app.module.ts中导入AppRoutingModule而不导入FeatureModule，你就可以了。您的prod构建输出应包含例如以下文件

• 的index.html
• inline.randomstring.bundle.js（main，polyfills等）
• 并为每个延迟加载的模块a
  • 0.randomstring.chunk.js
  • 1.randomstring.chunk.js
  • ...