[PM-23399] Angular 19 and type script 5.6 (#835)

* angular 18 upgrade

* wip

* wip

* remove @types/glob, fix jest version, use standalone: false

* clean up

* npm ci

jslib/angular/src/components/toastr.component.ts

@@ -60,6 +60,7 @@ import {
     ]),
   ],
   preserveWhitespaces: false,
+  standalone: false,
 })
 export class BitwardenToast extends BaseToast {
   constructor(

jslib/angular/src/directives/a11y-title.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, Input, Renderer2 } from "@angular/core";
 
 @Directive({
   selector: "[appA11yTitle]",
+  standalone: false,
 })
 export class A11yTitleDirective {
   @Input() set appA11yTitle(title: string) {

jslib/angular/src/directives/api-action.directive.ts

@@ -13,6 +13,7 @@ import { ValidationService } from "../services/validation.service";
  */
 @Directive({
   selector: "[appApiAction]",
+  standalone: false,
 })
 export class ApiActionDirective implements OnChanges {
   @Input() appApiAction: Promise<any>;

jslib/angular/src/directives/autofocus.directive.ts

@@ -5,6 +5,7 @@ import { Utils } from "@/jslib/common/src/misc/utils";
 
 @Directive({
   selector: "[appAutofocus]",
+  standalone: false,
 })
 export class AutofocusDirective {
   @Input() set appAutofocus(condition: boolean | string) {

jslib/angular/src/directives/blur-click.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener } from "@angular/core";
 
 @Directive({
   selector: "[appBlurClick]",
+  standalone: false,
 })
 export class BlurClickDirective {
   constructor(private el: ElementRef) {}

jslib/angular/src/directives/box-row.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener, OnInit } from "@angular/core";
 
 @Directive({
   selector: "[appBoxRow]",
+  standalone: false,
 })
 export class BoxRowDirective implements OnInit {
   el: HTMLElement = null;

jslib/angular/src/directives/fallback-src.directive.ts

@@ -2,6 +2,7 @@ import { Directive, ElementRef, HostListener, Input } from "@angular/core";
 
 @Directive({
   selector: "[appFallbackSrc]",
+  standalone: false,
 })
 export class FallbackSrcDirective {
   @Input("appFallbackSrc") appFallbackSrc: string;

jslib/angular/src/directives/stop-click.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostListener } from "@angular/core";
 
 @Directive({
   selector: "[appStopClick]",
+  standalone: false,
 })
 export class StopClickDirective {
   @HostListener("click", ["$event"]) onClick($event: MouseEvent) {

jslib/angular/src/directives/stop-prop.directive.ts

@@ -2,6 +2,7 @@ import { Directive, HostListener } from "@angular/core";
 
 @Directive({
   selector: "[appStopProp]",
+  standalone: false,
 })
 export class StopPropDirective {
   @HostListener("click", ["$event"]) onClick($event: MouseEvent) {

jslib/angular/src/pipes/i18n.pipe.ts

@@ -4,6 +4,7 @@ import { I18nService } from "@/jslib/common/src/abstractions/i18n.service";
 
 @Pipe({
   name: "i18n",
+  standalone: false,
 })
 export class I18nPipe implements PipeTransform {
   constructor(private i18nService: I18nService) {}

package.json

@@ -73,15 +73,15 @@
     "test:types": "npx tsc --noEmit"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.17",
-    "@angular-eslint/eslint-plugin-template": "17.5.3",
-    "@angular-eslint/template-parser": "17.5.3",
-    "@angular/compiler-cli": "17.3.12",
+    "@angular-devkit/build-angular": "19.2.15",
+    "@angular-eslint/eslint-plugin-template": "19.8.0",
+    "@angular-eslint/template-parser": "19.8.0",
+    "@angular/compiler-cli": "19.2.14",
     "@electron/notarize": "2.5.0",
     "@electron/rebuild": "3.7.2",
     "@fluffy-spoon/substitute": "1.208.0",
     "@microsoft/microsoft-graph-types": "2.40.0",
-    "@ngtools/webpack": "17.3.17",
+    "@ngtools/webpack": "19.2.14",
     "@types/inquirer": "8.2.10",
     "@types/jest": "29.5.14",
     "@types/lowdb": "1.0.15",
@@ -117,7 +117,7 @@
     "husky": "9.1.7",
     "jest": "29.7.0",
     "jest-junit": "16.0.0",
-    "jest-mock-extended": "4.0.0",
+    "jest-mock-extended": "3.0.7",
     "jest-preset-angular": "14.6.0",
     "lint-staged": "16.1.2",
     "mini-css-extract-plugin": "2.9.2",
@@ -129,27 +129,28 @@
     "rxjs": "7.8.2",
     "sass": "1.89.2",
     "sass-loader": "16.0.5",
-    "ts-jest": "29.4.0",
+    "ts-jest": "29.3.4",
     "ts-loader": "9.5.2",
     "tsconfig-paths-webpack-plugin": "4.2.0",
     "type-fest": "4.41.0",
-    "typescript": "5.4.5",
+    "typescript": "5.6.3",
     "webpack": "5.99.9",
     "webpack-cli": "6.0.1",
     "webpack-merge": "6.0.1",
     "webpack-node-externals": "3.0.0",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "dependencies": {
-    "@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",
+    "@angular/animations": "19.2.14",
+    "@angular/cdk": "19.2.14",
+    "@angular/cli": "^19.2.14",
+    "@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",
     "@microsoft/microsoft-graph-client": "3.0.7",
     "big-integer": "1.6.52",
     "bootstrap": "5.3.7",
@@ -172,7 +173,7 @@
     "rxjs": "7.8.2",
     "tldjs": "2.3.1",
     "uuid": "11.1.0",
-    "zone.js": "0.14.10"
+    "zone.js": "0.15.1"
   },
   "engines": {
     "node": "~20",

src/app/accounts/apiKey.component.ts

@@ -16,6 +16,7 @@ import { EnvironmentComponent } from "./environment.component";
 @Component({
   selector: "app-apiKey",
   templateUrl: "apiKey.component.html",
+  standalone: false,
 })
 // There is an eslint exception made here due to semantics.
 // The eslint rule expects a typical takeUntil() pattern involving component destruction.

src/app/accounts/environment.component.ts

@@ -8,6 +8,7 @@ import { PlatformUtilsService } from "@/jslib/common/src/abstractions/platformUt
 @Component({
   selector: "app-environment",
   templateUrl: "environment.component.html",
+  standalone: false,
 })
 export class EnvironmentComponent extends BaseEnvironmentComponent {
   constructor(

src/app/app.component.ts

@@ -28,6 +28,7 @@ const BroadcasterSubscriptionId = "AppComponent";
   styles: [],
   template: ` <ng-template #settings></ng-template>
     <router-outlet></router-outlet>`,
+  standalone: false,
 })
 export class AppComponent implements OnInit {
   @ViewChild("settings", { read: ViewContainerRef, static: true }) settingsRef: ViewContainerRef;

src/app/tabs/dashboard.component.ts

@@ -17,6 +17,7 @@ const BroadcasterSubscriptionId = "DashboardComponent";
 @Component({
   selector: "app-dashboard",
   templateUrl: "dashboard.component.html",
+  standalone: false,
 })
 export class DashboardComponent implements OnInit, OnDestroy {
   simGroups: GroupEntry[];
@@ -111,7 +112,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
       this.simEnabledUsers = result.enabledUsers;
       this.simDisabledUsers = result.disabledUsers;
       this.simDeletedUsers = result.deletedUsers;
-    } catch (e) {
+    } catch {
       this.simGroups = null;
       this.simUsers = null;
     }

src/app/tabs/more.component.ts

@@ -12,6 +12,7 @@ const BroadcasterSubscriptionId = "MoreComponent";
 @Component({
   selector: "app-more",
   templateUrl: "more.component.html",
+  standalone: false,
 })
 export class MoreComponent implements OnInit {
   version: string;

src/app/tabs/settings.component.ts

@@ -16,6 +16,7 @@ import { ConnectorUtils } from "../../utils";
 @Component({
   selector: "app-settings",
   templateUrl: "settings.component.html",
+  standalone: false,
 })
 export class SettingsComponent implements OnInit, OnDestroy {
   directory: DirectoryType;

src/app/tabs/tabs.component.ts

@@ -3,5 +3,6 @@ import { Component } from "@angular/core";
 @Component({
   selector: "app-tabs",
   templateUrl: "tabs.component.html",
+  standalone: false,
 })
 export class TabsComponent {}

src/scss/bootstrap.scss

@@ -8,8 +8,9 @@ $theme-colors: (
   "secondary": #ced4da,
   "secondary-alt": #1a3b66,
 );
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+$font-family-sans-serif:
+  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
+  "Segoe UI Emoji", "Segoe UI Symbol";
 
 $h1-font-size: 2rem;
 $h2-font-size: 1.3rem;