CODEWITHSUNDEEP
angularwebpack
onetwothree
onetwothree

Reputation: 682

How can I lazy load routes using Webpack?

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.

Upvotes: 1

Views: 723

Answers (1)

slaesh
slaesh

Reputation: 16917

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.

Upvotes: 2

Related Questions