使用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 EXCEPTION: Uncaught (in promise): TypeError: System. jsImport不是函数

请帮助我这个/让我知道如何处理延迟加载使用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

在你的<<p> strong>路线为延迟加载

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

在<<p> strong> webpack.config.js

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