fix(package): replace extract-text-webpack-plugin with mini-css-extract-plugin

Note: This restores the demo watch feature; however, AOT is temporarily disabled because mini-css-extract-plugin has an issue with AngularCompilerPlugin
See: webpack-contrib/mini-css-extract-plugin#186

Author: dlabrecq

config/webpack.common.js

@@ -9,14 +9,14 @@ const path = require('path'),
 /**
  * Webpack Plugins
  */
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const OptimizeJsPlugin = require('optimize-js-plugin');
 
-// ExtractTextPlugin
-const extractCSS = new ExtractTextPlugin({
-  filename: '[name].[id].css',
-  allChunks: true
+// MiniCssExtractPlugin
+const extractCSS = new MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: "[id].css"
 });
 
 module.exports = {
@@ -56,18 +56,14 @@ module.exports = {
        */
       {
         test: /\.css$/,
-        use: extractCSS.extract({
-          fallback: "style-loader",
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true,
-                context: '/'
-              },
-            },
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader, {
+            loader: "css-loader",
+            options: {
+              minimize: true,
+              sourceMap: true
+            }
+          }]
       },
 
       /**
@@ -113,20 +109,22 @@ module.exports = {
       }
     ]
   },
-
+/*
   optimization: {
     splitChunks: {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
+          name: "styles",
           chunks: "all"
         }
       }
     }
   },
-
+*/
   plugins: [
+    extractCSS,
+
     /**
      * Plugin: ContextReplacementPlugin
      * Description: Provides context to Angular's use of System.import
@@ -188,7 +186,6 @@ module.exports = {
       root: helpers.root(),
       verbose: false,
       dry: false
-    }),
-    extractCSS
+    })
   ]
 };

config/webpack.demo.js

@@ -7,23 +7,25 @@ const path = require('path');
  */
 const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
 const TypedocWebpackPlugin = require('typedoc-webpack-plugin');
 
-// ExtractTextPlugin
-const extractCSS = new ExtractTextPlugin({
-  filename: '[name].[id].css',
-  allChunks: true
+// MiniCssExtractPlugin
+const extractCSS = new MiniCssExtractPlugin({
+  filename: '[name].css',
+  chunkFilename: "[id].css"
 });
 
-const aotMode = true;
+// NOTE: AOT is temporarily disabled because mini-css-extract-plugin has an issue with AngularCompilerPlugin
+// See: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/186
+const aotMode = false;
 
 module.exports = {
   devServer: {
-    stats: 'minimal',
-    inline: true
+    inline: true,
+    stats: 'minimal'
   },
 
   devtool: 'cheap-module-eval-source-map',
@@ -52,7 +54,6 @@ module.exports = {
         use: aotMode ? [
           '@ngtools/webpack'
         ] : [
-          // 'awesome-typescript-loader',
           'ts-loader',
           'angular2-template-loader'
         ],
@@ -88,19 +89,14 @@ module.exports = {
        */
       {
         test: /\.css$/,
-        use: extractCSS.extract({
-          fallback: "style-loader",
-          use: [
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true,
-                context: '/'
-              },
-            },
-          ]
-        }),
-        exclude: [/node_modules\/@swimlane\/ngx-datatable/]
+        use: [
+          MiniCssExtractPlugin.loader, {
+            loader: "css-loader",
+            options: {
+              minimize: true,
+              sourceMap: true
+            }
+          }]
       },
       {
         test: /\.less$/,
@@ -175,7 +171,7 @@ module.exports = {
       cacheGroups: {
         commons: {
           test: /[\\/]node_modules[\\/]/,
-          name: "vendors",
+          name: "styles",
           chunks: "all"
         }
       }

gulpfile.js

@@ -129,6 +129,12 @@ gulp.task('build',
 
 // Build the components
 gulp.task('transpile', ['inline-template'], function () {
+  // Stick with v0.2.1 due to "function calls are not supported in decorators" issue
+  // See: https://github.com/angular/angular/issues/23609
+  // See: https://github.com/dherges/ng-packagr/issues/727
+
+  // Change for v0.3.0 https://github.com/filipesilva/angular-quickstart-lib/issues/61
+  // return ngc(['--project', 'tsconfig-prod.json']);
   return ngc('tsconfig-prod.json');
 });
 

package.json

@@ -21,7 +21,7 @@
     "reinstall": "npm run clean && npm install",
     "remove-dist": "rimraf build dist dist-watch dist-demo",
     "rimraf": "rimraf",
-    "start:demo": "npm run webpack-dev-server -- --config config/webpack.demo.js --progress --host 0.0.0.0 --port 8001 --profile --watch --content-base dist-demo",
+    "start:demo": "npm run webpack-dev-server -- --config config/webpack.demo.js --host 0.0.0.0 --port 8001 --progress --profile --hot --content-base dist-demo",
     "test": "karma start",
     "test:trace-deprecation": "node --trace-deprecation ./node_modules/.bin/karma start",
     "test:debug": "karma --browsers Chrome --no-single-run start",
@@ -81,58 +81,57 @@
   },
   "optionalDependencies": {},
   "devDependencies": {
-    "@angular-devkit/core": "0.6.3",
-    "@angular/animations": "6.0.2",
-    "@angular/common": "6.0.2",
-    "@angular/compiler": "6.0.2",
-    "@angular/compiler-cli": "6.0.2",
-    "@angular/core": "6.0.2",
-    "@angular/forms": "6.0.2",
-    "@angular/http": "6.0.2",
-    "@angular/platform-browser": "6.0.2",
-    "@angular/platform-browser-dynamic": "6.0.2",
-    "@angular/platform-server": "6.0.2",
-    "@angular/router": "6.0.2",
-    "@ngtools/webpack": "6.0.3",
+    "@angular-devkit/core": "0.6.6",
+    "@angular/animations": "6.0.6",
+    "@angular/common": "6.0.6",
+    "@angular/compiler": "6.0.6",
+    "@angular/compiler-cli": "6.0.6",
+    "@angular/core": "6.0.6",
+    "@angular/forms": "6.0.6",
+    "@angular/http": "6.0.6",
+    "@angular/platform-browser": "6.0.6",
+    "@angular/platform-browser-dynamic": "6.0.6",
+    "@angular/platform-server": "6.0.6",
+    "@angular/router": "6.0.6",
+    "@ngtools/webpack": "6.0.8",
     "@types/c3": "0.6.0",
-    "@types/jasmine": "2.8.7",
-    "@types/lodash": "4.14.109",
+    "@types/jasmine": "2.8.8",
+    "@types/lodash": "4.14.110",
     "angular2-template-loader": "0.6.2",
     "bootstrap": "3.3.7",
     "bootstrap-sass": "3.3.7",
     "child_process": "1.0.2",
     "clean-webpack-plugin": "0.1.19",
-    "codelyzer": "4.3.0",
-    "commitizen": "2.9.6",
-    "copy-webpack-plugin": "4.5.1",
-    "core-js": "2.5.6",
+    "codelyzer": "4.4.2",
+    "commitizen": "2.10.1",
+    "copy-webpack-plugin": "4.5.2",
+    "core-js": "2.5.7",
     "css-loader": "0.28.11",
     "css-to-string-loader": "0.1.3",
     "cz-conventional-changelog": "2.1.0",
     "del": "3.0.0",
-    "extract-text-webpack-plugin": "next",
     "file-loader": "1.1.11",
     "font-awesome-sass": "4.7.0",
     "gulp": "3.9.1",
     "gulp-changed": "3.2.0",
     "gulp-cssmin": "0.2.0",
     "gulp-less": "3.5.0",
     "gulp-ngc": "0.2.1",
-    "gulp-rename": "1.2.3",
+    "gulp-rename": "1.3.0",
     "gulp-replace": "1.0.0",
     "gulp-sass": "3.2.1",
     "gulp-sourcemaps": "2.6.4",
     "gulp-string-replace": "1.0.0",
     "gulp-stylelint": "7.0.0",
     "highlight.js": "9.12.0",
     "html-loader": "0.5.5",
-    "html-minifier": "3.5.16",
+    "html-minifier": "3.5.17",
     "html-webpack-plugin": "3.2.0",
     "husky": "0.14.3",
     "jasmine-core": "3.1.0",
     "json-loader": "0.5.7",
     "json-stringify": "1.0.0",
-    "karma": "2.0.2",
+    "karma": "2.0.4",
     "karma-chrome-launcher": "2.2.0",
     "karma-cli": "1.0.1",
     "karma-coverage": "1.1.2",
@@ -146,45 +145,47 @@
     "less": "2.7.3",
     "less-loader": "4.1.0",
     "markdown-it": "8.4.1",
+    "mini-css-extract-plugin": "0.4.0",
     "mocha": "5.2.0",
     "npm-run-all": "4.1.3",
     "nsp": "3.2.1",
     "optimize-js-plugin": "0.0.4",
     "patternfly-eng-publish": "0.0.4",
-    "patternfly-eng-release": "^3.26.67",
+    "patternfly-eng-release": "^3.26.69",
     "phantomjs-prebuilt": "2.1.16",
     "protractor": "5.3.2",
     "raw-loader": "0.5.1",
     "reflect-metadata": "0.1.12",
     "rimraf": "2.6.2",
-    "rxjs": "6.1.0",
-    "rxjs-compat": "6.1.0",
-    "sass": "1.6.2",
-    "sass-loader": "7.0.3",
-    "semantic-release": "15.5.0",
+    "rollup": "0.61.2",
+    "rollup-plugin-commonjs": "9.1.3",
+    "rollup-plugin-node-resolve": "3.3.0",
+    "rollup-plugin-uglify": "4.0.0",
+    "rxjs": "6.2.1",
+    "rxjs-compat": "6.2.1",
+    "semantic-release": "15.6.0",
     "source-map-loader": "0.2.3",
     "style-loader": "0.21.0",
-    "stylelint": "9.2.1",
+    "stylelint": "9.3.0",
     "stylelint-config-recommended-scss": "3.2.0",
     "stylelint-config-standard": "18.2.0",
     "stylelint-order": "0.8.1",
     "stylelint-scss": "3.0.0",
     "stylus": "0.54.5",
     "to-string-loader": "1.1.5",
     "ts-helpers": "1.1.2",
-    "ts-node": "6.0.3",
+    "ts-node": "6.2.0",
     "tslint": "5.10.0",
-    "ts-loader": "4.3.1",
+    "ts-loader": "4.4.1",
     "typedoc": "0.11.1",
     "typedoc-webpack-plugin": "1.1.4",
     "typescript": "2.7.2",
     "url-loader": "1.0.1",
-    "webpack": "4.8.3",
-    "webpack-bundle-analyzer": "2.13.0",
+    "webpack": "4.12.1",
+    "webpack-bundle-analyzer": "2.13.1",
     "webpack-cli": "2.1.3",
     "webpack-dashboard": "1.1.1",
     "webpack-dev-server": "3.1.4",
-    "webpack-md5-hash": "0.0.6",
     "webpack-merge": "4.1.2",
     "zone.js": "0.8.26"
   },