Angular：使用延迟加载时命名路由器出口的导航错误

Question

我有一个命名路由器出口的导航错误，仅在我使用延迟加载模块时发生。

如果我将模块设置为急切加载，问题就会消失。

我已经发布了一个重现问题的测试 Angular 应用程序 (https://github.com/fk-fgs/test-aux-router-outlet-with-lazy-loading)：

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { Feature1Module } from './modules/feature1/features1.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    Feature1Module,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: '/feature1/page1', pathMatch: 'full' },
  {
    path: 'feature2',
    loadChildren: () => import('./modules/feature2/features2.module').then((m) => m.Feature2Module)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.component.html

<p>app component</p>

<p>primary router outlet navigation :</p>
<button routerLink="/feature1/page1">feature1 page1</button>
<button routerLink="/feature2/page1">feature2 page1</button>

<p>aux1 router outlet navigation :</p>
<button [routerLink]="['/', { outlets: { aux1: ['feature1', 'page2'] }}]">feature1 page2</button>
<button [routerLink]="['/', { outlets: { aux1: ['feature2', 'page2'] }}]">feature2 page2</button>

<div class="router-outlet">
    <p>primary router outlet :</p>
    <router-outlet></router-outlet>
</div>
<div class="router-outlet">
    <p>aux1 router outlet :</p>
    <router-outlet name="aux1"></router-outlet>
</div>

feature1-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Feature1Page1Component } from './pages/page1/feature1-page1.component';
import { Feature1Page2Component } from './pages/page2/feature1-page2.component';

const routes: Routes = [
  {
    path: 'feature1/page1', component: Feature1Page1Component
  },
  {
    path: 'feature1/page2', component: Feature1Page2Component,
    outlet: 'aux1'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Feature1RoutingModule {}

feature2-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { Feature2Page1Component } from './pages/page1/feature2-page1.component';
import { Feature2Page2Component } from './pages/page2/feature2-page2.component';

const routes: Routes = [
  {
    path: 'page1', component: Feature2Page1Component
  },
  {
    path: 'page2', component: Feature2Page2Component,
    outlet: 'aux1'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class Feature2RoutingModule {}

Feature1 和 feature2 模块在功能上是相同的：

• 带有到主路由器出口的路由的组件 page1。
• 组件 page2 具有到命名 aux1 路由器出口的路由。

Feature1 模块已预先加载：

• 没有导航问题。

Feature2 模块是延迟加载的：

• page1 导航有效。
• page2 导航不起作用并产生错误：

core.mjs:6494 错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL 段：'feature2/page2'

错误：无法匹配任何路由。 URL 段：“功能 2/第 2 页”

在 ApplyRedirects.noMatchError (router.mjs:2939:16)

在 router.mjs:2921:28

在 catchError.js:10:38

在 OperatorSubscriber._error (OperatorSubscriber.js:23:1)

在 OperatorSubscriber.error (Subscriber.js:40:1)

在 OperatorSubscriber._error (Subscriber.js:64:1)

在 OperatorSubscriber.error (Subscriber.js:40:1)

在 OperatorSubscriber._error (Subscriber.js:64:1)

在 OperatorSubscriber.error (Subscriber.js:40:1)

在 OperatorSubscriber._error (Subscriber.js:64:1)

在 resolvePromise (zone.js:1211:1)

在 resolvePromise (zone.js:1165:1)

在 zone.js:1278:1

在 _ZoneDelegate.invokeTask (zone.js:406:1)

在 Object.onInvokeTask (core.mjs:25595:1)

在 _ZoneDelegate.invokeTask (zone.js:405:1)

在 Zone.runTask (zone.js:178:1)

在 drainMicroTaskQueue (zone.js:585:1)

在 ZoneTask.invokeTask [作为调用] (zone.js:491:1)

在调用任务（zone.js:1661:1）

Answer 1

我会尽力帮助你。我从未使用过 Angular，但我对您的代码进行了一些尝试，我认为您现在的问题出在您的app.component.html

您应该将第 9 行更改为：

<button [routerLink]="['/feature2', { outlets: { aux1: ['page2'] }}]">feature2 page2</button>

之后你会有一个新的错误，无法激活已激活的插座这超出了我现在在 Angular 中的知识范围，但您应该在这里的某个地方找到解决方案。

为了证明我的解决方案有效，您可以在您的app.component.html并将按钮中的插座更改为辅助2并在路由配置中feature2-routing.module.ts.

当您单击按钮时，您会看到结果出现。

祝你好运 ;）