Angular2延迟加载路线问题。
我正在使用Angular2,打字稿,html5和systemjs。
我正在尝试让延迟加载适用于我的一条基本路线。这是我关注的博客,但似乎无法正常运行:http : //blog.angular-university.io/angular2-ngmodule/
这是我得到的控制台错误:
未捕获(承诺):错误:无法匹配任何路由。网址区隔:“ 500”
我的页面是500页。下面,我在当前状态下添加了文件。
500页的模块:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Component500 } from './500.component';
import { ModuleRouting500 } from './500.routes';
@NgModule({
imports: [RouterModule, ModuleRouting500],
declarations: [Component500],
exports: [Component500],
providers: []
})
export default class Module500 { }
500页的路线:
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Component500 } from './index';
const Routes500: Routes[] = [
{
path: '',
loadChildren: Component500
}
];
@NgModule({
imports: [RouterModule.forChild(Routes500)],
exports: [RouterModule],
providers: []
})
export class ModuleRouting500 { }
这是我的核心应用程序路线页面:(我没有在此处添加路线500)
import { Routes } from '@angular/router';
import { HomeRoutes } from './components/home/index';
export const routes: Routes = [
...HomeRoutes,
{path:'500',loadChildren:'app / components / 500 / 500.module#Module500'}];
这是我的核心应用程序模块页面:(我没有在此处添加模块500)
import { NgModule } from '@angular/core';
import { routes } from './app.routes';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FormsModule} from '@angular/forms';
import { APP_BASE_HREF, CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeModule } from './components/home/home.module';
import { AuthService } from './services/authService/authService';
import { Environment } from './models/environment/environment';
@NgModule({
imports: [BrowserModule, FormsModule, CommonModule, HttpModule, RouterModule.forRoot(routes),
HomeModule
],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'},
AuthService,
Environment
],
bootstrap: [AppComponent]
})
export class AppModule { }
这是500页的index.ts文件:
export * from './500.component';
export * from './500.routes';
这是我的文件夹结构的屏幕截图:
这是我当前收到的控制台错误的屏幕截图:
完整的文件夹结构:
您必须通过执行以下操作在“应用”路由中添加您的惰性路由:
应用程式路线
export const routes: Routes = [
...,
{ path: '500', loadChildren: 'app/components/500/500.module#Module500' },
];
您必须将500.routes.ts更改为以下模块:
500.routes.ts:
import { NgModule, ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Component500 } from './index';
const routes: Routes = [
{
path: '',
component: Component500,
}
];
@NgModule({
imports: [RouterModule.forChild(Routes500)],
exports: [RouterModule],
providers: []
})
export const routing: ModuleWithProviders = RouterModule.forChild(routes);
然后,在500.module.ts中,您必须加载500.routes.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { Component500 } from './500.component';
import { routing } from './500.routes';
@NgModule({
imports: [RouterModule, routing],
declarations: [Component500]
})
export class Module500 { }
现在,每个模块都知道路由,无论是否懒惰。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句