Angular2 submodule's forChild() routes overwrite root routes

Question

I've faced with issue of overwriting root routes, when import child routes using loadChildren() call.

App routes declared as:

const routes: Routes = [
  { path: '', redirectTo: 'own', pathMatch: 'full' },
  { path: 'own', component: OwnComponent },
  { path: 'nested', loadChildren: () => NestedModule},
];
export const routing = RouterModule.forRoot(routes);

Nested submodule's routes:

const routes: Routes = [
  { path: 'page1', component: NestedPage1Component },
  { path: 'page2', component: NestedPage2Component },
  { path: '', redirectTo: 'page1', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Module1RoutingModule {}

I can get /own, /nested/page1, /nested/page2, but when I try to get root / - I'm getting redirect to /page1. Why does that happen, as it's declared in child module with RouterModule.forChild, how does it redirects not to /own ?

I've created simple plunk for repro - https://plnkr.co/edit/8FE7C5JyiqjRZZvCCxXB?p=preview

Does somebody experienced that behavior?

For anyone else looking, [this github issue](https://github.com/angular/angular/issues/10958) discusses this routing behavior. — makman99, Jan 25 '17 at 19:24

score 6 · Accepted Answer · answered Nov 26 '16 at 10:25

Here is your forked and modified plunker: https://plnkr.co/edit/XilkY55WXle2hFF0Pelx?p=preview

Do not import that lazy-load module and change the root routes like this:

//import { Module1Module } from "./module1/module1.module"; // do NOT import it !

export const routes: Routes = [
  { path: '', redirectTo: 'own', pathMatch: 'full' },
  { path: 'own', component: OwnComponent },
  { path: 'module1', loadChildren: 'src/module1/module1.module#Module1Module' },
];

And the nested routes:

const routes: Routes = [
  //{ path: 'page1', component: Module1Page1Component },
  //{ path: 'page2', component: Module1Page2Component },
  //{ path: '', redirectTo: 'page1', pathMatch: 'full' },

  // do the routes like this..
  {
    path: '',
    component: Module1Component,
    children: [
      { path: '', redirectTo: 'page1', pathMatch: 'full' },
      { path: 'page1', component: Module1Page1Component },
      { path: 'page2', component: Module1Page2Component }
    ]
  },
];

Thanks, it works with lazy-loading. I basically tried same solution, but occasionally hadn't removed imports of child modules, so routes were overwritten. But question is in general, if not use lazy-loading - routes child routes shouldn't break root routes? Shouldn't this be a bug anyway? — ykravv, Nov 26 '16 at 20:23
Good point. You CANT import lazy loaded modules in App Module. Otherwise, routes will get mixed up. — marekozw, May 03 '17 at 13:31

score 3 · Answer 2 · answered Aug 16 '17 at 16:06

3

We need some CAPS on that "DO NOT IMPORT THE LAZY LOADED MODULE" :)

That fixed an issue I had with my approach, explained in a related question: https://stackoverflow.com/a/45718262/885259

Thanks!

answered Aug 16 '17 at 16:06

Mateo Tibaquira

2,059
22
23

Angular2 submodule's forChild() routes overwrite root routes

2 Answers2