Angular

Question

我有一个 angular 应用程序正在延迟加载模块。

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

主路由：

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

];

在 module1 - 还有路由 table :

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 })
  }

但是我得到一个错误：

Error: Cannot match any routes. URL Segment: 'home'

问题：

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

Online code here : Stackblitz

Answer 1

好吧，在 @jmw5598 的帮助下，他向我推荐了 problem/bug 和路由器。

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

Here is a working solution for the problem .

要理解的关键是惰性模块不应该有空的根路径

Related specific description :

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

Angular - How can I activate AUX route with lazy loaded module?

javascript

angular-routing