Bump angular to v12 (#1325)

bitwarden_license/src/app/providers/manage/bulk/bulk-confirm.component.ts

@@ -12,7 +12,7 @@ import { BulkConfirmComponent as OrganizationBulkConfirmComponent } from 'src/ap
 import { BulkUserDetails } from 'src/app/organizations/manage/bulk/bulk-status.component';
 
 @Component({
-    templateUrl: '/src/app/organizations/manage/bulk/bulk-confirm.component.html',
+    templateUrl: '../../../../../../src/app/organizations/manage/bulk/bulk-confirm.component.html',
 })
 export class BulkConfirmComponent extends OrganizationBulkConfirmComponent {
 

bitwarden_license/src/app/providers/manage/bulk/bulk-remove.component.ts

@@ -8,7 +8,7 @@ import { ProviderUserBulkRequest } from 'jslib-common/models/request/provider/pr
 import { BulkRemoveComponent as OrganizationBulkRemoveComponent } from 'src/app/organizations/manage/bulk/bulk-remove.component';
 
 @Component({
-    templateUrl: '/src/app/organizations/manage/bulk/bulk-remove.component.html',
+    templateUrl: '../../../../../../src/app/organizations/manage/bulk/bulk-remove.component.html',
 })
 export class BulkRemoveComponent extends OrganizationBulkRemoveComponent {
 

bitwarden_license/webpack.config.js

@@ -1,9 +1,9 @@
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
 
 const webpackConfig = require('../webpack.config');
 
 webpackConfig.entry['app/main'] = './bitwarden_license/src/app/main.ts';
-webpackConfig.plugins[webpackConfig.plugins.length -1] = new AngularCompilerPlugin({
+webpackConfig.plugins[webpackConfig.plugins.length -1] = new AngularWebpackPlugin({
     tsConfigPath: 'tsconfig.json',
     entryModule: 'bitwarden_license/src/app/app.module#AppModule',
     sourceMap: true,

config/base.json

@@ -7,6 +7,6 @@
         "buttonAction": "https://www.sandbox.paypal.com/cgi-bin/webscr"
     },
     "dev": {
-        "allowedHosts": []
+        "allowedHosts": "auto"
     }
 }

package.json

@@ -33,37 +33,46 @@
     "lint:fix": "tslint 'src/**/*.ts' 'bitwarden_license/src/**/*.ts' --fix"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^11.2.11",
+    "@angular/compiler-cli": "^12.2.13",
-    "@ngtools/webpack": "^11.2.10",
+    "@ngtools/webpack": "^12.2.13",
     "@types/jquery": "^3.5.5",
     "@types/node": "^14.17.2",
     "@types/webcrypto": "^0.0.28",
-    "@types/webpack": "^4.4.27",
+    "@types/webpack": "^5.28.0",
-    "clean-webpack-plugin": "^3.0.0",
+    "buffer": "^6.0.3",
-    "copy-webpack-plugin": "^6.4.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^5.2.3",
+    "css-loader": "^6.5.1",
-    "del": "^6.0.0",
-    "file-loader": "^6.2.0",
     "gh-pages": "^3.1.0",
-    "html-loader": "^1.3.2",
+    "html-loader": "^3.0.1",
     "html-webpack-injector": "1.1.4",
-    "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",
+    "process": "^0.11.10",
     "sass": "^1.32.10",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^12.4.0",
-    "style-loader": "^2.0.0",
+    "style-loader": "^3.3.1",
-    "tapable": "^1.1.3",
+    "terser-webpack-plugin": "^5.2.5",
-    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^9.2.5",
-    "ts-loader": "^8.1.0",
     "tslint": "^6.1.3",
     "tslint-loader": "^3.5.4",
-    "typescript": "4.1.5",
+    "typescript": "4.3.5",
-    "webpack": "^4.46.0",
+    "util": "^0.12.4",
-    "webpack-cli": "^4.6.0",
+    "webpack": "^5.64.4",
-    "webpack-dev-server": "^3.11.2"
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.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",
     "bootstrap": "4.6.0",
@@ -74,9 +83,10 @@
     "font-awesome": "4.7.0",
     "jquery": "3.6.0",
     "ngx-infinite-scroll": "^10.0.1",
-    "ngx-toastr": "^13.2.1",
+    "ngx-toastr": "14.1.4",
     "popper.js": "1.16.1",
     "qrious": "4.0.2",
+    "rxjs": "^7.4.0",
     "sweetalert2": "^10.16.6",
     "webcrypto-shim": "0.1.7",
     "whatwg-fetch": "3.6.2"

src/app/settings/two-factor-verify.component.ts

@@ -66,7 +66,7 @@ export class TwoFactorVerifyComponent {
 
     private apiCall(request: SecretVerificationRequest): Promise<TwoFactorResponse> {
         switch (this.type) {
-            case -1:
+            case -1 as TwoFactorProviderType:
                 return this.apiService.getTwoFactorRecover(request);
             case TwoFactorProviderType.Duo:
             case TwoFactorProviderType.OrganizationDuo:

src/connectors/sso.html

@@ -8,11 +8,11 @@
 
     <title>Bitwarden</title>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="images/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="../images/icons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="images/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="../images/icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="images/icons/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="../images/icons/favicon-16x16.png">
-    <link rel="mask-icon" href="images/icons/safari-pinned-tab.svg" color="#175DDC">
+    <link rel="mask-icon" href="../images/icons/safari-pinned-tab.svg" color="#175DDC">
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="../manifest.json">
 </head>
 
 <body class="layout_frontend">

tsconfig.json

@@ -37,6 +37,6 @@
     "bitwarden_license/src/app/main.ts"
   ],
   "include": [
-    "src/connectors/*.ts",
+    "src/connectors/*.ts"
   ]
 }

webfonts.list

@@ -1 +0,0 @@
-Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext

webpack.config.js

@@ -7,7 +7,7 @@ const HtmlWebpackInjector = require('html-webpack-injector');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
+const { AngularWebpackPlugin } = require('@ngtools/webpack');
 const pjson = require('./package.json');
 const config = require('./config.js');
 
@@ -30,43 +30,29 @@ const moduleRules = [
     {
         test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
         exclude: /loading(|-white).svg/,
-        use: [{
+        generator: {
-            loader: 'file-loader',
+            filename: 'fonts/[name].[ext]',
-            options: {
+        },
-                name: '[name].[ext]',
+        type: 'asset/resource',
-                outputPath: 'fonts/',
-            },
-        }],
     },
     {
         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/',
-            },
-        }],
     },
     {
         test: /\.scss$/,
         use: [
             {
                 loader: MiniCssExtractPlugin.loader,
-                options: {
-                    publicPath: '../',
-                },
             },
             'css-loader',
             'sass-loader',
         ],
     },
-    // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
-    {
-        test: /[\/\\]@angular[\/\\].+\.js$/,
-        parser: { system: true },
-    },
     {
         test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
         loader: '@ngtools/webpack',
@@ -147,8 +133,8 @@ const plugins = [
         ],
     }),
     new MiniCssExtractPlugin({
-        filename: '[name].[hash].css',
+        filename: '[name].[contenthash].css',
-        chunkFilename: '[id].[hash].css',
+        chunkFilename: '[id].[contenthash].css',
     }),
     new webpack.EnvironmentPlugin({
         'ENV': ENV,
@@ -160,7 +146,10 @@ const plugins = [
         'BRAINTREE_KEY': envConfig['braintreeKey'] ?? '',
         'PAYPAL_CONFIG': envConfig['paypal'] ?? {},
     }),
-    new AngularCompilerPlugin({
+    new webpack.ProvidePlugin({
+        process: 'process/browser',
+    }),
+    new AngularWebpackPlugin({
         tsConfigPath: 'tsconfig.json',
         entryModule: 'src/app/app.module#AppModule',
         sourceMap: true,
@@ -170,9 +159,12 @@ const plugins = [
 // ref: https://webpack.js.org/configuration/dev-server/#devserver
 let certSuffix = fs.existsSync('dev-server.local.pem') ? '.local' : '.shared';
 const devServer = NODE_ENV !== 'development' ? {} : {
-    https: {
+    server: {
-        key: fs.readFileSync('dev-server' + certSuffix + '.pem'),
+        type: 'https',
-        cert: fs.readFileSync('dev-server' + certSuffix + '.pem'),
+        options: {
+            key: fs.readFileSync('dev-server' + certSuffix + '.pem'),
+            cert: fs.readFileSync('dev-server' + certSuffix + '.pem'),
+        },
     },
     // host: '192.168.1.9',
     proxy: {
@@ -202,7 +194,13 @@ const devServer = NODE_ENV !== 'development' ? {} : {
         },
     },
     hot: false,
-    allowedHosts: envConfig.dev?.allowedHosts,
+    allowedHosts: envConfig.dev?.allowedHosts ?? 'auto',
+    client: {
+        overlay: {
+            errors: true,
+            warnings: false,
+        },
+    },
 };
 
 const webpackConfig = {
@@ -240,7 +238,6 @@ const webpackConfig = {
                 terserOptions: {
                     safari10: true,
                 },
-                sourceMap: true,
             }),
         ],
     },
@@ -248,9 +245,14 @@ const webpackConfig = {
         extensions: ['.ts', '.js'],
         symlinks: false,
         modules: [path.resolve('node_modules')],
+        fallback: {
+            "buffer": false,
+            "util": require.resolve("util/"),
+            "assert": false,
+        },
     },
     output: {
-        filename: '[name].[hash].js',
+        filename: '[name].[contenthash].js',
         path: path.resolve(__dirname, 'build'),
     },
     module: { rules: moduleRules },