再現手法

1. 以下のような2つのクラスを作る
   • 説明に必要な部分しか書かない
   • app.module.ts

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'hoge', loadChildren: './hoge#HogeModule' }
];
@NgModule({
  declaration: [
    AppComponent
  ],
  imports: [
    RouteModule.forRoot(routes),
    HogeModule
  ]
})
export class AppModule { ... }

- hoge.module.ts

@NgModule({
  declarations: [
    HogeComponent
  ],
  imports: [
    RouteModule.forChild(routes),
  ]
})
export class HogeModule { ... }

1. / へアクセスする

発生する事象

• HogeComponent が表示されてしまう

期待される動作

• AppComponent が表示される

なんでこんなこと起きるの?

• 調べたけど原因はよくわからなかった…
  • https://stackoverflow.com/questions/40816415/angular2-submodules-forchild-routes-overwrite-root-routes external_link
• ただ、挙動的には親から import するモジュールで、 RouterModule を使っているとルーティングが上書きされる

期待される動作への修正方法

1. HogeComponent を分離する

• 親からインポートするためのモジュールと、ルーティングを含めたモジュールの2つに分離する
  • 前者を HogeModule のまま、後者を HogeRoutingModule で新規に作成する
  • HogeModule から RouterModule の import を消す
  • HogeRoutingModule には RouterModule と HogeModule のみ import する
  • hoge.module.ts

@NgModule({
  declarations: [
    HogeComponent
  ],
  imports: [
    // RouterModule を抜く
  ]
})
export class HogeModule { ... }

- `hoge-routing.module.ts`

@NgModule({
  imports: [
    RouterModule.forChild(routes),
    HogeModule
  ]
})

2. 親側のルーティングを修正する

• loadChildren するものを RouterModule が含まれている HogeRoutingModule へ修正する
  • app.module.ts

const routes: Routes = [
  { path: '', component: AppComponent },
  { path: 'hoge', loadChildren: './hoge#HogeRoutingModule' } // 修正
];
@NgModule({
  declaration: [
    AppComponent
  ],
  imports: [
    RouteModule.forRoot(routes),
    HogeModule
  ]
})
export class AppModule { ... }