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

Question

我有一个导航错误与命名路由器出口，发生只有当我使用一个延迟加载模块。

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

我发布了一个测试Angular应用程序，再现了这个问题(https://github . com/fk-FGS/test-aux-router-outlet-with-lazy-loading):

应用程序模块.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 {}

应用程序模块.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>

功能1-路由模块.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 {}

功能2-路由模块.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 {}

功能1和功能2模块功能相同:

• 具有到主路由器插座的路由的组件页 1。
• 具有指向指定 aux1 路由器插座的路由的组件 page2。

Feature1模块已加载：

• 没有导航问题。

功能2模块是延迟加载的:

< li >第1页导航有效。 < li >第2页导航不起作用并产生错误:

core.mjs：6494 错误 错误：未捕获（promise）：错误：无法匹配任何路由。网址细分：“专题2/页2”

错误：无法匹配任何路由。URL段：“feature2/page2”

在ApplyRedirects上。noMatchError（router.mjs:2939:16）

在router.mjs:2921： 28

在catchError.js:10:38

在操作员订阅者。_error（OperatorSubscriber.js:23： 1）

OperatorSubscriber.error（Subscriber.js:40： 1）

在运营商订户处。_error (Subscriber.js:64:1)

OperatorSubscriber.error（Subscriber.js:40： 1）

在运营商订户处。_error (Subscriber.js:64:1)

OperatorSubscriber.error（Subscriber.js:40： 1）

在运营商订户处。_error (Subscriber.js:64:1)

在resolvePromise (zone.js:1211:1)

在resolvePromise（zone.js:1165:1）

位于zone.js:1278:1

at _ZoneDelegate.invokeTask （zone.js：406：1）

at object . oninvoketask(core . mjs:25595:1)

位于_ZoneDelegate。invokeTask（zone.js:405:1）

Zone.run任务（zone.js:178： 1）

位于drainMicroTaskQueue（zone.js:585:1）

在zone task . invoke task[as invoke](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的知识，但你应该在这里的某个地方找到一个解决方案。

为了证明我的解决方案有效，您可以添加另一个＜code＞

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

祝你好运；）