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：未捕获（在承诺中）：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'
    ]
  }

用webpack angular2加载延迟

2 个答案: