Angular命名路由出口未加载对应组件问题咨询

场景说明 #

在Angular项目中配置了命名路由出口popup，路由规则和访问URL格式均符合预期，且懒加载的Scale_Module已通过网络请求成功加载，但对应的Scale_Component并未在命名路由出口中渲染显示。

相关代码片段 #

父组件模板（Proposal_Year_Root_Component） #

<router-outlet name='popup'></router-outlet>

<ng-container *ngIf="is_ready">
  <div fxLayout="row">
    ...blah blah
  </div>
</ng-container>

父路由配置 #

const routes: Routes = [
  {
    path: '',
    component: Proposal_Routing_Component,
    children: [
      {
        path: '',
        component: Proposals_Root_Component,
      },
      {
        path: ':proposal_id',
        component: Proposal_Root_Component,
        children: [
          {
            path: 'years/:year_id',
            component: Proposal_Year_Root_Component,
            children: [
              {
                path: 'scale',
                outlet: 'popup',
                loadChildren: () => import('../scale/scale.module').then(m => m.Scale_Module)
              }
            ]
          },
        ]
      },
    ]
  }
]

Scale_Module #

import { Common_Module } from '@app/modules'
import { NgModule } from '@angular/core';

import { Scale_Component } from './scale.component'
import { Scale_Routing_Module } from './scale.routing.module'

@NgModule({
  declarations: [Scale_Component],
  imports: [
    Common_Module,
    Scale_Routing_Module,
  ],
})
export class Scale_Module { }

原Scale_Routing_Module #

import { Scale_Component } from './scale.component'
import { RouterModule, Routes } from '@angular/router'
import { NgModule } from '@angular/core'

const routes: Routes = [
  {
    path: '',
    component: Scale_Component,
  }
]

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

问题排查与修复 #

1. 子路由模块未导出RouterModule #

这是核心问题：Scale_Routing_Module仅导入了RouterModule.forChild(routes)，但未将RouterModule导出，导致父模块无法识别子模块的路由规则——即使模块加载完成，路由也无法激活对应组件。

修复后的Scale_Routing_Module代码：

import { Scale_Component } from './scale.component'
import { RouterModule, Routes } from '@angular/router'
import { NgModule } from '@angular/core'

const routes: Routes = [
  {
    path: '',
    component: Scale_Component,
  }
]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule] // 新增导出RouterModule，让父模块识别子路由规则
})
export class Scale_Routing_Module { }

2. 验证路由上下文匹配（可选检查） #

• 确认<router-outlet name="popup"></router-outlet>所在的Proposal_Year_Root_Component确实是path: 'years/:year_id'路由对应的组件，层级与路由配置一致（你的代码已符合要求）。
• 确保命名出口未被*ngIf等条件渲染指令包裹（你的代码中出口在*ngIf外部，无需调整）。

3. 代码导航格式验证（若使用代码跳转） #

如果是通过代码触发命名路由导航，需确保导航命令格式正确：

this.router.navigate(
  [{ outlets: { popup: ['scale'] } }],
  { relativeTo: this.route }
);

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