Angular多router-outlets路由配置失败，出现NG04002错误求助

问题原因 #

你的路由跳转未基于当前激活的父路由（/admin下的LandingPage），直接使用[{ outlets: { side: ... }}]会让Angular从根路由层面匹配，而根路由并未配置side出口的dashboard路由，因此触发NG04002路由匹配错误。

具体修复步骤 #

1. 修正路由跳转逻辑，添加相对路由上下文 #

在landing-page.component.ts中注入ActivatedRoute，并在跳转时指定相对当前激活路由的上下文：

import { Router, ActivatedRoute } from '@angular/router';

// 构造函数注入依赖
constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

routeTo(item: NavItem) {
  if (!item.outlet) {
    this.router.navigate(item.route.split("/"), { relativeTo: this.activatedRoute });
  } else {
    // 基于当前父路由加载命名出口的路由
    this.router.navigate(
      [{ outlets: { [item.outlet]: item.route.split("/") } }],
      { relativeTo: this.activatedRoute }
    );
  }
}

2. 优化命名路由的嵌套结构（可选但推荐） #

将命名路由放在LandingPage路由的children数组中，符合Angular嵌套路由的规范：

// landing-page-routing.module.ts
const landingRoutes: Routes = [
    {
        path: "",
        component: LandingPageComponent,
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
                outlet: 'side'
            }
        ]
    },
    {
        path: '**',
        loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardModule),
    },
];

3. 移除不必要的模块导入（优化） #

app.module.ts中已通过懒加载引入LoginModule、DashboardModule等，重复直接导入可能导致模块重复加载，建议移除：

@NgModule({
  declarations: [AppComponent],
  imports: [
    AppRoutingModule,
    // 移除 DashboardModule, LoginModule, LogoutModule 这些懒加载模块
    ...   
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

验证效果 #

修改完成后，在/admin页面点击导航按钮，路由会正确匹配/admin下的side出口路由，URL将变为/admin(side:dashboard)，DashboardComponent会正常渲染到landing-page.component.html的命名路由出口中。

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