ng2: Lazy Loading webpack about angular

[christopherthielen]

1.0.0-beta.4 landed with AoT, Lazy Loading (with or without @angular/cli and auto code splitting)

[christopherthielen]

@Jordan-Hall are you using webpack 1.x or 2.x?

[christopherthielen]

I thought we had already released the code necessary for webpack lazy loading, but apparently it's coming in the next release 1.0.0-beta.4

See these comments for more details: angular-ui/ui-router#3079 (comment)
angular-ui/ui-router#3037

I plan to write an example starting from the angular-cli

[christopherthielen]

From @Jordan-Hall on November 30, 2016 0:34

I'm using Web pack 2

[christopherthielen]

From @wpitallo on January 15, 2017 23:25

Hi @christopherthielen, any idea when 1.0.0-beta.4 will be released with the support for Lazy Loading with webpack2?

Thanks for the help!

[christopherthielen]

I'm actively working on getting ahead of time compilation plus lazy loading in the angular-cli working. That's the last thing holding up beta.4

[christopherthielen]

From @wpitallo on January 16, 2017 14:46

Ok cool, thanks so much! Been using beta.3 and it's great, just missing the Lazy Loading, thanks so much!

[christopherthielen]

It looks like we can't (yet) do AoT + lazy load with the angular-cli. AoT compilation and ngtools have related code to 1) code split with webpack and 2) rewrite System.import() to import the ngfactory. It's currently hard coded only to process ng router lazy loaded child routes. Don't worry. We'll get there soon enough.

As of beta.4, we will be able to:

• Lazy Load routes in (with or without CLI) using JIT mode.
• Run in AoT mode (with the CLI) without any lazy loaded routes.
• Both AoT compile with Lazy Loading (without the CLI) by manually changing lazy loading to System.import('../aot/foo/foo.module.ngfactory').then(x => x.FooModule).

To streamline support in the CLI, I'm changing the API to:

JIT:

{ name: 'foo.**', url: '/foo',
  loadChildren: () => System.import('./foo/foo.module').then(x => x.FooModule) }

JIT shorthand (and future syntax for AoT + CLI support -- will require ngtools to enable code splitting in webpack):

{ name: 'foo.**', url: '/foo',
  loadChildren: './foo/foo.module#FooModule' }

AoT:

{ name: 'foo.**', url: '/foo',
  loadChildren: () => System.import('../../aot/app/foo/foo.module.ngfactory')
        .then(x => x.FooModuleNgFactory) }

where /aot/ is the genDir for ngc (where ngc generates the AoT files)