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

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",