Angular-如何使用延迟加载的模块激活AUX路由？

Question

我有一个角度应用程序，它正在延迟加载模块。

首先，应用程序导航到home将模块加载到的位置（名为module1）：

主要路由：

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "home", loadChildren: "./module1/module1.module#Module1Module" }, 

];

在module1-还有路由表：

const routes: Routes = [
    {
        path: "", component: Home1Component,
        children: [
            { path: 'bird', outlet: 'under', component: Home2Component } 
        ]
    }
];

因此，由于延迟加载，因此当应用启动时-会转到/home加载的位置Home1Component

但其中Home1Component也有一个按钮，它想为出口路径设置一个值。

home1.component.html：

<input value="click to activate aux route"  type="button" (click)="go()"/>
<router-outlet  ></router-outlet>
<router-outlet name='under'></router-outlet>  //<---- I want to activate  only this

这是我尝试激活出口路线的方法：

  public go() {
    this.router.navigate([{ outlets: { under: ['bird'] } }], { relativeTo: this.route })
  }

但是我得到一个错误：

错误：无法匹配任何路线。网址区隔：“ home”

题 ：

为什么会出现此错误，我该如何解决？

在线代码在这里：Stackblitz

Answer 1

好吧，在@ jmw5598的帮助下，他向我介绍了路由器的问题/错误。

延迟加载的模块的默认空位置存在问题。

这是该问题的可行解决方案。

要了解的关键是，惰性模块不应具有空的根路径

相关具体说明：