feat: use import() construct via ng-router-loader@2.0.0 (PatrickJS#1387)

* feat: use import() construct via ng-router-loader@2.0.0 fix: upgrade webpack-dll-bundles-plugin * refactor: verbose ts loader definition The definition of the `*.ts` loader is getting more complex. We need AOT compliance so we use `angular2-template-loader` We need lazy loading so we use `ng-router-loader` And of course, we need to compile TS to JS, `awesome-typescript-loader` We can't explain all that in the configuration file but we can use Webpack 2 new loader syntax and use objects instead of literal string to configure the loaders.

Author: shlomiassaf

config/webpack.common.js

@@ -93,25 +93,44 @@ module.exports = function (options) {
  rules: [
 
  /*
- * Typescript loader support for .ts and Angular 2 async routes via .async.ts
- * Replace templateUrl and stylesUrl with require()
+ * Typescript loader support for .ts
+ *
+ * Component Template/Style integration using `angular2-template-loader`
+ * Angular 2 lazy loading (async routes) via `ng-router-loader`
+ *
+ * `ng-router-loader` expects vanilla JavaScript code, not TypeScript code. This is why the
+ * order of the loader matter.
  *
  * See: https://github.com/s-panferov/awesome-typescript-loader
  * See: https://github.com/TheLarkInn/angular2-template-loader
+ * See: https://github.com/shlomiassaf/ng-router-loader
  */
  {
  test: /\.ts$/,
  use: [
- '@angularclass/hmr-loader?pretty=' + !isProd + '&prod=' + isProd,
- 'awesome-typescript-loader?{configFileName: "tsconfig.webpack.json"}',
- 'angular2-template-loader',
  {
+ loader: '@angularclass/hmr-loader',
+ options: {
+ pretty: !isProd,
+ prod: isProd
+ }
+ },
+ { // MAKE SURE TO CHAIN VANILLA JS CODE, I.E. TS COMPILATION OUTPUT.
  loader: 'ng-router-loader',
  options: {
- loader: 'async-system',
+ loader: 'async-import',
  genDir: 'compiled',
  aot: AOT
  }
+ },
+ {
+ loader: 'awesome-typescript-loader',
+ options: {
+ configFileName: 'tsconfig.webpack.json'
+ }
+ },
+ {
+ loader: 'angular2-template-loader'
  }
  ],
  exclude: [/\.(spec|e2e)\.ts$/]

package.json

@@ -123,7 +123,7 @@
  "karma-remap-coverage": "^0.1.4",
  "karma-sourcemap-loader": "^0.3.7",
  "karma-webpack": "2.0.1",
- "ng-router-loader": "^1.0.2",
+ "ng-router-loader": "^2.0.0",
  "ngc-webpack": "1.1.0",
  "node-sass": "^4.2.0",
  "npm-run-all": "^4.0.0",