使用 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" },
];

我的子路由如下

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

导航到 sub 时出现错误 但是我遇到了错误

core.umd.js:3462 例外：未捕获（承诺）：TypeError：System.import 不是函数

请帮助我/让我知道如何使用 webpack 处理延迟加载

Answer 1

我已经通过使用 require 解决了上述问题

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

Answer 2

试试 angular-router-loader

按照步骤..

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'
    ]
  }