Angular2 延迟加载路由问题 [英] Angular2 lazy loading a route issue
问题描述
Angular2 延迟加载路由问题.
我使用的是 Angular2、typscript、html5 和 systemjs.
我正在尝试为我的基本路线之一进行延迟加载.这是我正在关注的博客,但我似乎无法让它工作:
这是我目前收到的控制台错误的屏幕截图:
完整的文件夹结构:
你必须通过这样做在 App 路由中添加你的惰性路由:
应用路由
导出常量路由:Routes = [...,{ path: '500', loadChildren: 'app/components/500/500.module#Module500' },];
您必须将 500.routes.ts 更改为如下模块:
500.routes.ts:
import { NgModule, ModuleWithProviders } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './index' 导入 { Component500 };const 路由:路由 = [{小路: '',组件:Component500,}];@NgModule({进口:[RouterModule.forChild(Routes500)],出口:[路由器模块],提供者:[]})导出常量路由:ModuleWithProviders = RouterModule.forChild(routes);
然后,在 500.module.ts 中你必须加载 500.routes.ts
import { NgModule } from '@angular/core';从 '@angular/router' 导入 { RouterModule };从'./500.component'导入{Component500};从'./500.routes'导入{路由};@NgModule({进口:[RouterModule,路由],声明:[Component500]})导出类 Module500 { }
现在,每个模块都知道路由,不管它是否懒惰.
Angular2 lazy loading a route issue.
I'm using Angular2, typscript, html5 and systemjs.
I'm trying to get lazy loading working for one of my basic routes. This is the blog I'm following but I can't seem to get it working: http://blog.angular-university.io/angular2-ngmodule/
This is the console error I get:
Uncaught (in promise): Error: Cannot match any routes. URL Segment: '500'
My page is the 500 page. Below I have added my files at there current state.
Module for 500 page:
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 { }
Route for 500 page:
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 { }
This is my core app routes page: (I don't add the route 500 here)
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' } ];
This is my core app module page: (I don't add the module 500 here)
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 { }
This is the 500 page index.ts file:
export * from './500.component';
export * from './500.routes';
This is a screen grab of my folder structure:
This is a screen grab of my console error I currently get:
Full folder structure:
You have to add your lazy route in the App route by doing this:
App routes
export const routes: Routes = [
...,
{ path: '500', loadChildren: 'app/components/500/500.module#Module500' },
];
You have to change your 500.routes.ts to a module like:
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);
Then, in 500.module.ts you have to load the 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 { }
Now, every module knows the routes, being it lazy or not.
这篇关于Angular2 延迟加载路由问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!