angular dupicate url when routing

April 24, 2023

duplicate UR: ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: ‘user/catalog/user/guide’

created user routing module:

const routes: Routes = [
  {
    path: 'user/catalog',
    component:TestCatalogComponent
  },
  {
    path:'user/guide',
    component:TestGuideComponent
  }
]

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

app routing

const routes: Routes = [];

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

nav html:

<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>

app component html

<app-header></app-header>
<router-outlet></router-outlet>

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>MOAT</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="assets/image/favicon.png" />
    <!-- bootstrap -->
    <!-- script -->
    </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>

my index html has base href="/", any other advice?

>Solution :

Router links should start with a /, otherwise they get appended to the current link:

<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>