Angular路由异常：空路由路径被忽略，Dashboard组件意外加载

问题原因 #

Angular路由器会合并所有导入模块的路由规则，当模块中导入带有RouterModule.forChild()的模块时，该子模块的路由规则会被优先匹配。你的场景中：

• external-module定义了空路由重定向到not-found
• 随后导入的DashboardModule也包含一个空路由规则（匹配path: ''并加载DashboardComponent）
• 访问/ext时，路由器会优先匹配DashboardModule的空路由，导致你的重定向规则被忽略

另外，你导入DashboardModule的核心需求是复用DashboardControlComponent，而非使用它的路由配置，直接导入带路由的功能模块本身就容易引发路由污染。

解决方案 #

方案1：拆分Dashboard模块（推荐） #

将Dashboard模块拆分为负责组件复用的UI模块和负责路由的功能模块，从根源避免路由冲突：

1. 创建纯UI模块DashboardUiModule：

@NgModule({
  declarations: [DashboardControlComponent],
  exports: [DashboardControlComponent]
})
export class DashboardUiModule {}

2. 改造原DashboardModule，仅保留路由逻辑：

@NgModule({
  imports: [
    DashboardUiModule, // 如果路由组件需要用到DashboardControlComponent则导入
    RouterModule.forChild([{ path: '', pathMatch: 'full', component: DashboardComponent }])
  ]
})
export class DashboardModule {}

3. 在external-module中仅导入UI模块：

@NgModule({
  imports: [
    CommonModule,
    SharedUiModule,
    RouterModule.forChild([
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'not-found'
      },
      {
        path: 'not-found',
        component: ExternalNotFoundViewComponent
      },
    ]),
    DashboardUiModule // 仅导入组件复用模块，不引入路由
  ]
})
export class ExternalModule {}

方案2：修改DashboardModule的路由路径 #

如果暂时无法拆分模块，可直接修改DashboardModule的路由路径，避免空路由冲突：

@NgModule({
  imports: [
    RouterModule.forChild([{ path: 'dashboard', pathMatch: 'full', component: DashboardComponent }])
  ],
  declarations: [DashboardControlComponent],
  exports: [DashboardControlComponent]
})
export class DashboardModule {}

修改后，DashboardComponent的路由变为/ext/dashboard，访问/ext时会正常触发external-module的重定向规则，加载not-found组件。

内容的提问来源于stack exchange，提问作者zed101