Get AoT to work with Chunking

[joshuawilson]

From @joshuawilson on December 12, 2016 21:35

There is something preventing the AoT build from Chunking the code into vendor, polyfills, and main.

Is it possible to use both AoT and Chunking with Angular 2 and Webpack?

Copied from original issue: fabric8-ui/fabric8-ui#8

[joshuawilson]

From @TheLarkInn on December 12, 2016 21:39

Alright so this is what I did in your aot.min config:

    new webpack.optimize.CommonsChunkPlugin({
      async: true, // Create shared async bundle between your async routes
      children: true, // Keep vendorish stuff out of shared bundle and in shared async route for when needed
      minChunks: 2 // If used in 2 or more async routes
    }),

    new webpack.optimize.CommonsChunkPlugin({
      names: ['polyfills', 'vendor'], // Run this against both of these entries
      minChunks: function(module) { // Extract all modules from node_modules into vendor chunk
        return /node_modules/.test(module.resource)
      }
    }),

    new webpack.optimize.CommonsChunkPlugin({
      names: ['inline'], // Forces the runtime out of all entries into isolated one
      minChunks: Infinity
    }),
    /* Uncomment below to use Chunks.*/
    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   child: true,
    //   children: true,
    //   minChunks: 2
    // }),

    new ngToolsWebpack.AotPlugin({
      "tsConfigPath": "./tsconfig-aot.json",
    }),

Inside of your vendors.ts file, I simply removed any import @angular/core etc. Instead the commonschunk for polyfills and vendor are now determining whether modules resource (aka the url) comes from node_modules, if so, shove it into vendor chunk. You can see comments for the information to implement.

I do not know whether I have the orders correct so you will need to test this in a aot/prod/runtime env to make sure.

Happy webpacking!