在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中使用路由延迟加载模块

回答

相关问题