update to angular 6 and webpack 4

gulpfile.js

@@ -18,8 +18,14 @@ function webfonts() {
             format: 'woff',
         }))
         .pipe(gulp.dest(paths.cssDir));
-};
+}
+
+// ref: https://github.com/angular/angular/issues/22524
+function cleanupAotIssue() {
+    return del(['./node_modules/@types/uglify-js/node_modules/source-map/source-map.d.ts']);
+}
 
 gulp.task('clean', clean);
+gulp.task('cleanupAotIssue', cleanupAotIssue);
 gulp.task('webfonts', ['clean'], webfonts);
-gulp.task('prebuild:renderer', ['webfonts']);
+gulp.task('prebuild:renderer', ['webfonts', 'cleanupAotIssue']);

package.json

@@ -190,71 +190,72 @@
     }
   },
   "devDependencies": {
-    "@angular/compiler-cli": "5.2.0",
+    "@angular/compiler-cli": "^6.1.7",
-    "@ngtools/webpack": "1.10.2",
+    "@ngtools/webpack": "^6.2.1",
     "@types/lowdb": "^1.0.1",
     "@types/lunr": "^2.1.6",
-    "@types/node": "8.0.19",
+    "@types/node-forge": "^0.7.5",
-    "@types/node-forge": "0.7.1",
+    "@types/papaparse": "^4.5.3",
-    "@types/papaparse": "4.1.31",
+    "@types/semver": "^5.5.0",
-    "@types/semver": "5.5.0",
+    "@types/webcrypto": "^0.0.28",
-    "@types/webcrypto": "0.0.28",
+    "@types/webpack": "^4.4.11",
-    "clean-webpack-plugin": "^0.1.17",
+    "clean-webpack-plugin": "^0.1.19",
-    "concurrently": "3.5.1",
+    "concurrently": "^4.0.1",
     "copy-webpack-plugin": "^4.2.0",
-    "cross-env": "^5.1.4",
+    "cross-env": "^5.2.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^1.0.0",
     "del": "^3.0.0",
     "electron": "2.0.7",
     "electron-builder": "^20.25.0",
     "electron-rebuild": "1.8.1",
     "electron-reload": "1.2.5",
-    "extract-text-webpack-plugin": "^3.0.1",
+    "extract-text-webpack-plugin": "next",
-    "file-loader": "^1.1.5",
+    "file-loader": "^2.0.0",
     "font-awesome": "4.7.0",
     "gulp": "^3.9.1",
     "gulp-google-webfonts": "^2.0.0",
-    "html-loader": "^0.5.1",
+    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^2.30.1",
+    "html-webpack-plugin": "^3.2.0",
-    "node-abi": "^2.4.1",
+    "node-abi": "^2.4.3",
     "node-loader": "^0.6.0",
-    "node-sass": "^4.9.2",
+    "node-sass": "^4.9.3",
     "rimraf": "^2.6.2",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "^7.1.0",
-    "ts-loader": "^3.5.0",
+    "ts-loader": "^5.1.0",
-    "tslint": "^5.9.1",
+    "tslint": "^5.11.0",
-    "tslint-loader": "^3.5.3",
+    "tslint-loader": "^3.6.0",
-    "typescript": "^2.7.1",
+    "typescript": "^2.7.2",
-    "webpack": "^3.10.0",
+    "webpack": "^4.18.0",
-    "webpack-merge": "^4.1.0",
+    "webpack-cli": "^3.1.0",
-    "webpack-node-externals": "^1.6.0"
+    "webpack-merge": "^4.1.4",
+    "webpack-node-externals": "^1.7.2"
   },
   "dependencies": {
-    "@angular/animations": "5.2.0",
+    "@angular/animations": "6.1.7",
-    "@angular/common": "5.2.0",
+    "@angular/common": "6.1.7",
-    "@angular/compiler": "5.2.0",
+    "@angular/compiler": "6.1.7",
-    "@angular/core": "5.2.0",
+    "@angular/core": "6.1.7",
-    "@angular/forms": "5.2.0",
+    "@angular/forms": "6.1.7",
-    "@angular/http": "5.2.0",
+    "@angular/http": "6.1.7",
-    "@angular/platform-browser": "5.2.0",
+    "@angular/platform-browser": "6.1.7",
-    "@angular/platform-browser-dynamic": "5.2.0",
+    "@angular/platform-browser-dynamic": "6.1.7",
-    "@angular/router": "5.2.0",
+    "@angular/router": "6.1.7",
-    "@angular/upgrade": "5.2.0",
+    "@angular/upgrade": "6.1.7",
     "@aspnet/signalr": "1.0.3",
     "@aspnet/signalr-protocol-msgpack": "1.0.3",
-    "angular2-toaster": "4.0.2",
+    "angular2-toaster": "6.1.0",
-    "angulartics2": "5.0.1",
+    "angulartics2": "6.3.0",
-    "core-js": "2.4.1",
+    "core-js": "2.5.7",
     "desktop-idle": "1.1.2",
     "electron-log": "2.2.14",
     "electron-updater": "3.0.3",
     "keytar": "4.2.1",
     "lowdb": "1.0.0",
     "lunr": "2.3.3",
-    "node-forge": "0.7.1",
+    "node-forge": "0.7.6",
     "nord": "0.2.1",
-    "papaparse": "4.3.5",
+    "papaparse": "4.6.0",
-    "rxjs": "5.5.6",
+    "rxjs": "6.3.2",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.26"
   }
 }

