Angular 2 router : children not siplayed

Question

I am trying to implement a user authentification bundle in angular 2 to my project : http://jasonwatmore.com/post/2016/09/29/angular-2-user-registration-and-login-example-tutorial.

I put entire folder into a super one named "loginMGR", renamed the "app" to "loginMGR" in modules, components and filenames and changed the app-routing.module (now named loginMGR.module) to :

imports...

const loginRoutes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      { path: 'identification', component: LoginComponent },
      { path: 'enregistrement', component: RegisterComponent },
    ]
  },

  // otherwise redirect to home
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [
    RouterModule.forChild(loginRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class LoginRoutingModule

My app-routing module name the link by the following route :

const routes: Routes = [
...
        { path: 'authentification', component: LoginMGRComponent },
... 

I access the bundle thanks to this button :

<a [routerLink]="['/authentification']" [routerLinkActive]="['router-link-active']" [routerLinkActiveOptions]="{exact:true}" class="navbar-link">

However, the router-outlet and the alert of my loginMGR.component.html stays empty and do not link to the different components they are supposed to access to (in this case, '' would be "home").

Any idea what I am doing wrong ?

Thank you

Answer 1

Since you defined your child routes in the LoginRoutingModule, just import that in your app module, and remove the route in the app module Routes.