BREAKING CHANGE: updated to Angular 6, ngx-bootstrap 3, ngx-datatable…

… 13, rxjs 6, and webpack 4

Dropped the tree-list component due to additional issues with mobx autorun with angular-tree-component.
See: CirclonGroup/angular-tree-component#596

Note: Karma won't run without typescript 2.8.1, while Angular 6 requires 2.7.2.
See: https://stackoverflow.com/questions/49468616/cannot-read-property-externalmoduleindicator-of-undefined-while-running-unit-t

no message

config/webpack.common.js

@@ -9,16 +9,9 @@ const path = require('path'),
 /**
  * Webpack Plugins
  */
-const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
-const DefinePlugin = require('webpack/lib/DefinePlugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const IgnorePlugin = require('webpack/lib/IgnorePlugin');
-const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
-const NormalModuleReplacementPlugin = require('webpack/lib/NormalModuleReplacementPlugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
-const ProvidePlugin = require('webpack/lib/ProvidePlugin');
-const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');
 
 // ExtractTextPlugin
 const extractCSS = new ExtractTextPlugin({
@@ -41,57 +34,71 @@ module.exports = {
   module: {
     rules: [
       {
-        enforce: 'pre',
         test: /\.ts$/,
+        enforce: 'pre',
         use: 'tslint-loader',
         exclude: [helpers.root('node_modules')]
       },
       {
         test: /\.ts$/,
         use: [
-          {
-            loader: 'awesome-typescript-loader',
-            options: {
-              declaration: false
-            }
-          },
-          {
-            loader: 'angular2-template-loader'
-          }
+          'awesome-typescript-loader',
+          'angular2-template-loader'
         ],
         exclude: [/\.spec\.ts$/]
-      },{
+      },
+
+      /*
+       * to string and css loader support for *.css files
+       * Returns file content as string
+       *
+       */
+      {
         test: /\.css$/,
-        loader: extractCSS.extract({
+        use: extractCSS.extract({
           fallback: "style-loader",
-          use: "css-loader?sourceMap&context=/"
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true,
+                context: '/'
+              },
+            },
+          ]
         })
       },
 
-      /* File loader for supporting fonts, for example, in CSS files.
+      /**
+       * File loader for supporting fonts, for example, in CSS files.
        */
       {
-        test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
-        loaders: [
-          {
-            loader: "url-loader",
-            query: {
-              limit: 3000,
-              name: 'assets/fonts/[name].[ext]'
-            }
+        test: /\.(woff2|woff|ttf|eot|svg)$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 3000,
+            // includePaths: [
+            //   path.resolve(__dirname, "../node_modules/patternfly/dist/fonts/")
+            // ],
+            name: 'assets/fonts/[name].[ext]'
           }
-        ]
-      }, {
-        test: /\.jpg$|\.png$|\.gif$|\.jpeg$/,
-        loaders: [
-          {
-            loader: "url-loader",
-            query: {
-              limit: 3000,
-              name: 'assets/fonts/[name].[ext]'
-            }
+        },
+        exclude: path.resolve(__dirname, "../src/demo/images/")
+      },
+      {
+        test: /\.(jpg|png|svg|gif|jpeg)$/,
+        use: {
+          loader: 'url-loader',
+          query: {
+            limit: 3000,
+            includePaths: [
+              path.resolve(__dirname, "../src/assets/images/")
+            ],
+            name: 'assets/images/[name].[ext]'
           }
-        ]
+        },
+        exclude: path.resolve(__dirname, "../node_modules/patternfly/dist/fonts/")
       },
 
       // Support for *.json files.
@@ -108,6 +115,18 @@ module.exports = {
     ]
   },
 
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendors",
+          chunks: "all"
+        }
+      }
+    }
+  },
+
   plugins: [
     /**
      * Plugin: ContextReplacementPlugin
@@ -141,7 +160,6 @@ module.exports = {
      *
      * See: https://github.com/webpack/extract-text-webpack-plugin
      */
-    // new ExtractTextPlugin('[name].[contenthash].css'),
     new ExtractTextPlugin('[name].css'),
 
     new webpack.LoaderOptionsPlugin({
@@ -151,19 +169,6 @@ module.exports = {
          *
          * See: https://github.com/webpack/html-loader#advanced-options
          */
-        // TODO: Need to workaround Angular 2's html syntax => #id [bind] (event) *ngFor
-        // htmlLoader: {
-        //   minimize: true,
-        //   removeAttributeQuotes: false,
-        //   caseSensitive: true,
-        //   customAttrSurround: [
-        //     [/#/, /(?:)/],
-        //     [/\*/, /(?:)/],
-        //     [/\[?\(?/, /(?:)/]
-        //   ],
-        //   customAttrAssign: [/\)?\]?=/]
-        // },
-
         tslintLoader: {
           emitErrors: false,
           failOnHint: false
@@ -174,20 +179,10 @@ module.exports = {
     // Only emit files when there are no errors
     new webpack.NoEmitOnErrorsPlugin(),
 
-    // // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
-    // // Dedupe modules in the output
-    // new webpack.optimize.DedupePlugin(),
-
     // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
     // Minify all javascript, switch loaders to minimizing mode
     // new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
 
-    // Copy assets from the public folder
-    // Reference: https://github.com/kevlened/copy-webpack-plugin
-    // new CopyWebpackPlugin([{
-    //   from: helpers.root('src/public')
-    // }]),
-
     // Reference: https://github.com/johnagan/clean-webpack-plugin
     // Removes the bundle folder before the build
     new CleanWebpackPlugin(['bundles'], {