Let's say the AppModule
is the root module of the app.
Its routing file looks like this:
...
const appRoutes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{
path: 'auth',
loadChildren: './modules/auth/auth.module#AuthModule',
}
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
AuthModule
routing file looks like this:
...
const authRoutes: Routes = [
{
path: '',
loadChildren: './login/login.module#LoginModule',
},
{
path: 'registration',
loadChildren: './registration/registration.module#RegistrationModule'
}
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);
Everything works fine when LoginModule
routing file looks like this:
const loginRoutes: Routes = [
{ path: '', component: LoginStep1Component },
{ path: 'a', component: LoginStep2Component }
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes);
But some troubles appear when I try to use some base component to wrap Login components via <router-outlet>
having the router file as following:
const loginRoutes: Routes = [
{
path: '',
component: LoginComponent,
children: [
{ path: '', component: LoginStep1Component, pathMatch: "full" /*tried also without pathMatch*/ },
{ path: 'a', component: LoginStep2Component }
]
}
];
The localhost:4200/auth
works fine displaying the LoginStep1Component
.
But localhost:4200/auth/a
doesn't work. I can't access it and view LoginStep2Component neither via link navigation nor via URL bar of the browser.
I have also tried to replace '' with some path but it didn't help either. I don't consider this as a proper solution.
Santiago Trujillo