Lazy loading webpack angular2

Question

Я использую полную версию angular2, и я пытаюсь реализовать ленивую загрузку. моя основная маршрутизация, как показано ниже

export const ROUTES: Routes = [ 
    { path: 'login', component: LoginPage }, 
    { path: 'reset-password', component: Myaccount }, 
    { 
     path: '', 
     redirectTo: 'app', 
     pathMatch: 'full' 
    }, 
    ...ROUTES_APP, 
    { path: "sub", loadChildren: "es6-promise?,[name]!./app/sub/sub.module#SubModule" }, 
]; 

Мой Sub маршрутизация, как показано ниже

import { Routes, RouterModule } from "@angular/router"; 
import { SubAppComponent } from "./sub-app.component"; 
import { SubHomeComponent } from "./sub-home.component"; 

export const subRoutes: Routes = [ 
    { 
    path: "", 
    component: SubAppComponent, 
    children: [ 
     { path: "", component: SubHomeComponent } 
    ] 
    }, 
]; 

export const subRouting = RouterModule.forChild(subRoutes); 

подмодуля Моего, как показано ниже

import { NgModule } from "@angular/core"; 
import { subRouting } from "./sub.routing"; 
import { SubAppComponent } from "./sub-app.component"; 
import { SubHomeComponent } from "./sub-home.component"; 

@NgModule({ 
    imports: [ 
    subRouting, 
    ], 
    declarations: [ 
    SubAppComponent, 
    SubHomeComponent, 
    ], 
}) 
export class SubModule { 
} 

во время навигации к югу я получаю ошибку Но я я получаю ниже погрешности

core.umd.js: 3462 ИСКЛЮЧЕНИЕ: Недоступно (в про режиссура): TypeError: System.import не является функцией

Пожалуйста, помогите мне в этом/дайте мне знать, как обращаться с отложенной загрузки с помощью Webpack

Answer 1

я решил выше при использовании требуют

{ path: "sub", loadChildren:() => require("es6-promise!./app/sub/sub.module")("SubModule") } 

Answer 2

Попробуйте угловой маршрутизатор-погрузчик

Выполните следующие действия ..

npm install angular-router-loader --save-dev 

в вашем маршрут для отложенной загрузки

import { Routes } from '@angular/router'; 

export const routes: Routes = [ 
    { path: 'lazy', loadChildren: './lazy.module#LazyModule' } 
]; 

для синхронной загрузки

import { Routes } from '@angular/router'; 

export const routes: Routes = [ 
    { path: 'lazy', loadChildren: './lazy.module#LazyModule?sync=true' } 
]; 

в webpack.config.js

test: /\.ts$/, 
    loaders: [ 
     'awesome-typescript-loader', 
     'angular-router-loader' 
    ] 
    }