how to replace routing path in Angular

Question

**base path is - **

http://localhost:2000/matchcenter/cricket

when I click to load another page by clicking to menue my route becomes

http://localhost:2000/matchcenter/cricket/football

and I get error

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'matchcenter/cricket/football' Error: Cannot match any routes. URL Segment: 'matchcenter/cricket/football'

html

  <mat-tab *ngFor="let item of navLinks" >


                <div routerLink="{{item.path}}">{{item.label}}</div>

            </mat-tab>

ts file

import { Component, OnInit } from '@angular/core';
import { CricketComponent } from '../cricket/cricket.component';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  navLinks:any;

  constructor() {
    this.navLinks=[
      {path:'cricket',label: 'Cricket'},
      {path:'football',label: 'Football'},
      {path:'nba',label: 'NBA'},
    ]
  }

  ngOnInit() {
  }

}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ErrorComponent } from './error/error.component';
import { MatchcenterComponent } from './matchcenter/matchcenter.component';
import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';
import { CricketComponent } from './cricket/cricket.component'
const routes: Routes = [
  {path: '' , component: FleshScreenComponent, pathMatch:'full' },
 { path: 'login' , component:LoginComponent },
 { path: 'register' , component: RegisterComponent },
 { path: 'error' , component: ErrorComponent},
 { path: 'matchcenter' , component: MatchcenterComponent},
 { path: 'matchcenter/cricket' , component: CricketComponent},
];

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

Answer 1

First things first make sure your routes start from /

this.navLinks=[
    { path:'/cricket',label: 'Cricket'},
    { path:'/football',label: 'Football'},
    { path:'/nba',label: 'NBA'},
];

Based on my assumption I guess you want to pass route param to your matchcenter route. Where cricket football nba are dynamic params given to matchcenter route.

To do so make following changes in your route

const routes: Routes = [
    { path: '' , component: FleshScreenComponent, pathMatch:'full' },
    { path: 'login' , component:LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'error' , component: ErrorComponent},
    { path: 'matchcenter/:type' , component: MatchcenterComponent}
];

You can further get the passed params in MatchcenterComponent using angular ActivatedRoute.

Or else if you dont want route params. You need to define all routes in the routing module. For current scenario you can use

const routes: Routes = [
    { path: '' , component: FleshScreenComponent, pathMatch:'full' },
    { path: 'login' , component:LoginComponent },
    { path: 'register' , component: RegisterComponent },
    { path: 'error' , component: ErrorComponent},
    { path: 'matchcenter' , component: MatchcenterComponent},
    { path: 'matchcenter/cricket' , component: CricketComponent},
    { path: 'matchcenter/football' , component: FootballComponent},
    { path: 'matchcenter/nba' , component: NbaComponent},
];