Question

我有一个已经在生产中的应用程序，我想在添加新功能时使其变得灵活。功能不过是附加模块。

在Angular中，我们必须在构建用于生产输出的angular应用程序之前在主应用程序模块中明确指定所有相关的子模块和组件，这意味着在生产后我无法将任何其他模块作为新功能部署。

例如

Main Module- Host application which will load the sub modules using routes
NewPageModule1 - SubModule
NewPageModule1 - SubModule

是否可以让应用模块动态加载子模块并呈现它，而无需重新编译整个应用？

我已经读过有关SystemJsNgModuleLoader的内容，但是我不确定这是一个很好的遵循方法。

我需要一些想法或建议，以什么可能的方式为应用程序带来这种灵活性。

Answer 1

您可能对Angular 6的新Angular Elements功能感兴趣。

https://angular.io/guide/elements

Angular元素是打包为自定义元素的Angular组件，自定义元素是一种以与框架无关的方式定义新HTML元素的网络标准。

Answer 2

Angular提供了一种称为延迟加载的机制。基本上的想法是，将您的应用程序划分为几个（功能）模块，并且仅当客户端确实需要或宁愿请求应用程序的这一部分时，才对特定模块进行延迟加载。最大的优点是您可以显着减小初始捆绑包的大小，因此也可以缩短加载时间。

这是一个如何实现延迟加载的示例片段：

    const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

另请参阅官方文档：https://angular.io/guide/lazy-loading-ngmodules 以及中级教程：https://medium.com/angularmedellin/lazy-loading-angular-modules-58fc844b5c7d

我还建议您使用webpack-bundle-analyzer：https://www.npmjs.com/package/webpack-bundle-analyzer 以便能够分析您的构建输出。

生产后如何动态加载角度模块

2 个答案: