update libs and move to 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

@@ -107,71 +107,73 @@
     }
   },
   "devDependencies": {
-    "@angular/compiler-cli": "5.2.0",
+    "@angular/compiler-cli": "^6.1.7",
-    "@microsoft/microsoft-graph-types": "^1.2.0",
+    "@microsoft/microsoft-graph-types": "^1.4.0",
-    "@ngtools/webpack": "1.10.2",
+    "@ngtools/webpack": "^6.2.1",
     "@types/ldapjs": "^1.0.3",
-    "@types/lowdb": "^1.0.1",
+    "@types/lowdb": "^1.0.5",
-    "@types/lunr": "2.1.5",
+    "@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/source-map": "0.5.2",
-    "@types/webcrypto": "0.0.28",
+    "@types/webcrypto": "^0.0.28",
-    "clean-webpack-plugin": "^0.1.17",
+    "@types/webpack": "^4.4.11",
-    "concurrently": "3.5.1",
+    "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "^4.2.0",
+    "concurrently": "^4.0.1",
-    "css-loader": "^0.28.7",
+    "copy-webpack-plugin": "^4.5.2",
+    "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-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",
-    "@microsoft/microsoft-graph-client": "1.0.0",
+    "@microsoft/microsoft-graph-client": "1.2.0",
-    "@okta/okta-sdk-nodejs": "1.1.0",
+    "@okta/okta-sdk-nodejs": "1.2.0",
-    "angular2-toaster": "4.0.2",
+    "angular2-toaster": "6.1.0",
-    "angulartics2": "5.0.1",
+    "angulartics2": "6.3.0",
     "bootstrap": "4.1.3",
-    "core-js": "2.4.1",
+    "core-js": "2.5.7",
     "electron-log": "2.2.14",
     "electron-updater": "3.0.3",
-    "googleapis": "29.0.0",
+    "googleapis": "33.0.0",
     "keytar": "4.2.1",
     "ldapjs": "1.0.2",
     "lowdb": "1.0.0",
     "lunr": "2.3.3",
-    "node-forge": "0.7.1",
+    "node-forge": "0.7.6",
-    "rxjs": "5.5.6",
+    "rxjs": "6.3.2",
-    "zone.js": "0.8.19"
+    "zone.js": "0.8.26"
   }
 }

src/app/app.module.ts

@@ -50,7 +50,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
                 clearQueryParams: true,
             },
         }),
-        ToasterModule,
+        ToasterModule.forRoot(),
     ],
     declarations: [
         ApiActionDirective,

src/app/tabs/dashboard.component.html

@@ -14,12 +14,12 @@
             <strong *ngIf="syncRunning" class="text-success">{{'running' | i18n}}</strong>
             <strong *ngIf="!syncRunning" class="text-danger">{{'stopped' | i18n}}</strong>
         </p>
-        <button #startBtn (click)="start()" [appApiAction]="startPromise" class="btn btn-primary" [disabled]="startBtn.loading">
+        <button #startBtn (click)="start()" [appApiAction]="startPromise" class="btn btn-primary mr-1" [disabled]="startBtn.loading">
             <i class="fa fa-play fa-fw" [hidden]="startBtn.loading"></i>
             <i class="fa fa-spinner fa-fw fa-spin" [hidden]="!startBtn.loading"></i>
             {{'startSync' | i18n}}
         </button>
-        <button (click)="stop()" class="btn btn-primary">
+        <button (click)="stop()" class="btn btn-primary mr-1">
             <i class="fa fa-stop fa-fw"></i>
             {{'stopSync' | i18n}}
         </button>

src/app/tabs/more.component.html

@@ -20,7 +20,7 @@
         <div class="card">
             <h3 class="card-header">{{'other' | i18n}}</h3>
             <div class="card-body">
-                <button class="btn btn-primary" type="button" (click)="logOut()">
+                <button class="btn btn-primary mr-1" type="button" (click)="logOut()">
                     {{'logOut' | i18n}}
                 </button>
                 <button class="btn btn-primary" type="button" (click)="clearCache()">

src/main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow } from 'electron';
+import { app } from 'electron';
 import * as path from 'path';
 
 import { MenuMain } from './main/menu.main';

src/services/gsuite-directory.service.ts

@@ -1,13 +1,8 @@
 import { JWT } from 'google-auth-library';
 import {
+    admin_directory_v1,
     google,
-    GoogleApis,
 } from 'googleapis';
-import {
-    Admin,
-    Schema$Group,
-    Schema$User,
-} from 'googleapis/build/src/apis/admin/directory_v1';
 
 import { DirectoryType } from '../enums/directoryType';
 
@@ -25,7 +20,7 @@ import { LogService } from 'jslib/abstractions/log.service';
 
 export class GSuiteDirectoryService extends BaseDirectoryService implements DirectoryService {
     private client: JWT;
-    private service: Admin;
+    private service: admin_directory_v1.Admin;
     private authParams: any;
     private dirConfig: GSuiteConfiguration;
     private syncConfig: SyncConfiguration;
@@ -33,7 +28,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
     constructor(private configurationService: ConfigurationService, private logService: LogService,
         private i18nService: I18nService) {
         super();
-        this.service = google.admin<Admin>('directory_v1');
+        this.service = google.admin('directory_v1');
     }
 
     async getEntries(force: boolean, test: boolean): Promise<[GroupEntry[], UserEntry[]]> {
@@ -117,7 +112,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
         return entries;
     }
 
-    private buildUser(user: Schema$User, deleted: boolean) {
+    private buildUser(user: admin_directory_v1.Schema$User, deleted: boolean) {
         if ((user.emails == null || user.emails === '') && !deleted) {
             return null;
         }
@@ -151,7 +146,7 @@ export class GSuiteDirectoryService extends BaseDirectoryService implements Dire
         return entries;
     }
 
-    private async buildGroup(group: Schema$Group) {
+    private async buildGroup(group: admin_directory_v1.Schema$Group) {
         const entry = new GroupEntry();
         entry.referenceId = group.id;
         entry.externalId = group.id;

tsconfig.json

@@ -25,6 +25,9 @@
       ],
       "electron": [
         "node_modules/electron"
+      ],
+      "node": [
+        "node_modules/@types/node"
       ]
     }
   },

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,17 +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;
-    }
-    return module.context.indexOf('node_modules') !== -1;
-};
-
 const extractCss = new ExtractTextPlugin({
     filename: '[name].css',
     disable: false,
-    allChunks: true
+    allChunks: true,
 });
 
 const common = {
@@ -24,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,
@@ -38,39 +31,53 @@ const common = {
                     options: {
                         name: '[name].[ext]',
                         outputPath: 'images/',
-                    }
+                    },
-                }]
+                }],
-            }
+            },
-        ]
+        ],
     },
     plugins: [],
     resolve: {
         extensions: ['.tsx', '.ts', '.js', '.json'],
         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]+)?$/,
@@ -79,9 +86,9 @@ const renderer = {
                     loader: 'file-loader',
                     options: {
                         name: '[name].[ext]',
-                        outputPath: 'fonts/'
+                        outputPath: 'fonts/',
-                    }
+                    },
-                }]
+                }],
             },
             {
                 test: /\.scss$/,
@@ -92,27 +99,27 @@ 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',
@@ -123,8 +130,8 @@ const renderer = {
             include: ['app/main.js']
         }),
         new webpack.DefinePlugin({ 'global.GENTLY': false }),
-        extractCss
+        extractCss,
-    ]
+    ],
 };
 
 module.exports = merge(common, renderer);