Question

对于生产版本，我希望每个模块都作为一个单独的捆绑包，因为如果将来发生任何变化，只需单独替换该特定模块。目前，我通过在角度4中的延迟加载捆绑模块，但在该捆绑包中，组件代码不可用，它在main.bundle.js中。怎么做？下面的示例结构，

-app
  --module1
  --- component1.ts
  --- component1.css
  --module2
  --- component2.ts
  --- component2.css
  --app.component.ts
  --app.component.html

Answer 1

如果您唯一关心的是将来能够更改模块而不触及其他模块，那么它并不取决于您使用的功能，而是取决于您构建应用程序的方式。

现在，如果你想使用延迟加载，你必须记住Angular在开始时没有加载延迟加载的模块（这是延迟加载的原理）。这意味着，正如您所看到的，它们将位于将按需调用和加载的单独文件中。

顺便问一下，为什么你会看到你的main.bundle.js文件？

Answer 2

您可以添加单个模块，例如

模块1 / module1.module.ts

在此模块中声明您使用的组件并导入所有其他相关模块

@NgModule({
  declarations: [
    Module1Component
  ],
  imports: [
    CommonModule // Required for common directives
  ]
})
export class Module1Module {}

现在可以将此模块导入AppModule

@NgModule({
  ...,
  imports: [
    ...,
    Module1Module
  ]

在您的路线中，您可以通过

添加延迟加载

const appRoutes: Routes = [
  { path: 'module1', loadChildren: './module1/module1.module#Module1Module'},
];

您还可以在路由定义中添加preloadingStrategy以初始下载所有延迟加载的模块，以避免在访问该模块路径时下载它。

@NgModule({
  ...
  imports: [
    ...
    RouterModule.forRoot(appRoutes, {preloadingStrategy: PreloadAllModules})
  ]
})

在Angular 4中捆绑整个模块，包括其组件

2 个答案: