Digamos que AppModule es el módulo raíz de la aplicación. Su archivo de enrutamiento se ve así:

 ... const appRoutes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, { path: 'auth', loadChildren: './modules/auth/auth.module#AuthModule', } ] export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

El archivo de enrutamiento de AuthModule tiene este aspecto:

 ... const authRoutes: Routes = [ { path: '', loadChildren: './login/login.module#LoginModule', }, { path: 'registration', loadChildren: './registration/registration.module#RegistrationModule' } ]; export const authRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);

Todo funciona bien cuando el archivo de enrutamiento de LoginModule se ve así:

 const loginRoutes: Routes = [ { path: '', component: LoginStep1Component }, { path: 'a', component: LoginStep2Component } ]; export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes);

Pero aparecen algunos problemas cuando trato de usar algún componente base para envolver los componentes de inicio de sesión a través <router-outlet> con el archivo del enrutador de la siguiente manera:

 const loginRoutes: Routes = [ { path: '', component: LoginComponent, children: [ { path: '', component: LoginStep1Component, pathMatch: "full" /*tried also without pathMatch*/ }, { path: 'a', component: LoginStep2Component } ] } ];

El localhost:4200/auth funciona bien mostrando el LoginStep1Component .

Pero localhost:4200/auth/a no funciona. No puedo acceder a él y ver LoginStep2Component ni a través de la navegación de enlaces ni a través de la barra de URL del navegador.

También intenté reemplazar '' con alguna ruta, pero tampoco ayudó. No considero esto como una solución adecuada.