feat: use import() construct via ng-router-loader@2.0.0 (#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.

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",