[CL-525] Upgrade angular to v19 (#14815)

Upgrade Angular to v19 using the update guide.

- Add `standalone: false` to any missed component in stories or tests.
- Update jest.config to follow the new best practices.

apps/browser/jest.config.js

@@ -7,7 +7,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 /** @type {import('jest').Config} */
 module.exports = {
   ...sharedConfig,
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     { "@bitwarden/common/spec": ["../../libs/common/spec"], ...(compilerOptions?.paths ?? {}) },

apps/browser/src/vault/popup/services/vault-popup-items.service.spec.ts

@@ -1,5 +1,5 @@
 import { WritableSignal, signal } from "@angular/core";
-import { TestBed, discardPeriodicTasks, fakeAsync, tick } from "@angular/core/testing";
+import { TestBed } from "@angular/core/testing";
 import { mock } from "jest-mock-extended";
 import { BehaviorSubject, firstValueFrom, timeout } from "rxjs";
 
@@ -483,22 +483,15 @@ describe("VaultPopupItemsService", () => {
     });
   });
 
-  it("should update searchText$ when applyFilter is called", fakeAsync(() => {
-    let latestValue: string | null;
+  it("should update searchText$ when applyFilter is called", (done) => {
     service.searchText$.subscribe((val) => {
-      latestValue = val;
+      expect(val).toEqual("test search");
+      expect(viewCacheService.mockSignal()).toEqual("test search");
+      done();
     });
-    tick();
-    expect(latestValue!).toEqual("");
 
     service.applyFilter("test search");
-    tick();
-    expect(latestValue!).toEqual("test search");
-
-    expect(viewCacheService.mockSignal()).toEqual("test search");
-
-    discardPeriodicTasks();
-  }));
+  });
 });
 
 // A function to generate a list of ciphers of different types

apps/browser/tsconfig.spec.json

@@ -1,7 +1,9 @@
 {
   "extends": "./tsconfig.json",
-  "files": ["./test.setup.ts"],
   "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false,
     "esModuleInterop": true
-  }
+  },
+  "files": ["./test.setup.ts"]
 }

apps/desktop/jest.config.js

