Upgrade Angular to v12 (#184)

Co-authored-by: Daniel James Smith <djsmith@web.de>
2026-01-20 09:23:25 +00:00 · 2021-12-09 21:30:45 +00:00
parent 999b790557
commit 13572b94ee
7 changed files with 3681 additions and 11472 deletions
--- a/2
+++ b/2
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -132,45 +132,52 @@
    }
  },
  "devDependencies": {
-    "@angular/compiler-cli": "^11.2.11",
+    "@angular/compiler-cli": "^12.2.13",
    "@microsoft/microsoft-graph-types": "^1.4.0",
-    "@ngtools/webpack": "^11.2.10",
+    "@ngtools/webpack": "^12.2.13",
    "@types/ldapjs": "^1.0.10",
    "@types/node": "^14.14.43",
    "@types/proper-lockfile": "^4.1.1",
-    "clean-webpack-plugin": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
    "concurrently": "^6.0.2",
-    "copy-webpack-plugin": "^6.4.0",
+    "copy-webpack-plugin": "^10.0.0",
    "cross-env": "^7.0.3",
-    "css-loader": "^5.2.4",
-    "del": "^6.0.0",
+    "css-loader": "^6.5.1",
    "electron-builder": "^22.11.7",
    "electron-notarize": "^1.1.1",
    "electron-rebuild": "^3.2.3",
    "electron-reload": "^1.5.0",
-    "file-loader": "^6.2.0",
    "font-awesome": "4.7.0",
-    "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^4.5.1",
-    "mini-css-extract-plugin": "^1.5.0",
-    "node-loader": "^1.0.3",
+    "html-loader": "^3.0.1",
+    "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
+    "node-loader": "^2.0.0",
    "pkg": "^5.1.0",
    "prebuild-install": "^5.0.0",
    "rimraf": "^3.0.2",
    "sass": "^1.32.11",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^12.4.0",
    "tapable": "^1.1.3",
-    "ts-loader": "^8.1.0",
+    "ts-loader": "^9.2.5",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "tslint": "~6.1.0",
    "tslint-loader": "^3.5.4",
-    "typescript": "4.1.5",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-merge": "^5.7.3",
+    "typescript": "4.3.5",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1",
+    "webpack-merge": "^5.8.0",
    "webpack-node-externals": "^3.0.0"
  },
  "dependencies": {
+    "@angular/animations": "^12.2.13",
+    "@angular/cdk": "^12.2.13",
+    "@angular/common": "^12.2.13",
+    "@angular/compiler": "^12.2.13",
+    "@angular/core": "^12.2.13",
+    "@angular/forms": "^12.2.13",
+    "@angular/platform-browser": "^12.2.13",
+    "@angular/platform-browser-dynamic": "^12.2.13",
+    "@angular/router": "^12.2.13",
    "@bitwarden/jslib-angular": "file:jslib/angular",
    "@bitwarden/jslib-common": "file:jslib/common",
    "@bitwarden/jslib-electron": "file:jslib/electron",
@@ -186,9 +193,10 @@
    "inquirer": "8.0.0",
    "ldapjs": "git+https://git@github.com/kspearrin/node-ldapjs.git",
    "lunr": "^2.3.9",
-    "ngx-toastr": "^13.2.1",
+    "ngx-toastr": "14.1.4",
    "open": "^8.0.6",
-    "proper-lockfile": "^4.1.2"
+    "proper-lockfile": "^4.1.2",
+    "rxjs": "^7.4.0"
  },
  "engines": {
    "node": "~14",
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -18,10 +18,10 @@ import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.servic
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
+import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
 import { StateService } from 'jslib-common/abstractions/state.service';
 import { TokenService } from 'jslib-common/abstractions/token.service';
 import { UserService } from 'jslib-common/abstractions/user.service';
-import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';

 import { ConfigurationService } from '../services/configuration.service';
 import { SyncService } from '../services/sync.service';
--- a/src/app/tabs/dashboard.component.ts
+++ b/src/app/tabs/dashboard.component.ts
@@ -9,8 +9,8 @@ import {
 import { BroadcasterService } from 'jslib-common/abstractions/broadcaster.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
-import { StateService } from 'jslib-common/abstractions/state.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StateService } from 'jslib-common/abstractions/state.service';

 import { SyncService } from '../../services/sync.service';

--- a/webpack.cli.js
+++ b/webpack.cli.js
@@ -18,7 +18,7 @@ const moduleRules = [
    },
    {
        test: /\.ts$/,
-        loaders: ['ts-loader'],
+        use: 'ts-loader',
        exclude: path.resolve(__dirname, 'node_modules'),
    },
    {
@@ -41,7 +41,10 @@ const plugins = [
        banner: '#!/usr/bin/env node',
        raw: true
    }),
-    new webpack.IgnorePlugin(/^encoding$/, /node-fetch/),
+    new webpack.IgnorePlugin({
+        resourceRegExp: /^encoding$/,
+        contextRegExp: /node-fetch/,
+    }),
 ];

 const config = {
--- a/webpack.renderer.js
+++ b/webpack.renderer.js
@@ -3,7 +3,7 @@ const webpack = require('webpack');
 const { merge } = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

 const common = {
@@ -21,13 +21,10 @@ const common = {
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                exclude: /.*(fontawesome-webfont)\.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'images/',
-                    },
-                }],
+                generator: {
+                    filename: 'images/[name].[ext]',
+                },
+                type: 'asset/resource',
            },
        ],
    },
@@ -77,13 +74,10 @@ const renderer = {
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                exclude: /loading.svg/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        name: '[name].[ext]',
-                        outputPath: 'fonts/',
-                    },
-                }],
+                generator: {
+                    filename: 'fonts/[name].[ext]',
+                },
+                type: 'asset/resource',
            },
            {
                test: /\.scss$/,
@@ -106,7 +100,7 @@ const renderer = {
        ],
    },
    plugins: [
-        new AngularCompilerPlugin({
+        new AngularWebpackPlugin({
            tsConfigPath: 'tsconfig.json',
            entryModule: 'src/app/app.module#AppModule',
            sourceMap: true,
@@ -117,15 +111,15 @@ const renderer = {
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
-            chunks: ['app/vendor', 'app/main']
+            chunks: ['app/vendor', 'app/main'],
        }),
        new webpack.SourceMapDevToolPlugin({
-            include: ['app/main.js']
+            include: ['app/main.js'],
        }),
        new webpack.DefinePlugin({ 'global.GENTLY': false }),
        new MiniCssExtractPlugin({
-            filename: '[name].[hash].css',
-            chunkFilename: '[id].[hash].css',
+            filename: '[name].[contenthash].css',
+            chunkFilename: '[id].[contenthash].css',
        }),
    ],
 };