Angular路由出现重复URL报错NG04002，求解决方案

问题根源 #

报错NG04002: Cannot match any routes. URL Segment: 'user/catalog/user/guide'的核心原因是：routerLink使用了相对路径。当你处于/user/catalog页面时，点击routerLink="user/guide"会在当前路径后追加新路径，最终生成错误的/user/catalog/user/guide。

具体解决步骤 #

1. 将routerLink改为绝对路径 #

给导航栏的routerLink值添加根路径前缀/，确保路由从根目录开始匹配，不受当前页面路径影响：

<li class="nav-item">
<a class="nav-link" routerLinkActive="active" routerLink="/user/catalog">Test Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" routerLink="/user/guide">Testing Guide</a>
</li>

2. 确认路由模块的导入结构 #

确保UserRoutingModule被正确包含在特性模块（如UserModule）中，再由AppModule引入，否则forChild定义的路由不会生效：

// UserModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserRoutingModule } from './user-routing.module';
import { TestCatalogComponent } from './test-catalog.component';
import { TestGuideComponent } from './test-guide.component';

@NgModule({
  declarations: [TestCatalogComponent, TestGuideComponent],
  imports: [CommonModule, UserRoutingModule]
})
export class UserModule { }

// AppModule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { UserModule } from './user/user.module';

@NgModule({
  imports: [BrowserModule, AppRoutingModule, UserModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 优化路由层级（可选） #

如果想简化路由配置，可以将父路径user移到AppRoutingModule中，UserRoutingModule只配置子路径：

// AppRoutingModule.ts
const routes: Routes = [
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// UserRoutingModule.ts
const routes: Routes = [
  { path: 'catalog', component: TestCatalogComponent },
  { path: 'guide', component: TestGuideComponent }
];

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

这种情况下导航栏的routerLink依然使用绝对路径/user/catalog和/user/guide即可。

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