列出带有延迟加载模块的 Angular 9 应用程序的所有路由

Question

我想在我的应用程序中有一条路线，我可以在其中列出应用程序中的所有现有路线。我在 Angular 9 中使用 Ivy 并使用动态导入进行延迟加载。

该应用程序有一些延迟加载的模块。该路由将在根模块中声明。但是此时router.config只包含“根”路由，而懒惰的路由有一个 loadChildren()` 方法，可以动态导入模块。

我尝试过这样的事情：角度 8 中的延迟加载模块，但无法使其适用于路线。路由器实例似乎没有更新。

查看路由器的源代码，我已经成功加载了lazy模块并使用configLoader的load方法获取了子路由

(<any> this.router).configLoader.load(this.injector, route).subscribe({
  next: (moduleConf) => {
    children.push(...moduleConf.routes.map((childRoute) => childRoute.path));
  }
})

它运行良好，但我使用了 的configLoader属性，Router它是一个私有属性。所以这对未来来说不是一个好主意:)

我制作了一个堆栈闪电战，您可以在其中查看/测试代码。该组件还有一个loadConfOld()方法，该方法尝试使用moduleFactory.

我怎样才能以适当和持久的方式做我想做的事？预先感谢您的帮助。

Answer 1

简短回答

由于路由器配置数组位于惰性模块文件中，因此如果不加载惰性模块文件，则无法在运行时获取惰性路由路径。

可能的解决方法

手动创建一个配置文件，其中包含惰性模块的路径数组，并将其导入所需的组件中。查看我的stackblitz 示例。

不要导入此文件中的任何惰性组件。这将导致在导入此文件后立即加载惰性组件。

解释

在您的stackblitz解决方案中，一旦调用 parseRouterConf 和 configLoader.load ，所有延迟加载的模块都会被加载。如果 Angular 在运行时未知路由，则 Angular 在不加载惰性模块文件的情况下无法到达惰性加载模块的路由器配置数组。一旦导航路线数学化，Angular 就会加载你的惰性模块。