src/app/app.module.ts

@@ -127,7 +127,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
                 clearQueryParams: true,
             },
         }),
-        ToasterModule,
+        ToasterModule.forRoot(),
     ],
     declarations: [
         AddEditComponent,

tsconfig.json

@@ -11,13 +11,30 @@
     "types": [],
     "baseUrl": ".",
     "paths": {
-      "jslib/*": [ "jslib/src/*" ],
+      "jslib/*": [
-      "@angular/*": [ "node_modules/@angular/*" ],
+        "jslib/src/*"
-      "angular2-toaster": [ "node_modules/angular2-toaster" ],
+      ],
-      "angulartics2": [ "node_modules/angulartics2" ],
+      "@angular/*": [
-      "electron": [ "node_modules/electron" ],
+        "node_modules/@angular/*"
-      "electron-log": [ "node_modules/electron-log" ],
+      ],
-      "electron-store": [ "node_modules/electron-store" ]
+      "angular2-toaster": [
+        "node_modules/angular2-toaster"
+      ],
+      "angulartics2": [
+        "node_modules/angulartics2"
+      ],
+      "electron": [
+        "node_modules/electron"
+      ],
+      "electron-log": [
+        "node_modules/electron-log"
+      ],
+      "electron-store": [
+        "node_modules/electron-store"
+      ],
+      "node": [
+        "node_modules/@types/node"
+      ]
     }
   },
   "exclude": [

webpack.main.js

@@ -1,5 +1,4 @@
 const path = require('path');
-const webpack = require('webpack');
 const merge = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
@@ -11,48 +10,49 @@ const common = {
             {
                 test: /\.ts$/,
                 enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
             },
             {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
-                exclude: /node_modules\/(?!(@bitwarden)\/).*/
+                exclude: /node_modules\/(?!(@bitwarden)\/).*/,
             },
-        ]
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
-            jslib: path.join(__dirname, 'jslib/src')
+            jslib: path.join(__dirname, 'jslib/src'),
-        }
+        },
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
+        path: path.resolve(__dirname, 'build'),
-    }
+    },
 };
 
 const main = {
+    mode: 'production',
     target: 'electron-main',
     node: {
         __dirname: false,
-        __filename: false
+        __filename: false,
     },
     entry: {
-        'main': './src/main.ts'
+        'main': './src/main.ts',
     },
     module: {
         rules: [
             {
                 test: /\.node$/,
-                loader: 'node-loader'
+                loader: 'node-loader',
             },
-        ]
+        ],
     },
     plugins: [
         new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*')
+            path.resolve(__dirname, 'build/*'),
         ]),
         new CopyWebpackPlugin([
             './src/package.json',
@@ -60,7 +60,7 @@ const main = {
             { from: './src/locales', to: 'locales' },
         ]),
     ],
