Angular 10 - Navigator router not working ok

Question

I have a general Angular routes configuration:

const routes: Routes = [
  {
    path: `students`, loadChildren: () =>
      import('./@pages/students/students.module').then(m => m.StudentModule),
  },
  { path: ``, redirectTo: `mainPage`, pathMatch: `full` }
];

And I have another path file for the "StudentsModule" module:

const routes: Routes = [
  {
    path:  ``, 
    component: StudentsComponent,
  },
  {
    path:  `students/:idstudent`, 
    component: StudentsTableComponent,
  },
];

When I click a button to component template "StudentsComponent", I want to go to

this.router.navigate(['/students/' + this.idStudent]);

But it gives me the following error:

core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'students/3'
Error: Cannot match any routes. URL Segment: 'students/3'

http://localhost:4200/students, loads component: StudentsComponent

http://localhost:4200/students/3, should be loading component: StudentsTableComponent

What could be the problem? thanks

Answer 1

you can use like this

 this.router.navigate(['/students/' + this.idStudent]);

OR

 this.router.navigate([`/students/${this.idStudent}`]);

Routes: StudentsModule

const routes: Routes = [
  {
    path:  ``, 
    component: StudentsComponent,
  },
  {
    path:  `:idstudent`, 
    component: StudentsTableComponent,
  },
];

If not solve with this please check in StudentsModule File StudentTableComponent is added or not in declaration.