Angular带命名路由出口的嵌套路由导航报NG04002错误求助

问题原因 #

你遇到的NG04002错误，本质是因为w/list这个URL试图匹配w下的主路由出口（primary outlet），但你的子路由是配置给命名出口workspace的。Angular不会自动将URL片段映射到命名出口，必须明确指定规则。

当子路由path设为空字符串时，访问w能正常加载组件，是因为空路径会匹配父路由的激活状态，自动在命名出口加载对应组件；但path设为list时，w/list的URL结构不符合命名出口的路由匹配逻辑，导致路由无法识别。

解决方案 #

方案1：使用命名出口的标准导航格式 #

要激活命名出口的list路由，需要遵循Angular辅助路由的URL格式：

w/(workspace:list)

如果通过代码触发导航，需显式指定目标出口：

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

// 在组件中注入Router后调用
this.router.navigate(['w', { outlets: { workspace: ['list'] } }]);

方案2：调整路由结构适配w/list的URL #

若希望保留w/list的URL格式，同时将组件加载到命名出口workspace，可重构路由配置：

export const routes: Routes = [
    {
        path: 'w',
        loadComponent: () => import('./components/workspace/workspace.component').then(c => c.WorkspaceComponent),
        children: [
            // 新增主路由子节点匹配URL片段list
            {
                path: 'list',
                children: [
                    // 空路径子路由绑定到命名出口
                    {
                        path: '',
                        loadComponent: () => import('./components/example-list/example-list.component').then(c => c.ExampleListComponent),
                        outlet: 'workspace'
                    }
                ]
            }
        ]
    }
];

此时访问w/list时，主路由w/list被激活，其下的空路径子路由会自动在命名出口workspace中加载ExampleListComponent。

验证 #

确保workspace.component.html中的命名出口定义无误：

<router-outlet name="workspace"></router-outlet>

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