Angular2延迟加载路线问题

Question

Angular2延迟加载路线问题。

我使用的是Angular2，typscript，html5和systemjs。

我试图让延迟加载为我的一条基本路线工作。 这是我关注的博客，但似乎无法让它发挥作用：http://blog.angular-university.io/angular2-ngmodule/

这是我得到的控制台错误：

未捕获（承诺）：错误：无法匹配任何路线。网址细分：＆＃39; 500＆＃39;

我的页面是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,

{路径：＆＃39; 500＆＃39;，loadChildren：＆＃39; app / components / 500 / 500.module＃Module500＆＃39; }     ];

这是我的核心应用模块页面:(我不在这里添加模块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';

这是我的文件夹结构的屏幕抓取：

这是我目前获得的控制台错误的屏幕抓取：

完整文件夹结构：

Answer 1

您必须通过以下方式在App路径中添加您的延迟路线：

应用路线

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 { }

现在，每个模块都知道路线，不管它是否懒惰。