在Angular 2中使用路由延遲加載模塊

在我的應用程序中，我有主模塊及其路由器和子模塊及其路由器。在Angular 2中使用路由延遲加載模塊

主要模塊（及其路由器）有一個像幾個路徑：

/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後通過頁面點擊鏈接。但是，如果我重新加載頁面例如/國家/搜索它將我移動到國家頁面，並給出例外：「不能匹配任何路線：'搜索'」

來源

2016-12-03 EgorTitov

你看[的文檔（https://angular.io/docs/ts/latest/guide /ngmodule.html）？他們展示瞭如何延遲加載路由，看起來你需要''pathMatch：'full''在你的子模塊的根目錄下。 – jonrsharpe

您缺少pathMatch：完整並檢查如何使用RouterModule。 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);

來源

2016-12-04 16:33:48

在Angular 2中使用路由延遲加載模塊

回答

相關問題