[PM-4347] Upgrade angular to 17 (#11031)

Upgrade angular to 17

angular.json

@@ -128,10 +128,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "test-storybook:build:production"
+              "buildTarget": "test-storybook:build:production"
             },
             "development": {
-              "browserTarget": "test-storybook:build:development"
+              "buildTarget": "test-storybook:build:development"
             }
           },
           "defaultConfiguration": "development"

apps/web/src/polyfills.ts

@@ -1,10 +1,9 @@
 import "core-js/stable";
-require("zone.js/dist/zone");
+import "zone.js";
 
 if (process.env.NODE_ENV === "production") {
   // Production
 } else {
   // Development and test
   Error["stackTraceLimit"] = Infinity;
-  require("zone.js/dist/long-stack-trace-zone");
 }

libs/common/src/platform/state/implementations/default-active-user-state.spec.ts

@@ -220,7 +220,8 @@ describe("DefaultActiveUserState", () => {
   it("should not emit a previous users value if that user is no longer active", async () => {
     const user1Data: Jsonify<TestState> = {
       date: "2020-09-21T13:14:17.648Z",
-      array: ["value"],
+      // NOTE: `as any` is here until we migrate to Nx: https://bitwarden.atlassian.net/browse/PM-6493
+      array: ["value"] as any,
     };
     const user2Data: Jsonify<TestState> = {
       date: "2020-09-21T13:14:17.648Z",

libs/common/src/platform/state/key-definition.spec.ts

@@ -192,7 +192,8 @@ describe("KeyDefinition", () => {
       expect(arrayDefinition).toBeTruthy();
       expect(arrayDefinition.deserializer).toBeTruthy();
 
-      const deserializedValue = arrayDefinition.deserializer([false, true]);
+      // NOTE: `as any` is here until we migrate to Nx: https://bitwarden.atlassian.net/browse/PM-6493
+      const deserializedValue = arrayDefinition.deserializer([false, true] as any);
 
       expect(deserializedValue).toBeTruthy();
       expect(deserializedValue).toHaveLength(2);

libs/common/src/vault/models/domain/login.spec.ts

@@ -151,6 +151,7 @@ describe("Login DTO", () => {
         password: "myPassword" as EncryptedString,
         passwordRevisionDate: passwordRevisionDate.toISOString(),
         totp: "myTotp" as EncryptedString,
+        // NOTE: `as any` is here until we migrate to Nx: https://bitwarden.atlassian.net/browse/PM-6493
         fido2Credentials: [
           {
             credentialId: "keyId" as EncryptedString,
@@ -167,7 +168,7 @@ describe("Login DTO", () => {
             discoverable: "discoverable" as EncryptedString,
             creationDate: fido2CreationDate.toISOString(),
           },
-        ],
+        ] as any,
       });
 
       expect(actual).toEqual({

libs/components/src/item/item.mdx

@@ -71,7 +71,7 @@ The content can be a button, anchor, or static container.
 <bit-item>
   <button bit-item-content type="button">
     <bit-avatar slot="start" text="Foo"></bit-avatar>
-    foo@bitwarden.com
+    foo&#64;bitwarden.com
     <span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
     <ng-container slot="secondary">
       <div>Bitwarden.com</div>

libs/components/src/item/item.stories.ts

@@ -94,7 +94,7 @@ export const ContentSlots: Story = {
             slot="start"
             [text]="'Foo'"
           ></bit-avatar>
-          foo@bitwarden.com
+          foo&#64;bitwarden.com
           <ng-container slot="secondary">
             <div>Bitwarden.com</div>
             <div><em>locked</em></div>
@@ -285,37 +285,37 @@ export const SingleActionList: Story = {
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Foobar
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
       </bit-item-group>
     `,
@@ -332,14 +332,14 @@ export const SingleActionWithBadge: Story = {
             Foobar
             <span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
         <bit-item>
           <a bit-item-content href="#">
             Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
             <span bitBadge variant="primary" slot="default-trailing">Auto-fill</span>
             <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
-          </a>          
+          </a>
         </bit-item>
       </bit-item-group>
     `,

package.json

@@ -35,19 +35,20 @@
     "libs/*"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "16.2.14",
-    "@angular-eslint/eslint-plugin": "16.3.1",
-    "@angular-eslint/eslint-plugin-template": "16.3.1",
-    "@angular-eslint/template-parser": "16.3.1",
-    "@angular/cli": "16.2.14",
-    "@angular/compiler-cli": "16.2.12",
-    "@angular/elements": "16.2.12",
+    "@angular-devkit/build-angular": "17.3.9",
+    "@angular-eslint/eslint-plugin": "17.5.3",
+    "@angular-eslint/eslint-plugin-template": "17.5.3",
+    "@angular-eslint/schematics": "17.5.3",
+    "@angular-eslint/template-parser": "17.5.3",
+    "@angular/cli": "17.3.9",
+    "@angular/compiler-cli": "17.3.12",
+    "@angular/elements": "17.3.12",
     "@babel/core": "7.24.9",
     "@babel/preset-env": "7.24.8",
     "@compodoc/compodoc": "1.1.25",
     "@electron/notarize": "2.5.0",
     "@electron/rebuild": "3.7.0",
-    "@ngtools/webpack": "16.2.14",
+    "@ngtools/webpack": "17.3.9",
     "@storybook/addon-a11y": "8.2.9",
     "@storybook/addon-actions": "8.2.9",
     "@storybook/addon-designs": "8.0.3",
@@ -138,7 +139,7 @@
     "ts-loader": "9.5.1",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "type-fest": "2.19.0",
-    "typescript": "5.1.6",
+    "typescript": "5.4.2",
     "url": "0.11.4",
     "util": "0.12.5",
     "wait-on": "8.0.1",
@@ -148,22 +149,22 @@
     "webpack-node-externals": "3.0.0"
   },
   "dependencies": {
-    "@angular/animations": "16.2.12",
-    "@angular/cdk": "16.2.14",
-    "@angular/common": "16.2.12",
-    "@angular/compiler": "16.2.12",
-    "@angular/core": "16.2.12",
-    "@angular/forms": "16.2.12",
-    "@angular/platform-browser": "16.2.12",
-    "@angular/platform-browser-dynamic": "16.2.12",
-    "@angular/router": "16.2.12",
+    "@angular/animations": "17.3.12",
+    "@angular/cdk": "17.3.10",
+    "@angular/common": "17.3.12",
+    "@angular/compiler": "17.3.12",
+    "@angular/core": "17.3.12",
+    "@angular/forms": "17.3.12",
+    "@angular/platform-browser": "17.3.12",
+    "@angular/platform-browser-dynamic": "17.3.12",
+    "@angular/router": "17.3.12",
     "@bitwarden/sdk-internal": "0.1.7",
     "@electron/fuses": "1.8.0",
     "@koa/multer": "3.0.2",
     "@koa/router": "13.1.0",
     "@microsoft/signalr": "8.0.7",
     "@microsoft/signalr-protocol-msgpack": "8.0.7",
-    "@ng-select/ng-select": "11.2.0",
+    "@ng-select/ng-select": "12.0.7",
     "argon2": "0.41.1",
     "argon2-browser": "1.18.0",
     "big-integer": "1.6.52",
@@ -186,8 +187,8 @@
     "lowdb": "1.0.0",
     "lunr": "2.3.9",
     "multer": "1.4.5-lts.1",
-    "ngx-infinite-scroll": "16.0.0",
-    "ngx-toastr": "17.0.2",
+    "ngx-infinite-scroll": "17.0.1",
+    "ngx-toastr": "18.0.0",
     "node-fetch": "2.6.12",
     "node-forge": "1.3.1",
     "nord": "0.2.1",
@@ -203,7 +204,7 @@
     "tabbable": "6.2.0",
     "tldts": "6.1.58",
     "utf-8-validate": "6.0.4",
-    "zone.js": "0.13.3",
+    "zone.js": "0.14.10",
     "zxcvbn": "4.4.2"
   },
   "overrides": {