如何使用Webpack延迟加载路由？

Question

I migrated our application from SystemJS to Webpack with pretty good results except that I'm unable to get lazy routes to work.

The error I keep getting is Uncaught (in promise): ReferenceError: System is not defined . The error occurs in both vendor and polyfill generated JS files.

I tried adding a custom System typing taken from the Webpack starter kit -

interface SystemJS {
  import: (path?: string) => Promise<any>;
}
declare var System: SystemJS;

I tried using Node's es6-promise package from this -

{ path: 'my', loadChildren: () => require('es6-promise!./my/my.module')('MyModule') }

Other than that, I haven't been able to find any other alternatives. Unfortunately, the official Angular 2 documentation leaves much to be desired when it comes to supporting Webpack.

I'm using the final version of Angular 2 and the router v3.

Answer 1

There is a webpack loader from brandon roberts: https://github.com/brandonroberts/angular2-router-loader

Or you could use the angular-cli which has built in support.