Angular 5 Child routing empty path overrides root empty path?

Question

i tried the following setup.

The routing for the root:

const routes: Routes = [
    {path: 'home', loadChildren: 'app/home/home.module#HomeModule'},
    {path: 'note', loadChildren: 'app/note/note.module#NoteModule'},
    ...
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: '**', redirectTo: 'home', pathMatch: 'full'}
];

export const Routing: ModuleWithProviders = RouterModule.forRoot(routes);

The routing for one child:

const routes: Routes = [
    {path: '', component: NoteContainerComponent},
    ...
];

export const NoteRouting: ModuleWithProviders = RouterModule.forChild(routes);

So if i navigate to localhost:4200 i would expect to be redirected to localhost:4200/home but instead there is no url redirect happening but The note route is loaded. Shouldn't the empty note route only match if i do something like localhost:4200/note ? All routes in child routing should only apply if the parent of the child is loaded.

Is it not possible to have empty path on child routes?

Lukas Bonzelett Lukas Bonzelett · Accepted Answer · 2017-11-16T20:31:19

So i finally found the issue, i had the modules wich i wanted to load lazy imported in my root module. This caused the issue, because the RouterModule.forChild was applied as it was .forRoot

Angular 5 Child routing empty path overrides root empty path?

1 Answers