[PS-182] Upgrade Angular to V14 (#2948)

apps/browser/src/browser/browserApi.ts

@@ -156,7 +156,7 @@ export class BrowserApi {
 
   static reloadExtension(win: Window) {
     if (win != null) {
-      return win.location.reload(true);
+      return (win.location as any).reload(true);
     } else {
       return chrome.runtime.reload();
     }

apps/browser/src/popup/accounts/register.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { RegisterComponent as BaseRegisterComponent } from "@bitwarden/angular/components/register.component";
@@ -21,7 +21,7 @@ import { StateService } from "@bitwarden/common/abstractions/state.service";
 export class RegisterComponent extends BaseRegisterComponent {
   constructor(
     formValidationErrorService: FormValidationErrorsService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,

apps/browser/src/popup/app.module.ts

@@ -239,7 +239,6 @@ registerLocaleData(localeZhTw, "zh-TW");
     RemovePasswordComponent,
     VaultSelectComponent,
   ],
-  entryComponents: [],
   providers: [CurrencyPipe, DatePipe],
   bootstrap: [AppComponent],
 })

apps/browser/src/popup/polyfills.ts

@@ -1,4 +1,3 @@
 import "core-js/stable";
 import "date-input-polyfill";
-import "web-animations-js";
 import "zone.js/dist/zone";

apps/browser/src/popup/scss/popup.scss

@@ -11,4 +11,4 @@
 @import "plugins.scss";
 @import "environment.scss";
 @import "pages.scss";
-@import "~@angular/cdk/overlay-prebuilt.css";
+@import "@angular/cdk/overlay-prebuilt.css";

apps/browser/src/popup/settings/export.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/components/export.component";
@@ -28,7 +28,7 @@ export class ExportComponent extends BaseExportComponent {
     private router: Router,
     logService: LogService,
     userVerificationService: UserVerificationService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService
   ) {
     super(

apps/browser/src/popup/settings/settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, ElementRef, OnInit, ViewChild } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 import { Router } from "@angular/router";
 import Swal from "sweetalert2";
 
@@ -50,7 +50,7 @@ export class SettingsComponent implements OnInit {
   previousVaultTimeout: number = null;
   showChangeMasterPass = true;
 
-  vaultTimeout: FormControl = new FormControl(null);
+  vaultTimeout: UntypedFormControl = new UntypedFormControl(null);
 
   constructor(
     private platformUtilsService: PlatformUtilsService,

apps/browser/src/services/browserFileDownloadService.ts

@@ -29,8 +29,8 @@ export class BrowserFileDownloadService implements FileDownloadService {
         true
       );
     } else {
-      if (navigator.msSaveOrOpenBlob) {
-        navigator.msSaveBlob(builder.blob, request.fileName);
+      if ((navigator as any).msSaveOrOpenBlob) {
+        (navigator as any).msSaveBlob(builder.blob, request.fileName);
       } else {
         const a = window.document.createElement("a");
         a.href = URL.createObjectURL(builder.blob);

apps/browser/webpack.config.js

@@ -46,13 +46,20 @@ const moduleRules = [
       "sass-loader",
     ],
   },
-  // Hide System.import warnings. ref: https://github.com/angular/angular/issues/21560
   {
-    test: /[\/\\]@angular[\/\\].+\.js$/,
-    parser: { system: true },
+    test: /\.[cm]?js$/,
+    use: [
+      {
+        loader: "babel-loader",
+        options: {
+          configFile: false,
+          plugins: ["@angular/compiler-cli/linker/babel"],
+        },
+      },
+    ],
   },
   {
-    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+    test: /\.[jt]sx?$/,
     loader: "@ngtools/webpack",
   },
 ];
@@ -102,7 +109,7 @@ const plugins = [
     cleanAfterEveryBuildPatterns: ["!popup/fonts/**/*"],
   }),
   new webpack.ProvidePlugin({
-    process: "process/browser",
+    process: "process/browser.js",
   }),
   new webpack.SourceMapDevToolPlugin({
     exclude: [/content\/.*/, /notification\/.*/],