Angular 4 routerLink加载错误的组件

Question

this is my app-routing.module.ts :

const appRoutes: Routes = [
  {path: '', component: MainComponent, children:[
    {path: '', component: AppComponent, children:[
      {path: 'home', component: HomeComponent},
      {path: 'register', component: RegisterComponent},
      {path: 'login', component: LoginComponent},
    ]},
    {path: 'patient', component: PatientComponent, children: [
        { path: 'patient/profile', component: PatientProfileComponent, outlet: 'patient-outl'},
        { path: 'patient/changepass', component: ChangePasswordComponent, outlet: 'patient-outl'}
        ],
        canActivate: [RoleGuard],
        data: { roles: ['PATIENT'] }
    },
    {path: 'admin', component: AdminComponent, canActivate: [RoleGuard], data: { roles: ['ADMIN'] }},
    {path: 'dentist', component: DentistComponent, canActivate: [RoleGuard], data: { roles: ['DENTIST'] }},
    {path: '**', component: HomeComponent}
  ]}
];

I navigate from click in patient component to changepass like so:

<a routerLink="/patient/changepass" routerLinkActive="active">Change Password</a>

but what actually opens up is HomeComponent and not ChangePasswordComponent. The url is correct - /patient/changepass, but the loaded component is wrong.. Any idea why so?

EDIT:

I also tried to navigate like so:

<a (click)="editProfile()">Edit Profile</a>

and:

   editProfile(){
     this.router.navigate(['/patient/profile']);
   }

but with the same result - navigation to home component..

Answer 1

Your child routes are wrong. They should be relative to their parent route. Even so the named router outlet not works with non-empty paths. It seems that your issue is related with this one .

I prepared a working example here

I hope this will help.