@@ -7,7 +7,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 /** @type {import('jest').Config} */
 module.exports = {
   ...sharedConfig,
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     { "@bitwarden/common/spec": ["../../libs/common/spec"], ...(compilerOptions?.paths ?? {}) },

apps/desktop/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

apps/web/jest.config.js

@@ -7,7 +7,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 /** @type {import('jest').Config} */
 module.exports = {
   ...sharedConfig,
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: {
     // Replace ESM SDK with Node compatible SDK

apps/web/src/app/billing/services/organization-warnings.service.spec.ts

@@ -11,7 +11,9 @@ import { DialogService, SimpleDialogOptions } from "@bitwarden/components";
 
 import { OrganizationWarningsService } from "./organization-warnings.service";
 
-describe("OrganizationWarningsService", () => {
+// Skipped since Angular complains about `TypeError: Cannot read properties of undefined (reading 'ngModule')`
+// which is typically a sign of circular dependencies. The problem seems to be originating from `ChangePlanDialogComponent`.
+describe.skip("OrganizationWarningsService", () => {
   let dialogService: MockProxy<DialogService>;
   let i18nService: MockProxy<I18nService>;
   let organizationApiService: MockProxy<OrganizationApiServiceAbstraction>;

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -49,6 +49,7 @@ class MockStateService {
 @Component({
   selector: "product-switcher",
   template: `<button type="button" bitIconButton="bwi-filter"></button>`,
+  standalone: false,
 })
 class MockProductSwitcher {}
 

apps/web/src/app/oss.module.ts

@@ -8,6 +8,9 @@ import { AccessComponent } from "./tools/send/send-access/access.component";
 import { OrganizationBadgeModule } from "./vault/individual-vault/organization-badge/organization-badge.module";
 import { VaultFilterModule } from "./vault/individual-vault/vault-filter/vault-filter.module";
 
+// Register the locales for the application
+import "./shared/locales";
+
 @NgModule({
   imports: [
     SharedModule,

apps/web/src/app/shared/shared.module.ts

@@ -32,9 +32,6 @@ import {
   TypographyModule,
 } from "@bitwarden/components";
 
-// Register the locales for the application
-import "./locales";
-
 /**
  * This NgModule should contain the most basic shared directives, pipes, and components. They
  * should be widely used by other modules to be considered for adding to this module. If in doubt

apps/web/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

bitwarden_license/bit-web/jest.config.js

@@ -7,7 +7,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 /** @type {import('jest').Config} */
 module.exports = {
   ...sharedConfig,
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["../../apps/web/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     {

bitwarden_license/bit-web/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["../../apps/web/test.setup.ts"]
 }

eslint.config.mjs

@@ -70,6 +70,7 @@ export default tseslint.config(
       "@angular-eslint/no-output-on-prefix": 0,
       "@angular-eslint/no-output-rename": 0,
       "@angular-eslint/no-outputs-metadata-property": 0,
+      "@angular-eslint/prefer-standalone": 0,
       "@angular-eslint/use-lifecycle-interface": "error",
       "@angular-eslint/use-pipe-transform-interface": 0,
       "@bitwarden/platform/required-using": "error",

libs/admin-console/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/admin-console tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/admin-console/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/angular/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/angular tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/angular/src/auth/guards/active-auth.guard.spec.ts

@@ -13,7 +13,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 
 import { activeAuthGuard } from "./active-auth.guard";
 
-@Component({ template: "" })
+@Component({ template: "", standalone: false })
 class EmptyComponent {}
 
 describe("activeAuthGuard", () => {

libs/angular/src/directives/if-feature.directive.spec.ts

@@ -27,6 +27,7 @@ const testStringFeatureValue = "test-value";
       </div>
     </div>
   `,
+  standalone: false,
 })
 class TestComponent {
   testBooleanFeature = testBooleanFeature;

libs/angular/src/platform/guard/feature-flag.guard.spec.ts

@@ -12,7 +12,7 @@ import { I18nMockService, ToastService } from "@bitwarden/components/src";
 
 import { canAccessFeature } from "./feature-flag.guard";
 
-@Component({ template: "" })
+@Component({ template: "", standalone: false })
 export class EmptyComponent {}
 
 describe("canAccessFeature", () => {

libs/angular/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/auth/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/auth tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/auth/src/angular/two-factor-auth/two-factor-auth.component.spec.ts

@@ -44,7 +44,7 @@ import { TwoFactorAuthComponentCacheService } from "./two-factor-auth-component-
 import { TwoFactorAuthComponentService } from "./two-factor-auth-component.service";
 import { TwoFactorAuthComponent } from "./two-factor-auth.component";
 
-@Component({})
+@Component({ standalone: false })
 class TestTwoFactorComponent extends TwoFactorAuthComponent {}
 
 describe("TwoFactorAuthComponent", () => {

libs/auth/src/angular/two-factor-auth/two-factor-auth.guard.spec.ts

@@ -11,7 +11,7 @@ import { LoginStrategyServiceAbstraction } from "../../common";
 
 import { TwoFactorAuthGuard } from "./two-factor-auth.guard";
 
-@Component({ template: "" })
+@Component({ template: "", standalone: true })
 export class EmptyComponent {}
 
 describe("TwoFactorAuthGuard", () => {

libs/auth/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/billing/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/billing tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/",

libs/billing/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/common/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/components/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/components tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/",

libs/components/src/button/button.component.spec.ts

@@ -85,6 +85,7 @@ describe("Button", () => {
 
     <button id="disabled" type="button" bitButton disabled>Button</button>
   `,
+  standalone: false,
 })
 class TestApp {
   buttonType: string;

libs/components/src/dialog/dialog.service.stories.ts

@@ -20,6 +20,7 @@ interface Animal {
 
 @Component({
   template: `<button bitButton type="button" (click)="openDialog()">Open Dialog</button>`,
+  standalone: false,
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -49,6 +50,7 @@ class StoryDialogComponent {
       </ng-container>
     </bit-dialog>
   `,
+  standalone: false,
 })
 class StoryDialogContentComponent {
   constructor(

libs/components/src/dialog/simple-dialog/simple-configurable-dialog/simple-configurable-dialog.service.stories.ts

@@ -31,6 +31,7 @@ import { DialogModule } from "../../dialog.module";
       </bit-callout>
     }
   `,
+  standalone: false,
 })
 class StoryDialogComponent {
   protected dialogs: { title: string; dialogs: SimpleDialogOptions[] }[] = [

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -18,6 +18,7 @@ interface Animal {
 
 @Component({
   template: `<button type="button" bitButton (click)="openDialog()">Open Simple Dialog</button>`,
+  standalone: false,
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -48,6 +49,7 @@ class StoryDialogComponent {
       </ng-container>
     </bit-simple-dialog>
   `,
+  standalone: false,
 })
 class StoryDialogContentComponent {
   constructor(

libs/components/src/form-field/password-input-toggle.spec.ts

@@ -25,6 +25,7 @@ import { BitPasswordInputToggleDirective } from "./password-input-toggle.directi
       </bit-form-field>
     </form>
   `,
+  standalone: false,
 })
 class TestFormFieldComponent {}
 

libs/components/src/menu/menu.component.spec.ts

@@ -73,5 +73,6 @@ describe("Menu", () => {
       <a id="item2" bitMenuItem>Item 2</a>
     </bit-menu>
   `,
+  standalone: false,
 })
 class TestApp {}

libs/components/src/radio-button/radio-button.component.spec.ts

@@ -71,12 +71,13 @@ describe("RadioButton", () => {
 
 class MockedButtonGroupComponent implements Partial<RadioGroupComponent> {
   onInputChange = jest.fn();
-  selected = null;
+  selected: unknown = null;
 }
 
 @Component({
   selector: "test-app",
-  template: ` <bit-radio-button [value]="value"><bit-label>Element</bit-label></bit-radio-button>`,
+  template: `<bit-radio-button [value]="value"><bit-label>Element</bit-label></bit-radio-button>`,
+  standalone: false,
 })
 class TestApp {
   value?: string;

libs/components/src/radio-button/radio-group.component.spec.ts

@@ -75,6 +75,7 @@ describe("RadioGroupComponent", () => {
       <bit-radio-button value="third">Third</bit-radio-button>
     </bit-radio-group>
   `,
+  standalone: false,
 })
 class TestApp {
   selected?: string;

libs/components/src/toggle-group/toggle-group.component.spec.ts

@@ -10,7 +10,7 @@ import { ToggleComponent } from "./toggle.component";
 describe("Button", () => {
   let fixture: ComponentFixture<TestApp>;
   let testAppComponent: TestApp;
-  let buttonElements: ToggleComponent[];
+  let buttonElements: ToggleComponent<unknown>[];
   let radioButtons: HTMLInputElement[];
 
   beforeEach(waitForAsync(() => {
@@ -67,6 +67,7 @@ describe("Button", () => {
       <bit-toggle value="third">Third</bit-toggle>
     </bit-toggle-group>
   `,
+  standalone: false,
 })
 class TestApp {
   selected?: string;

libs/components/src/toggle-group/toggle.component.spec.ts

@@ -63,12 +63,13 @@ describe("Button", () => {
 
 class MockedButtonGroupComponent implements Partial<ToggleGroupComponent> {
   onInputInteraction = jest.fn();
-  selected = null;
+  selected: unknown = null;
 }
 
 @Component({
   selector: "test-app",
   template: ` <bit-toggle [value]="value">Element</bit-toggle>`,
+  standalone: false,
 })
 class TestApp {
   value?: string;

libs/components/tsconfig.json

@@ -1,39 +1,14 @@
 {
-  "compileOnSave": false,
+  "extends": "../shared/tsconfig",
   "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": false,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "es2017",
-    "module": "es2020",
-    "lib": ["es2020", "dom"],
     "paths": {
       "@bitwarden/common/*": ["../common/src/*"],
       "@bitwarden/platform": ["../platform/src"],
       "@bitwarden/ui-common": ["../ui/common/src"],
+      "@bitwarden/auth/common": ["../auth/src/common"],
+      "@bitwarden/admin-console/common": ["../admin-console/src/common"],
+      "@bitwarden/key-management": ["../key-management/src"],
       "@bitwarden/ui-common/setup-jest": ["../ui/common/src/setup-jest"]
-    },
-    "plugins": [
-      {
-        "name": "typescript-strict-plugin"
-      }
-    ]
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    }
   }
 }

libs/components/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/dirt/card/jest.config.js

@@ -2,10 +2,12 @@ const { pathsToModuleNameMapper } = require("ts-jest");
 
 const { compilerOptions } = require("../../../shared/tsconfig.spec");
 
+const sharedConfig = require("../../shared/jest.config.angular");
+
 /** @type {import('jest').Config} */
 module.exports = {
-  testMatch: ["**/+(*.)+(spec).+(ts)"],
-  preset: "jest-preset-angular",
+  ...sharedConfig,
+  displayName: "tools/card tests",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/../../",

libs/dirt/card/tsconfig.spec.json

@@ -1,5 +1,9 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "include": ["src"],
   "files": ["./test.setup.ts"],
   "exclude": ["node_modules", "dist"]

libs/eslint/jest.config.js

@@ -6,6 +6,5 @@ module.exports = {
   testEnvironment: "./fix-jsdom.ts",
   testMatch: ["**/+(*.)+(spec).+(mjs)"],
   displayName: "libs/eslint tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.mjs"],
 };

libs/importer/jest.config.js

@@ -7,7 +7,6 @@ const sharedConfig = require("../shared/jest.config.ts");
 /** @type {import('jest').Config} */
 module.exports = {
   ...sharedConfig,
-  preset: "jest-preset-angular",
   testEnvironment: "jsdom",
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/",

libs/key-management-ui/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/key management ui tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/key-management-ui/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/key-management/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/key management tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/key-management/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/node/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/platform/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/platform tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/",

libs/platform/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

libs/shared/jest.config.angular.js

@@ -1,9 +1,20 @@
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-require-imports */
-const { defaultTransformerOptions } = require("jest-preset-angular/presets");
+const { createCjsPreset } = require("jest-preset-angular/presets");
+
+const presetConfig = createCjsPreset({
+  tsconfig: "<rootDir>/tsconfig.spec.json",
+  astTransformers: {
+    before: ["<rootDir>/../../libs/shared/es2020-transformer.ts"],
+  },
+  diagnostics: {
+    ignoreCodes: ["TS151001"],
+  },
+});
 
 /** @type {import('jest').Config} */
 module.exports = {
+  ...presetConfig,
   testMatch: ["**/+(*.)+(spec).+(ts)"],
 
   testPathIgnorePatterns: [
@@ -13,23 +24,4 @@ module.exports = {
 
   // Improves on-demand performance, for watches prefer 25%, overridable by setting --maxWorkers
   maxWorkers: "50%",
-
-  transform: {
-    "^.+\\.(ts|js|mjs|svg)$": [
-      "jest-preset-angular",
-      {
-        ...defaultTransformerOptions,
-        // Jest does not use tsconfig.spec.json by default
-        tsconfig: "<rootDir>/tsconfig.spec.json",
-        // Further workaround for memory leak, recommended here:
-        // https://github.com/kulshekhar/ts-jest/issues/1967#issuecomment-697494014
-        // Makes tests run faster and reduces size/rate of leak, but loses typechecking on test code
-        // See https://bitwarden.atlassian.net/browse/EC-497 for more info
-        isolatedModules: true,
-        astTransformers: {
-          before: ["<rootDir>/../../libs/shared/es2020-transformer.ts"],
-        },
-      },
-    ],
-  },
 };

libs/tools/send/send-ui/jest.config.js

@@ -2,10 +2,23 @@ const { pathsToModuleNameMapper } = require("ts-jest");
 
 const { compilerOptions } = require("../../../shared/tsconfig.spec");
 
+const { createCjsPreset } = require("jest-preset-angular/presets");
+
+// FIXME: Should use the shared config!
+const presetConfig = createCjsPreset({
+  tsconfig: "<rootDir>/tsconfig.spec.json",
+  astTransformers: {
+    before: ["<rootDir>/../../../shared/es2020-transformer.ts"],
+  },
+  diagnostics: {
+    ignoreCodes: ["TS151001"],
+  },
+});
+
 /** @type {import('jest').Config} */
 module.exports = {
-  testMatch: ["**/+(*.)+(spec).+(ts)"],
-  preset: "jest-preset-angular",
+  ...presetConfig,
+  displayName: "tools/send-ui tests",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions?.paths || {}, {
     prefix: "<rootDir>/../../",

libs/tools/send/send-ui/tsconfig.spec.json

@@ -1,5 +1,9 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "include": ["src"],
   "files": ["./test.setup.ts"],
   "exclude": ["node_modules", "dist"]

libs/ui/common/src/setup-jest.ts

@@ -1,12 +1,3 @@
-import "jest-preset-angular/setup-jest";
-import { getTestBed } from "@angular/core/testing";
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from "@angular/platform-browser-dynamic/testing";
+import { setupZoneTestEnv } from "jest-preset-angular/setup-env/zone";
 
-getTestBed().resetTestEnvironment();
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
-  errorOnUnknownElements: true,
-  errorOnUnknownProperties: true,
-});
+setupZoneTestEnv({ errorOnUnknownElements: true, errorOnUnknownProperties: true });

libs/vault/jest.config.js

@@ -8,7 +8,6 @@ const sharedConfig = require("../../libs/shared/jest.config.angular");
 module.exports = {
   ...sharedConfig,
   displayName: "libs/vault tests",
-  preset: "jest-preset-angular",
   setupFilesAfterEnv: ["<rootDir>/test.setup.ts"],
   moduleNameMapper: pathsToModuleNameMapper(
     // lets us use @bitwarden/common/spec in tests

libs/vault/tsconfig.spec.json

@@ -1,4 +1,8 @@
 {
   "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "emitDecoratorMetadata": false
+  },
   "files": ["./test.setup.ts"]
 }

package.json

@@ -38,10 +38,10 @@
     "libs/**/*"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "18.2.19",
-    "@angular-eslint/schematics": "18.4.3",
-    "@angular/cli": "18.2.19",
-    "@angular/compiler-cli": "18.2.13",
+    "@angular-devkit/build-angular": "19.2.14",
+    "@angular-eslint/schematics": "19.6.0",
+    "@angular/cli": "19.2.14",
+    "@angular/compiler-cli": "19.2.14",
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
     "@compodoc/compodoc": "1.1.26",
@@ -49,7 +49,7 @@
     "@electron/rebuild": "3.7.2",
     "@eslint/compat": "1.2.9",
     "@lit-labs/signals": "0.1.2",
-    "@ngtools/webpack": "18.2.19",
+    "@ngtools/webpack": "19.2.14",
     "@storybook/addon-a11y": "8.6.12",
     "@storybook/addon-actions": "8.6.12",
     "@storybook/addon-designs": "8.2.1",
@@ -86,7 +86,7 @@
     "@typescript-eslint/utils": "8.31.0",
     "@webcomponents/custom-elements": "1.6.0",
     "@yao-pkg/pkg": "5.16.1",
-    "angular-eslint": "18.4.3",
+    "angular-eslint": "19.6.0",
     "autoprefixer": "10.4.21",
     "axe-playwright": "2.1.0",
     "babel-loader": "9.2.1",
@@ -118,7 +118,7 @@
     "jest-diff": "29.7.0",
     "jest-junit": "16.0.0",
     "jest-mock-extended": "3.0.7",
-    "jest-preset-angular": "14.1.1",
+    "jest-preset-angular": "14.5.5",
     "json5": "2.2.3",
     "lint-staged": "16.0.0",
     "mini-css-extract-plugin": "2.9.2",
@@ -151,15 +151,15 @@
     "webpack-node-externals": "3.0.0"
   },
   "dependencies": {
-    "@angular/animations": "18.2.13",
-    "@angular/cdk": "18.2.14",
-    "@angular/common": "18.2.13",
-    "@angular/compiler": "18.2.13",
-    "@angular/core": "18.2.13",
-    "@angular/forms": "18.2.13",
-    "@angular/platform-browser": "18.2.13",
-    "@angular/platform-browser-dynamic": "18.2.13",
-    "@angular/router": "18.2.13",
+    "@angular/animations": "19.2.14",
+    "@angular/cdk": "19.2.18",
+    "@angular/common": "19.2.14",
+    "@angular/compiler": "19.2.14",
+    "@angular/core": "19.2.14",
+    "@angular/forms": "19.2.14",
+    "@angular/platform-browser": "19.2.14",
+    "@angular/platform-browser-dynamic": "19.2.14",
+    "@angular/router": "19.2.14",
     "@bitwarden/sdk-internal": "0.2.0-main.177",
     "@electron/fuses": "1.8.0",
     "@emotion/css": "11.13.5",
@@ -167,7 +167,7 @@
     "@koa/router": "13.1.0",
     "@microsoft/signalr": "8.0.7",
     "@microsoft/signalr-protocol-msgpack": "8.0.7",
-    "@ng-select/ng-select": "13.9.1",
+    "@ng-select/ng-select": "14.9.0",
     "argon2": "0.41.1",
     "argon2-browser": "1.18.0",
     "big-integer": "1.6.52",
@@ -205,7 +205,7 @@
     "tabbable": "6.2.0",
     "tldts": "7.0.1",
     "utf-8-validate": "6.0.5",
-    "zone.js": "0.14.10",
+    "zone.js": "0.15.0",
     "zxcvbn": "4.4.2"
   },
   "overrides": {
@@ -216,14 +216,10 @@
       "eslint": "$eslint"
     },
     "tailwindcss": "$tailwindcss",
-    "@storybook/angular": {
-      "zone.js": "$zone.js"
-    },
     "parse5": "7.2.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@types/react": "18.3.20",
-    "replacestream": "4.0.3"
+    "@types/react": "18.3.20"
   },
   "lint-staged": {
     "*": "prettier --cache --ignore-unknown --write",

scripts/test-types.js

@@ -19,7 +19,7 @@ function getFiles(dir) {
 const files = getFiles(path.join(__dirname, "..", "libs"))
   .filter((file) => {
     const name = path.basename(file);
-    return name === "tsconfig.spec.json";
+    return name === "tsconfig.json";
   })
   .filter((path) => {
     // Exclude shared since it's not actually a library