Угловая2 ленивая загрузка маршрута выпуск

Question

Угловая2 ленивая загрузка маршрута.

Я использую Angular2, typscript, html5 и systemjs.

Я пытаюсь получить ленивую загрузку, работая на одном из моих основных маршрутов. Это блог я отслеживаю, но я, кажется, не может получить его работу: http://blog.angular-university.io/angular2-ngmodule/

Это ошибка консоли я получаю:

Uncaught (обещанию): Ошибка: Не удается соответствовать любой маршруты. URL-адрес сегмента: «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, 

{путь: '500', loadChildren: 'приложение/компоненты/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'; 

Это захват экрана моей структуры папок:

Это захват экрана моей ошибки консоли Сейчас я получаю:

Полная структура папок:

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

Теперь каждый модуль знает маршруты, будучи его ленивым или нет.