Angular routerLink and Router.Navigate behaving differently

Question

I have the code in App Routing Module as follows.

const routes: Routes = [
    { path: '', redirectTo:'Person/AllPersons', pathMatch:'full'  },
    { path: 'Person/AllPersons', component: AllPersonsComponent },
    { path: 'Person/AddPerson', component: AddPersonComponent },
    { path: 'Teacher/AllTeachers', component: AllTeachersComponent },
    { path: 'Teacher/AddTeacher', component: AddTeacherComponent }

];

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

Now in AllPersonsComponent.html I have the following code.

<a routerLink="Teacher/AddTeacher">Add Teacher</a>

Now when I click on it. It's not redirecting to AddTeacher Component. Instead it is populating an error as follows Cannot match any routes. URL Segment: 'Person/AllPersons/Teacher/AddTeacher'.

But when I do like this it is redirecting to Correct path.

<a (click)="Func()">Add Teacher</a>

And in .ts file as follows.

Func() {
    this.router.navigate(['Teacher/AddTeacher']);
  }

Then it is navigating to Add Teacher component. Can any one help me with this as of why routerLink is failing and how to achieve it through routerLink?

Answer 1

Your routerLink should start with forwardslash (Add Teacher)

According to angular documentation

If the first segment begins with /, the router will look up the route from the root of the app.

so if u added (/) at the beginning your link will render after starting with your - domain/Teacher/AddTeacher

https://angular.io/api/router/RouterLink

Answer 2

Try this?

<a [routerLink]="['/Teacher/AddTeacher']">Add Teacher</a>

Answer 3

i see that you declared your routes in wrong way first of all you should have 2 separed routes for Person and Teacher and other routes related to Person or Teacher should be childroutes, and one more error here, you should declare all routes in lowercase, so solution to your promblem should look like this:

const routes: Routes = [
    { path: '', redirectTo:'person/all-person', pathMatch:'full'  },
    { path: 'person', component: PersonComponent,
        children: [
          { path: '', redirectTo: 'overview', pathMatch: 'full' },
          { path: 'all-persons', component: AllPersonComponent},
          { path: 'add-person', component: AddPersonComponent}
        ]
    },
    { path: 'teacher', component: PersonComponent,
        children: [
          { path: '', redirectTo: 'overview', pathMatch: 'full' },
          { path: 'all-teachers', component: AllTeacherComponent},
          { path: 'add-teacher', component: AddTeacherComponent}
        ]
    },

  }

];

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

Or you can have a simple routes person and person/:page-type and you can have one component for this and in ngOnInit you can have something like this

showAllPersonTemplate = false;
showAddPersonTemplate = false;

ngOnInit(){
 const pageType = this.router.params
  let pageType = this.route.snapshot.paramMap.get('page-type'); 

  // and here you verify what route user navigate
  if(pageType === 'add-person' ) {
   this.showAddPersonTemplate  = true;
  }

  if(pageType === 'all-person' ) {
   this.showAllPersonTemplate = true;
  }

  // And based on routes params you show or hide different html
}

Read more information on angular documentation https://angular.io/guide/router