在Angular中的同一父路由下加载多个模块答案

【问题标题】：Loading multiple modules under same parent route in Angular在Angular中的同一父路由下加载多个模块
【发布时间】：2017-08-22 18:41:30
【问题描述】：

我正在寻找一种方法，通过它我可以在 Angular 中以相同的 path 加载多个模块。例如，假设我有三个模块AModule、BModule 和CModule，每个模块都有自己的RouterModule.forChild 调用。现在我想将所有这些模块安装在site 路由下。

我实现此目的的一种方法是将路由包装在RouterModule.forChild 调用中的site 路由下，如下所示：

RouterModule.forChild([
  {
     path: 'site',
     children: [{}] // children goes here
  }
])

我不知道这种方法是否正确，但它工作正常。这种方法的唯一问题是我必须在我想在site 下挂载的每个模块中指定canActivate。虽然这不是问题，但我一直在寻找更清洁的解决方案。

我知道有一个属性loadChildren 可以用来延迟加载模块。但我想急切地加载模块。

我正在使用 AngularCLI，它将我在 loadChildren 中指定的模块代码拆分到一个单独的 JavaScript 文件中，这不是我想要的。

我正在使用 AngularCLI v1.2.0 和 Angular v4.2.5。

非常感谢任何帮助。

谢谢

【问题讨论】：

我不确定，但是你可以导出AModule和BModule的组件，在CModule中使用这两个组件然后你可以使用延迟加载来加载CModule
为什么要在AModule、BModule 中定义路由，而不是在没有模块的情况下简单定义routes？模块在路由方面没有任何价值。它们将在编译期间合并。阅读Avoiding common confusions with modules in Angular
嗨@MaximKoretskyi，感谢您的评论。从你最喜欢的作家那里得到答案总是感觉很棒:-)。让我读一下你提到的那篇文章，我很确定我会在读完之后得到答案。如果有任何进一步的混淆/问题，我将在此处或直接对文章发表评论。谢谢。
@ImranLatif，谢谢）是的，请阅读并跟进

【解决方案1】：

我并不完全清楚你的目标以及你最终想要实现的目标，但这里有一些想法。

您可以使用loadChildren 和“延迟加载”按需或急切地加载。如果您选择预先加载的路由，一旦您的主路由加载并显示您的第一个视图，其他标记为预先加载的模块就会立即异步加载。

我在这里有一个例子：https://github.com/DeborahK/Angular-Routing 在APM-Final 文件夹中。

我不清楚你为什么不想要模块拆分。它可以显着提高应用程序的启动性能（显示首页的时间）。

除了canActivate，还有一个canActivateChild，所以你可以把它放在父节点上，而不必为每条路线重复。相关文档在这里：https://angular.io/api/router/CanActivateChild

【讨论】：

感谢您的评论。因此，根据您的回答和我对路由的理解，loadChildren 的默认loadingStrategy 是PreloadAllModules，一旦您提到的主路由被加载，它将获取loadChildren 下定义的路由。我说的对吗？
基本上，我正在尝试了解是否可以在同一路径下安装多个模块，即 site 在一个地方，而无需将代码拆分为单独的 JavaScript 文件。我用于在RouterModule.forChild 中加载site 下的子路由的技术是否正确？
在这种情况下，我不太理解“安装”一词。如果您想使用延迟加载的功能（急切或按需），那么它们必须位于单独的包中。如果您没有单独的捆绑包，则会在用户请求您的应用程序时下载您的整个应用程序。
并且预加载不会获取“路由”，它会下载使用 Angular 模块定义的包。预加载被定义为路由配置的一部分。
感谢您的出色解释。我认为我想要达到的目标在我的感知方式中是不可能的。我将采用另一种策略，我将不加载模块，而是将 import 从各个模块路由配置，并在合并它们（因为它们只是普通的旧数组）后将它们分配给 path: 'site' 下的 children。我认为这个策略会奏效。