ルーティングのあるレイジーローディングモジュール（Angular 2）

Question

私のアプリには、メインモジュールとそのルータとサブモジュールとそのルータがあります。

/login 
/sign-up 
/ask 
etc 

サブモジュールは、パスがたくさんあります：

/countries/edit 
/countries/:id 
/countries/ 
/coutries/search 
etc 

が、私はサブモジュールの遅延読み込みをしたい

メインモジュール（およびそのルータが）のようないくつかのパスを持っています。

メインルータ：

export const routes: Routes = [ 
    { 
     path: "login", // to sign in or to see information about current logged user 
     loadChildren: "app/login/login.module" 
    }, 
    { 
     path: "sign-up", // to sing up new users 
     loadChildren: "app/signup/sign-up.module" 
    }, 
    { 
     path: "home", // to see home page 
     loadChildren: "app/home/home.module" 
    }, 
    { // directory to see, edit, search countries 
     path: "countries", 
     loadChildren: "app/country/country.module" 
    } 

サブモジュールのルータ：

{ // to see list of countries, press like and delete a country 
    path: "", 
    component: CountryViewAllComponent 
}, 
{ 
    // CR[done] try to avoid inline comments. 
    path: "search", 
    component: CountrySearchComponent 
}, 
{ 
    path: "edit", 
    component: CountryChangeComponent, 
}, 
{ 
    path: ":id", 
    component: CountryDetailComponent 
} 

私はメインページ/及びnavagate後に入力した場合は私のアプリは、完璧な作品

私はこのような今リンクをクリックしてページを表示します。 例：/ countries/searchのページをリロードすると国ページに移動し、例外が表示されます。「どのルートとも一致しません：「検索」」

Answer 1

pathMatchが不足しています。 forChild（ルート）またはforRootは...より良い参考のために、このドキュメントを参照してください。

Lazy loading module (Angular 2 training book)

import { ModuleWithProviders } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { EagerComponent } from './eager.component'; 

const routes: Routes = [ 
    { path: '', redirectTo: 'eager', pathMatch: 'full' }, 
    { path: 'eager', component: EagerComponent }, 
    { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' } 
]; 

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