Angular2 child routes

Question

I have root module and a child module in angular2, both has its own routes defined. In child module am configuring RouterModule as

RouterModule.forChild(ROUTES)

In root module(parent) , am configuring RouterModule as

RouterModule.forRoot(ROUTES)

I am using same routes names in both child and root

In child

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent }, //outputs I am child
  { path: 'home',  component: HomeComponent }
];

In root (parent)

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent }, //outputs I am parent
  { path: 'home',  component: HomeComponent }
];

I am importing child module in root module

import .....
import {AppModule as ChildModule} from 'child-module/src/app/app.module';


@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    FormsModule,
    HttpModule,
    ChildModule,
    RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })

  ],
  providers: [
  ]
})
export class AppModule {

}

When I load my component (I mean root module), default route is always going to child module instead of rootmodule ie its printing "I am child" ,where as I expect "i am parent", child route should be loaded only when I load it, how can I route it to default route of root (parent) module instead of child module?

have you considered adding child path which will be loaded lazily in the parent route, something like `{ path: child, loadChildren:'path to child module'}`? You may read more about it [here](https://angular.io/docs/ts/latest/guide/router.html) — Madhu Ranjan, Dec 13 '16 at 17:20
@Madhu Ranjan, issue is child (default)routes is getting loaded by default even without configuring which I want to avoid — sudharsan tk, Dec 13 '16 at 23:59
Have you configured child route in child module? If yes then when you import child module in app module child routes will be added.. — Madhu Ranjan, Dec 14 '16 at 14:47
Got it now, I think I cannot have default routes in parent as well as child,able to solve it by re factoring the code, thank you very much — sudharsan tk, Dec 15 '16 at 02:32
@sudharsantk Can you provide your solution? im encountering the exact same situation — Kesem David, Aug 02 '17 at 05:41
@KesemDavid , there are two ways you can solve, if you are lazy loading , you can directly name the route like you want 2) or else at child module level introduce top level route name for eg export const ROUTES: Routes = [ { path: '/child1', children:[ — sudharsan tk, Aug 03 '17 at 05:52

score 1 · Answer 1 · answered May 04 '17 at 01:22

I think this answers your question:

Angular's router matches routes from the top down. The first route which matches is the one the router navigates to. You load the ChildModule's routes before the RootModule's routes, and that means those routes all have priority over the RootModule's routes. When navigating to '', the router will first check the ChildModule's routes, find a match and take you there. If you swap the places of ChildModule and RootModule in the imports statement, then RootModule's routes would always be navigated to.

You can learn more at https://angular.io/docs/ts/latest/guide/router.html.

Unforutnately, it did not work for me, tried both `Child before Router` and `Router before Child`, did not work.. — Kesem David, Aug 02 '17 at 05:40

Angular2 child routes

1 Answers1