Bump angular to v12 (#1186)

jslib

@@ -1 +1 @@
-Subproject commit a6b95b15e36737ccf2e7664ed3c881bc19366b84
+Subproject commit 6a179ab2dfacbc1dbd5dd4c185bc57cbac168994

package.json

@@ -247,48 +247,56 @@
     ]
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^11.2.10",
+    "@angular/compiler-cli": "^12.2.13",
-    "@ngtools/webpack": "^11.2.10",
+    "@ngtools/webpack": "^12.2.13",
     "@types/node": "^14.14.43",
     "@types/node-ipc": "^9.1.4",
-    "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",
+    "css-loader": "^6.5.1",
-    "del": "^6.0.0",
     "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-loader": "^3.0.1",
-    "html-webpack-plugin": "^4.5.1",
+    "html-webpack-plugin": "^5.5.0",
-    "mini-css-extract-plugin": "^1.5.0",
+    "mini-css-extract-plugin": "^2.4.5",
-    "node-loader": "^1.0.3",
+    "node-loader": "^2.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",
+    "typescript": "4.3.5",
-    "webpack": "^4.46.0",
+    "webpack": "^5.64.4",
-    "webpack-cli": "^4.6.0",
+    "webpack-cli": "^4.9.1",
-    "webpack-merge": "^5.7.3",
+    "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",
-    "ngx-toastr": "^13.2.1",
+    "ngx-toastr": "14.1.4",
     "node-ipc": "^9.1.4",
     "nord": "^0.2.1",
     "regedit": "^3.0.3",
+    "rxjs": "^7.4.0",
     "sweetalert2": "^10.16.6"
   },
   "engines": {

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 common = {
     module: {
@@ -20,13 +20,10 @@ const common = {
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
                 exclude: /.*(fontawesome-webfont)\.svg/,
-                use: [{
+                generator: {
-                    loader: 'file-loader',
+                    filename: 'images/[name].[ext]',
-                    options: {
+                },
-                        name: '[name].[ext]',
+                type: 'asset/resource',
-                        outputPath: 'images/',
-                    },
-                }],
             },
         ],
     },
@@ -78,13 +75,10 @@ const renderer = {
             {
                 test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                 exclude: /loading.svg/,
-                use: [{
+                generator: {
-                    loader: 'file-loader',
+                    filename: 'fonts/[name].[ext]',
-                    options: {
+                },
-                        name: '[name].[ext]',
+                type: 'asset/resource',
-                        outputPath: 'fonts/',
-                    },
-                }],
             },
             {
                 test: /\.scss$/,
@@ -107,7 +101,7 @@ const renderer = {
         ],
     },
     plugins: [
-        new AngularCompilerPlugin({
+        new AngularWebpackPlugin({
             tsConfigPath: 'tsconfig.renderer.json',
             entryModule: 'src/app/app.module#AppModule',
             sourceMap: true,
@@ -124,8 +118,8 @@ const renderer = {
             include: ['app/main.js'],
         }),
         new MiniCssExtractPlugin({
-            filename: '[name].[hash].css',
+            filename: '[name].[contenthash].css',
-            chunkFilename: '[id].[hash].css',
+            chunkFilename: '[id].[contenthash].css',
         }),
     ],
 };