[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\/.*/],

apps/desktop/src/app/accounts/accessibility-cookie.component.ts

@@ -1,5 +1,5 @@
 import { Component, NgZone } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -19,8 +19,8 @@ export class AccessibilityCookieComponent {
   listenForCookie = false;
   hCaptchaWindow: Window;
 
-  accessibilityForm = new FormGroup({
-    link: new FormControl("", Validators.required),
+  accessibilityForm = new UntypedFormGroup({
+    link: new UntypedFormControl("", Validators.required),
   });
 
   constructor(

apps/desktop/src/app/accounts/register.component.ts

@@ -1,5 +1,5 @@
 import { Component, NgZone, OnDestroy, OnInit } 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";
@@ -24,7 +24,7 @@ const BroadcasterSubscriptionId = "RegisterComponent";
 export class RegisterComponent extends BaseRegisterComponent implements OnInit, OnDestroy {
   constructor(
     formValidationErrorService: FormValidationErrorsService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,

apps/desktop/src/app/accounts/settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 import { debounceTime } from "rxjs/operators";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
@@ -60,7 +60,7 @@ export class SettingsComponent implements OnInit {
   startToTrayText: string;
   startToTrayDescText: string;
 
-  vaultTimeout: FormControl = new FormControl(null);
+  vaultTimeout: UntypedFormControl = new UntypedFormControl(null);
 
   showSecurity = true;
   showAccountPreferences = true;

apps/desktop/src/app/app.component.ts

@@ -195,7 +195,7 @@ export class AppComponent implements OnInit {
             await this.reloadProcess();
             break;
           case "reloadProcess":
-            window.location.reload(true);
+            (window.location as any).reload(true);
             break;
           case "syncStarted":
             break;

apps/desktop/src/app/layout/search/search.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 
 import { StateService } from "@bitwarden/common/abstractions/state.service";
 
@@ -11,7 +11,7 @@ import { SearchBarService, SearchBarState } from "./search-bar.service";
 })
 export class SearchComponent implements OnInit, OnDestroy {
   state: SearchBarState;
-  searchText: FormControl = new FormControl(null);
+  searchText: UntypedFormControl = new UntypedFormControl(null);
 
   constructor(private searchBarService: SearchBarService, private stateService: StateService) {
     this.searchBarService.state.subscribe((state) => {

apps/desktop/src/app/vault/export.component.ts

@@ -1,7 +1,7 @@
 import * as os from "os";
 
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { ExportComponent as BaseExportComponent } from "@bitwarden/angular/components/export.component";
 import { BroadcasterService } from "@bitwarden/common/abstractions/broadcaster.service";
@@ -30,7 +30,7 @@ export class ExportComponent extends BaseExportComponent implements OnInit {
     eventService: EventService,
     policyService: PolicyService,
     userVerificationService: UserVerificationService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     private broadcasterService: BroadcasterService,
     logService: LogService,
     fileDownloadService: FileDownloadService

apps/desktop/src/scss/styles.scss

@@ -1,6 +1,6 @@
 @import "../../../../libs/angular/src/scss/webfonts.css";
 @import "../../../../libs/angular/src/scss/bwicons/styles/style.scss";
-@import "~@angular/cdk/overlay-prebuilt.css";
+@import "@angular/cdk/overlay-prebuilt.css";
 @import "variables.scss";
 @import "base.scss";
 @import "grid.scss";

apps/desktop/webpack.renderer.js

@@ -12,7 +12,19 @@ const common = {
   module: {
     rules: [
       {
-        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+        test: /\.[cm]?js$/,
+        use: [
+          {
+            loader: "babel-loader",
+            options: {
+              configFile: false,
+              plugins: ["@angular/compiler-cli/linker/babel"],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.[jt]sx?$/,
         loader: "@ngtools/webpack",
       },
       {

apps/web/src/app/accounts/register.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs/operators";
 
@@ -36,7 +36,7 @@ export class RegisterComponent extends BaseRegisterComponent {
 
   constructor(
     formValidationErrorService: FormValidationErrorsService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,

apps/web/src/app/modules/organizations/create/organization-information.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { FormGroup } from "@angular/forms";
+import { UntypedFormGroup } from "@angular/forms";
 
 @Component({
   selector: "app-org-info",
@@ -10,6 +10,6 @@ export class OrganizationInformationComponent {
   @Input() createOrganization = true;
   @Input() isProvider = false;
   @Input() acceptingSponsorship = false;
-  @Input() formGroup: FormGroup;
+  @Input() formGroup: UntypedFormGroup;
   @Output() changedBusinessOwned = new EventEmitter<void>();
 }

apps/web/src/app/modules/register-form/register-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input } 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";
@@ -28,7 +28,7 @@ export class RegisterFormComponent extends BaseRegisterComponent {
 
   constructor(
     formValidationErrorService: FormValidationErrorsService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     authService: AuthService,
     router: Router,
     i18nService: I18nService,

apps/web/src/app/modules/trial-initiation/billing.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { FormBuilder, FormGroup } from "@angular/forms";
+import { UntypedFormBuilder, FormGroup } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -34,7 +34,7 @@ export class BillingComponent extends OrganizationPlansComponent {
     organizationService: OrganizationService,
     logService: LogService,
     messagingService: MessagingService,
-    formBuilder: FormBuilder
+    formBuilder: UntypedFormBuilder
   ) {
     super(
       apiService,

apps/web/src/app/modules/trial-initiation/trial-initiation.component.ts

@@ -1,7 +1,7 @@
 import { StepperSelectionEvent } from "@angular/cdk/stepper";
 import { TitleCasePipe } from "@angular/common";
 import { Component, OnInit, ViewChild } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { first } from "rxjs";
 
@@ -45,7 +45,7 @@ export class TrialInitiationComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     protected router: Router,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private titleCasePipe: TitleCasePipe,
     private stateService: StateService,
     private apiService: ApiService,

apps/web/src/app/organizations/policies/base-policy.component.ts

@@ -1,5 +1,5 @@
 import { Directive, Input, OnInit } from "@angular/core";
-import { FormControl, FormGroup } from "@angular/forms";
+import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 import { Organization } from "@bitwarden/common/models/domain/organization";
@@ -22,8 +22,8 @@ export abstract class BasePolicyComponent implements OnInit {
   @Input() policyResponse: PolicyResponse;
   @Input() policy: BasePolicy;
 
-  enabled = new FormControl(false);
-  data: FormGroup = null;
+  enabled = new UntypedFormControl(false);
+  data: UntypedFormGroup = null;
 
   ngOnInit(): void {
     this.enabled.setValue(this.policyResponse.enabled);

apps/web/src/app/organizations/policies/master-password.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
@@ -32,7 +32,7 @@ export class MasterPasswordPolicyComponent extends BasePolicyComponent {
   showKeyConnectorInfo = false;
 
   constructor(
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     i18nService: I18nService,
     private organizationService: OrganizationService
   ) {

apps/web/src/app/organizations/policies/password-generator.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
@@ -34,7 +34,7 @@ export class PasswordGeneratorPolicyComponent extends BasePolicyComponent {
 
   defaultTypes: { name: string; value: string }[];
 
-  constructor(private formBuilder: FormBuilder, i18nService: I18nService) {
+  constructor(private formBuilder: UntypedFormBuilder, i18nService: I18nService) {
     super();
 
     this.defaultTypes = [

apps/web/src/app/organizations/policies/reset-password.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { OrganizationService } from "@bitwarden/common/abstractions/organization.service";
 import { PolicyType } from "@bitwarden/common/enums/policyType";
@@ -30,7 +30,10 @@ export class ResetPasswordPolicyComponent extends BasePolicyComponent {
   defaultTypes: { name: string; value: string }[];
   showKeyConnectorInfo = false;
 
-  constructor(private formBuilder: FormBuilder, private organizationService: OrganizationService) {
+  constructor(
+    private formBuilder: UntypedFormBuilder,
+    private organizationService: OrganizationService
+  ) {
     super();
   }
 

apps/web/src/app/organizations/policies/send-options.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 
 import { PolicyType } from "@bitwarden/common/enums/policyType";
 
@@ -21,7 +21,7 @@ export class SendOptionsPolicyComponent extends BasePolicyComponent {
     disableHideEmail: false,
   });
 
-  constructor(private formBuilder: FormBuilder) {
+  constructor(private formBuilder: UntypedFormBuilder) {
     super();
   }
 }

apps/web/src/app/organizations/tools/import-export/org-export.component.ts

@@ -1,5 +1,5 @@
 import { Component } from "@angular/core";
-import { FormBuilder } from "@angular/forms";
+import { UntypedFormBuilder } from "@angular/forms";
 import { ActivatedRoute } from "@angular/router";
 
 import { CryptoService } from "@bitwarden/common/abstractions/crypto.service";
@@ -30,7 +30,7 @@ export class OrganizationExportComponent extends ExportComponent {
     policyService: PolicyService,
     logService: LogService,
     userVerificationService: UserVerificationService,
-    formBuilder: FormBuilder,
+    formBuilder: UntypedFormBuilder,
     fileDownloadService: FileDownloadService
   ) {
     super(

apps/web/src/app/settings/organization-plans.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
-import { FormBuilder, Validators } from "@angular/forms";
+import { UntypedFormBuilder, Validators } from "@angular/forms";
 import { Router } from "@angular/router";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -79,7 +79,7 @@ export class OrganizationPlansComponent implements OnInit {
     private organizationService: OrganizationService,
     private logService: LogService,
     private messagingService: MessagingService,
-    private formBuilder: FormBuilder
+    private formBuilder: UntypedFormBuilder
   ) {
     this.selfHosted = platformUtilsService.isSelfHost();
   }

apps/web/src/app/settings/preferences.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormControl } from "@angular/forms";
+import { UntypedFormControl } from "@angular/forms";
 
 import { AbstractThemingService } from "@bitwarden/angular/services/theming/theming.service.abstraction";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
@@ -25,7 +25,7 @@ export class PreferencesComponent implements OnInit {
   localeOptions: any[];
   themeOptions: any[];
 
-  vaultTimeout: FormControl = new FormControl(null);
+  vaultTimeout: UntypedFormControl = new UntypedFormControl(null);
 
   private startingLocale: string;
   private startingTheme: ThemeType;

apps/web/src/app/settings/sponsored-families.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
 
 import { notAllowedValueAsync } from "@bitwarden/angular/validators/notAllowedValueAsync.validator";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -24,7 +24,7 @@ export class SponsoredFamiliesComponent implements OnInit {
   // Conditional display properties
   formPromise: Promise<any>;
 
-  sponsorshipForm: FormGroup;
+  sponsorshipForm: UntypedFormGroup;
 
   constructor(
     private apiService: ApiService,
@@ -32,7 +32,7 @@ export class SponsoredFamiliesComponent implements OnInit {
     private platformUtilsService: PlatformUtilsService,
     private syncService: SyncService,
     private organizationService: OrganizationService,
-    private formBuilder: FormBuilder,
+    private formBuilder: UntypedFormBuilder,
     private stateService: StateService
   ) {
     this.sponsorshipForm = this.formBuilder.group({

apps/web/src/app/tools/import-export/export.component.ts

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

apps/web/webpack.config.js

@@ -64,18 +64,25 @@ const moduleRules = [
     ],
   },
   {
-    test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
+    test: /\.[cm]?js$/,
+    use: [
+      {
+        loader: "babel-loader",
+        options: {
+          configFile: false,
+          plugins: ["@angular/compiler-cli/linker/babel"],
+        },
+      },
+    ],
+  },
+  {
+    test: /\.[jt]sx?$/,
     loader: "@ngtools/webpack",
   },
 ];
 
 const plugins = [
   new CleanWebpackPlugin(),
-  // ref: https://github.com/angular/angular/issues/20357
-  new webpack.ContextReplacementPlugin(
-    /\@angular(\\|\/)core(\\|\/)fesm5/,
-    path.resolve(__dirname, "./src")
-  ),
   new HtmlWebpackPlugin({
     template: "./src/index.html",
     filename: "index.html",
@@ -142,6 +149,9 @@ const plugins = [
     filename: "[name].[contenthash].css",
     chunkFilename: "[id].[contenthash].css",
   }),
+  new webpack.ProvidePlugin({
+    process: "process/browser.js",
+  }),
   new webpack.EnvironmentPlugin({
     ENV: ENV,
     NODE_ENV: NODE_ENV === "production" ? "production" : "development",
@@ -153,9 +163,6 @@ const plugins = [
     PAYPAL_CONFIG: envConfig["paypal"] ?? {},
     FLAGS: envConfig["flags"] ?? {},
   }),
-  new webpack.ProvidePlugin({
-    process: "process/browser",
-  }),
   new AngularWebpackPlugin({
     tsConfigPath: "tsconfig.json",
     entryModule: "src/app/app.module#AppModule",