-    externals: [nodeExternals()]
+    externals: [nodeExternals()],
 };
 
 module.exports = merge(common, main);

webpack.renderer.js

@@ -5,20 +5,10 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 
-const isVendorModule = (module) => {
-    if (!module.context) {
-        return false;
-    }
-
-    const nodeModule = module.context.indexOf('node_modules') !== -1;
-    const bitwardenModule = module.context.indexOf('@bitwarden') !== -1;
-    return nodeModule && !bitwardenModule;
-};
-
 const extractCss = new ExtractTextPlugin({
     filename: '[name].css',
     disable: false,
-    allChunks: true
+    allChunks: true,
 });
 
 const common = {
@@ -27,11 +17,11 @@ const common = {
             {
                 test: /\.ts$/,
                 enforce: 'pre',
-                loader: 'tslint-loader'
+                loader: 'tslint-loader',
             },
             {
                 test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
-                loader: '@ngtools/webpack'
+                loader: '@ngtools/webpack',
             },
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
@@ -41,39 +31,53 @@ const common = {
                     options: {
                         name: '[name].[ext]',
                         outputPath: 'images/',
-                    }
+                    },
-                }]
+                }],
-            }
+            },
-        ]
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js'],
         alias: {
-            jslib: path.join(__dirname, 'jslib/src')
+            jslib: path.join(__dirname, 'jslib/src'),
         },
         symlinks: false,
-        modules: [path.resolve('node_modules')]
+        modules: [path.resolve('node_modules')],
     },
     output: {
         filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
+        path: path.resolve(__dirname, 'build'),
-    }
+    },
 };
 
 const renderer = {
+    mode: 'production',
     target: 'electron-renderer',
     node: {
-        __dirname: false
+        __dirname: false,
     },
     entry: {
-        'app/main': './src/app/main.ts'
+        'app/main': './src/app/main.ts',
+    },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'app/vendor',
+                    chunks: (chunk) => {
+                        return chunk.name === 'app/main';
+                    },
+                },
+            },
+        },
     },
     module: {
         rules: [
             {
                 test: /\.(html)$/,
-                loader: 'html-loader'
+                loader: 'html-loader',
             },
             {
                 test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
@@ -95,38 +99,38 @@ const renderer = {
                         },
                         {
                             loader: 'sass-loader',
-                        }
-                    ],
-                    publicPath: '../'
-                })
                         },
-        ]
+                    ],
+                    publicPath: '../',
+                }),
+            },
+            // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
+            {
+                test: /[\/\\]@angular[\/\\].+\.js$/,
+                parser: { system: true },
+            },
+        ],
     },
     plugins: [
         new AngularCompilerPlugin({
             tsConfigPath: 'tsconfig.json',
             entryModule: 'src/app/app.module#AppModule',
-            sourceMap: true
+            sourceMap: true,
         }),
         // ref: https://github.com/angular/angular/issues/20357
-        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/,
+        new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)fesm5/,
             path.resolve(__dirname, './src')),
-        new webpack.optimize.CommonsChunkPlugin({
-            name: 'app/vendor',
-            chunks: ['app/main'],
-            minChunks: isVendorModule
-        }),
         new HtmlWebpackPlugin({
             template: './src/index.html',
             filename: 'index.html',
-            chunks: ['app/vendor', 'app/main']
+            chunks: ['app/vendor', 'app/main'],
         }),
         new webpack.SourceMapDevToolPlugin({
             filename: '[name].js.map',
-            include: ['app/main.js']
+            include: ['app/main.js'],
         }),
         extractCss,
-    ]
+    ],
 };
 
 module.exports = merge(common, renderer);