Update node+angular deps (#3153)

- node to the most recent LTS version
- angular dependencies to 22.x rather than 21.x
- eslint to 10.7 (the old version was quite old)

Deployed to alpha and everything looks good. The Typescript changes
were all done by the migration (nothing manually).

G.1 numbers 8 and 9

build.gradle

@@ -60,7 +60,7 @@ dependencyLocking {
 
 node {
   download = false
-  version = "22.7.0"
+  version = "24.19.0"
 }
 
 wrapper {

console-webapp/.eslintrc.json

@@ -1,50 +0,0 @@
-{
-  "root": true,
-  "ignorePatterns": [
-    "projects/**/*"
-  ],
-  "overrides": [
-    {
-      "files": [
-        "*.ts"
-      ],
-      "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
-      "rules": {
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ],
-        "eol-last": [
-          "error",
-          "always"
-        ]
-      }
-    },
-    {
-      "files": [
-        "*.html"
-      ],
-      "extends": [
-        "plugin:@angular-eslint/template/recommended"
-      ],
-      "rules": {}
-    }
-  ]
-}

console-webapp/angular.json

@@ -22,19 +22,11 @@
               "browser": ""
             },
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/theme.scss",
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/theme.scss", "src/styles.scss"],
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/"]
             },
@@ -122,7 +114,12 @@
               "optimization": false,
               "extractLicenses": false,
               "sourceMap": true,
-              "namedChunks": true,
+              "namedChunks": true
+            },
+            "testing": {
+              "aot": false,
+              "optimization": false,
+              "extractLicenses": false
             }
           },
           "defaultConfiguration": "production"
@@ -161,20 +158,12 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/theme.scss",
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/theme.scss", "src/styles.scss"],
             "stylePreprocessorOptions": {
               "includePaths": ["node_modules/"]
             },
@@ -184,10 +173,7 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
           }
         }
       }
@@ -198,9 +184,7 @@
       "enabled": false
     },
     "analytics": false,
-    "schematicCollections": [
-      "@angular-eslint/schematics"
-    ]
+    "schematicCollections": ["@angular-eslint/schematics"]
   },
   "schematics": {
     "@schematics/angular:component": {

console-webapp/eslint.config.js

@@ -0,0 +1,59 @@
+// Copyright 2026 The Nomulus Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    ignores: ["projects/**/*", "dist/**/*", "staged/**/*", "coverage/**/*"],
+  },
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": "off",
+      "@angular-eslint/component-selector": "off",
+      "eol-last": ["error", "always"],
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-wrapper-object-types": "off",
+      "@typescript-eslint/no-unsafe-function-type": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@angular-eslint/prefer-on-push-component-change-detection": "off",
+      "@angular-eslint/prefer-inject": "off",
+      "@angular-eslint/prefer-standalone": "off",
+      "@angular-eslint/no-output-on-prefix": "off",
+      "no-var": "off",
+      "prefer-const": "off",
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {
+      "@angular-eslint/template/eqeqeq": "off",
+    },
+  }
+);

console-webapp/package.json

@@ -16,35 +16,40 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.5",
-    "@angular/cdk": "^21.1.5",
-    "@angular/common": "^21.1.5",
-    "@angular/compiler": "^21.1.5",
-    "@angular/core": "^21.1.5",
-    "@angular/forms": "^21.1.5",
-    "@angular/material": "^21.1.5",
-    "@angular/platform-browser": "^21.1.5",
-    "@angular/platform-browser-dynamic": "^21.1.5",
-    "@angular/router": "^21.1.5",
+    "@angular/animations": "^22.0.6",
+    "@angular/cdk": "^22.0.4",
+    "@angular/common": "^22.0.6",
+    "@angular/compiler": "^22.0.6",
+    "@angular/core": "^22.0.6",
+    "@angular/forms": "^22.0.6",
+    "@angular/material": "^22.0.4",
+    "@angular/platform-browser": "^22.0.6",
+    "@angular/platform-browser-dynamic": "^22.0.6",
+    "@angular/router": "^22.0.6",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-eslint/builder": "19.0.2",
-    "@angular-eslint/eslint-plugin": "19.0.2",
-    "@angular-eslint/eslint-plugin-template": "19.0.2",
-    "@angular-eslint/schematics": "19.0.2",
-    "@angular-eslint/template-parser": "19.0.2",
-    "@angular/build": "^21.1.4",
-    "@angular/cli": "~21.1.4",
-    "@angular/compiler-cli": "^21.1.5",
+    "@angular-eslint/builder": "22.1.0",
+    "@angular-eslint/eslint-plugin": "22.1.0",
+    "@angular-eslint/eslint-plugin-template": "22.1.0",
+    "@angular-eslint/schematics": "22.1.0",
+    "@angular-eslint/template-parser": "22.1.0",
+    "@angular/build": "^22.0.6",
+    "@angular/cli": "~22.0.6",
+    "@angular/compiler-cli": "^22.0.6",
+    "@eslint/js": "^10.0.1",
     "@types/jasmine": "~4.0.0",
-    "@types/node": "^18.19.74",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
+    "@types/node": "^24.13.3",
+    "@typescript-eslint/eslint-plugin": "^8.64.0",
+    "@typescript-eslint/parser": "^8.64.0",
+    "@typescript-eslint/utils": "^8.64.0",
+    "@vitest/browser-preview": "^4.1.10",
+    "angular-eslint": "^22.1.0",
     "concurrently": "^7.6.0",
-    "eslint": "^8.57.0",
+    "eslint": "^10.7.0",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine-core": "~4.3.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",
@@ -52,6 +57,8 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
     "prettier": "2.8.7",
-    "typescript": "^5.9.3"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.64.0",
+    "vitest": "^4.0.8"
   }
-}
+}

console-webapp/src/app/app.component.ts

@@ -12,7 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { AfterViewInit, Component, effect, ViewChild } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  effect,
+  ViewChild,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { NavigationEnd, Router } from '@angular/router';
 import { RegistrarService } from './registrar/registrar.service';
@@ -26,6 +32,7 @@ import { PocReminderComponent } from './shared/components/pocReminder/pocReminde
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class AppComponent implements AfterViewInit {

console-webapp/src/app/app.module.ts

@@ -27,6 +27,7 @@ import {
   HttpClientXsrfModule,
   provideHttpClient,
   withInterceptorsFromDi,
+  withXhr,
 } from '@angular/common/http';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { BillingInfoComponent } from './billingInfo/billingInfo.component';

console-webapp/src/app/billingInfo/billingInfo.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, computed } from '@angular/core';
+import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
 import { RegistrarService } from '../registrar/registrar.service';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
@@ -20,6 +20,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   selector: 'app-billingInfo',
   templateUrl: './billingInfo.component.html',
   styleUrls: ['./billingInfo.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class BillingInfoComponent {

console-webapp/src/app/domains/domainList.component.ts

@@ -14,7 +14,13 @@
 
 import { SelectionModel } from '@angular/cdk/collections';
 import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
-import { Component, effect, Inject, ViewChild } from '@angular/core';
+import {
+  Component,
+  effect,
+  Inject,
+  ViewChild,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
@@ -57,6 +63,7 @@ interface DomainData {
       <button mat-button (click)="onClose()">Close</button>
     </mat-dialog-actions>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ResponseDialogComponent {
@@ -95,6 +102,7 @@ enum Operation {
       </button>
     </mat-dialog-actions>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ReasonDialogComponent {
@@ -119,6 +127,7 @@ export class ReasonDialogComponent {
   templateUrl: './domainList.component.html',
   styleUrls: ['./domainList.component.scss'],
   standalone: false,
+  changeDetection: ChangeDetectionStrategy.Eager,
   providers: [CdkColumnDef],
 })
 export class DomainListComponent {

console-webapp/src/app/domains/registryLock.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, computed } from '@angular/core';
+import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from '../registrar/registrar.service';
@@ -25,6 +25,7 @@ import { RegistryLockService } from './registryLock.service';
   selector: 'app-registry-lock',
   templateUrl: './registryLock.component.html',
   styleUrls: ['./registryLock.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class RegistryLockComponent {

console-webapp/src/app/header/header.component.ts

@@ -12,13 +12,19 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { BreakPointObserverService } from '../shared/services/breakPoint.service';
 
 @Component({
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class HeaderComponent {

console-webapp/src/app/history/history.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect } from '@angular/core';
+import { Component, effect, ChangeDetectionStrategy } from '@angular/core';
 import { UserDataService } from '../shared/services/userData.service';
 import { BackendService } from '../shared/services/backend.service';
 import { RegistrarService } from '../registrar/registrar.service';
@@ -30,6 +30,7 @@ import { RESTRICTED_ELEMENTS } from '../shared/directives/userLevelVisiblity.dir
   templateUrl: './history.component.html',
   styleUrls: ['./history.component.scss'],
   providers: [HistoryService],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class HistoryComponent implements GlobalLoader {

console-webapp/src/app/home/home.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { Router } from '@angular/router';
 import { DomainListComponent } from '../domains/domainList.component';
 import { RegistrarComponent } from '../registrar/registrarsTable.component';
@@ -25,6 +25,7 @@ import { BreakPointObserverService } from '../shared/services/breakPoint.service
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class HomeComponent {

console-webapp/src/app/lock/registryLockVerify.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { RegistrarService } from '../registrar/registrar.service';
 import { ActivatedRoute, ParamMap } from '@angular/router';
 import { RegistryLockVerifyService } from './registryLockVerify.service';
@@ -25,6 +25,7 @@ import { DomainListComponent } from '../domains/domainList.component';
   templateUrl: './registryLockVerify.component.html',
   styleUrls: ['./registryLockVerify.component.scss'],
   providers: [RegistryLockVerifyService],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class RegistryLockVerifyComponent {

console-webapp/src/app/navigation/navigation.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { NestedTreeControl } from '@angular/cdk/tree';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { NavigationEnd, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -33,6 +33,7 @@ interface NavMenuNode extends RouteWithIcon {
   selector: 'app-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class NavigationComponent {

console-webapp/src/app/ote/newOte.component.ts

@@ -13,7 +13,12 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, computed, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from '../registrar/registrar.service';
@@ -28,6 +33,7 @@ export interface OteCreateResponse extends Map<string, string> {
   selector: 'app-ote',
   imports: [MaterialModule, SnackBarModule],
   templateUrl: './newOte.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrls: ['./newOte.component.scss'],
 })
 export class NewOteComponent {

console-webapp/src/app/ote/oteStatus.component.ts

@@ -13,7 +13,13 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, computed, OnInit, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  OnInit,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from '../registrar/registrar.service';
 import { MaterialModule } from '../material.module';
@@ -33,6 +39,7 @@ export interface OteStatusResponse {
   selector: 'app-ote-status',
   imports: [MaterialModule, SnackBarModule],
   templateUrl: './oteStatus.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrls: ['./oteStatus.component.scss'],
 })
 export class OteStatusComponent implements OnInit {

console-webapp/src/app/registrar/newRegistrar.component.ts

@@ -18,6 +18,7 @@ import {
   ElementRef,
   ViewChild,
   ViewEncapsulation,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { Registrar, RegistrarService } from './registrar.service';
@@ -33,6 +34,7 @@ interface LocalizedAddressStreet {
   templateUrl: './newRegistrar.component.html',
   styleUrls: ['./newRegistrar.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class NewRegistrarComponent {

console-webapp/src/app/registrar/registrarDetails.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
@@ -27,6 +27,7 @@ import { environment } from '../../environments/environment';
   selector: 'app-registrar-details',
   templateUrl: './registrarDetails.component.html',
   styleUrls: ['./registrarDetails.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class RegistrarDetailsComponent implements OnInit {

console-webapp/src/app/registrar/registrarSelector.component.ts

@@ -12,13 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, computed, effect, signal } from '@angular/core';
+import {
+  Component,
+  computed,
+  effect,
+  signal,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { RegistrarService } from './registrar.service';
 
 @Component({
   selector: 'app-registrar-selector',
   templateUrl: './registrarSelector.component.html',
   styleUrls: ['./registrarSelector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class RegistrarSelectorComponent {

console-webapp/src/app/registrar/registrarsTable.component.ts

@@ -12,7 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  effect,
+  ViewChild,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
@@ -78,6 +84,7 @@ export const columns = [
   templateUrl: './registrarsTable.component.html',
   styleUrls: ['./registrarsTable.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class RegistrarComponent {

console-webapp/src/app/resources/resources.component.ts

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { UserDataService } from '../shared/services/userData.service';
 
 @Component({
   selector: 'app-resources',
   templateUrl: './resources.component.html',
   styleUrls: ['./resources.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ResourcesComponent {

console-webapp/src/app/settings/contact/contact.component.ts

@@ -12,7 +12,12 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  effect,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
 import { take } from 'rxjs';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
@@ -23,6 +28,7 @@ import { ContactService, ViewReadyContact } from './contact.service';
   templateUrl: './contact.component.html',
   styleUrls: ['./contact.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class ContactComponent {

console-webapp/src/app/settings/contact/contactDetails.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { first } from 'rxjs';
@@ -27,6 +27,7 @@ import {
   selector: 'app-contact-details',
   templateUrl: './contactDetails.component.html',
   styleUrls: ['./contactDetails.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class ContactDetailsComponent {

console-webapp/src/app/settings/rdap/rdap.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, computed } from '@angular/core';
+import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 import { RdapService } from './rdap.service';
 
@@ -20,6 +20,7 @@ import { RdapService } from './rdap.service';
   selector: 'app-rdap',
   templateUrl: './rdap.component.html',
   styleUrls: ['./rdap.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class RdapComponent {

console-webapp/src/app/settings/rdap/rdapEdit.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, effect } from '@angular/core';
+import { Component, effect, ChangeDetectionStrategy } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {
   Registrar,
@@ -26,6 +26,7 @@ import { RdapService } from './rdap.service';
   selector: 'app-rdap-edit',
   templateUrl: './rdapEdit.component.html',
   styleUrls: ['./rdapEdit.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class RdapEditComponent {

console-webapp/src/app/settings/security/eppPasswordEdit.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
@@ -41,6 +41,7 @@ import {
       <button mat-button color="warn" (click)="onSave()">Confirm</button>
     </mat-dialog-actions>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [MaterialModule],
 })
 export class ResetEppPasswordComponent {
@@ -59,6 +60,7 @@ export class ResetEppPasswordComponent {
   selector: 'app-epp-password-edit',
   templateUrl: './eppPasswordEdit.component.html',
   styleUrls: ['./eppPasswordEdit.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class EppPasswordEditComponent {

console-webapp/src/app/settings/security/security.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, effect } from '@angular/core';
+import { Component, effect, ChangeDetectionStrategy } from '@angular/core';
 import {
   RegistrarService,
   SecuritySettings,
@@ -23,6 +23,7 @@ import { SecurityService, apiToUiConverter } from './security.service';
   selector: 'app-security',
   templateUrl: './security.component.html',
   styleUrls: ['./security.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class SecurityComponent {

console-webapp/src/app/settings/security/securityEdit.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import {
   IpAllowListItem,
@@ -26,6 +26,7 @@ import { SecurityService, apiToUiConverter } from './security.service';
   selector: 'app-security-edit',
   templateUrl: './securityEdit.component.html',
   styleUrls: ['./securityEdit.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export default class SecurityEditComponent {

console-webapp/src/app/settings/settings.component.ts

@@ -12,13 +12,18 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 
 @Component({
   selector: 'app-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss'],
   encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class SettingsComponent {

console-webapp/src/app/shared/components/notifications/notifications.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 
 interface Notification {
   id: string;
@@ -24,6 +24,7 @@ interface Notification {
   selector: 'app-notifications',
   templateUrl: './notifications.component.html',
   styleUrls: ['./notifications.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class NotificationsComponent {

console-webapp/src/app/shared/components/passwordReset/passwordInputForm.component.ts

@@ -12,7 +12,13 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, EventEmitter, input, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  input,
+  Output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
 import { AbstractControl, FormGroup, ValidatorFn } from '@angular/forms';
 
 type errorCode = 'required' | 'maxlength' | 'minlength' | 'passwordsDontMatch';
@@ -29,6 +35,7 @@ export interface PasswordResults {
   selector: 'password-input-form-component',
   templateUrl: './passwordInputForm.component.html',
   styleUrls: ['./passwordInputForm.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class PasswordInputForm {

console-webapp/src/app/shared/components/passwordReset/passwordResetVerify.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { HttpErrorResponse } from '@angular/common/http';
 import { take } from 'rxjs';
@@ -34,6 +34,7 @@ export interface PasswordResetVerifyResponse {
 @Component({
   selector: 'app-password-reset-verify',
   templateUrl: './passwordResetVerify.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class PasswordResetVerifyComponent {

console-webapp/src/app/shared/components/pocReminder/pocReminder.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { MatSnackBar, MatSnackBarRef } from '@angular/material/snack-bar';
 import { RegistrarService } from '../../../registrar/registrar.service';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -21,6 +21,7 @@ import { HttpErrorResponse } from '@angular/common/http';
   selector: 'app-poc-reminder',
   templateUrl: './pocReminder.component.html',
   styleUrls: ['./pocReminder.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class PocReminderComponent {

console-webapp/src/app/shared/components/selectedRegistrarWrapper/selectedRegistrarWrapper.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { RegistrarService } from 'src/app/registrar/registrar.service';
 
 @Component({
@@ -31,6 +31,7 @@ import { RegistrarService } from 'src/app/registrar/registrar.service';
     </div>
     }
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class SelectedRegistrarWrapper {

console-webapp/src/app/support/support.component.ts

@@ -12,13 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { UserDataService } from '../shared/services/userData.service';
 
 @Component({
   selector: 'app-support',
   templateUrl: './support.component.html',
   styleUrls: ['./support.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Eager,
   standalone: false,
 })
 export class SupportComponent {

console-webapp/src/app/users/userDetails.component.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, computed } from '@angular/core';
+import { Component, computed, ChangeDetectionStrategy } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SelectedRegistrarModule } from '../app.module';
 import { MaterialModule } from '../material.module';
@@ -33,6 +33,7 @@ import { UserEditFormComponent } from './userEditForm.component';
     SelectedRegistrarModule,
     UserEditFormComponent,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   providers: [],
 })
 export class UserDetailsComponent {

console-webapp/src/app/users/userEditForm.component.ts

@@ -20,6 +20,7 @@ import {
   input,
   Output,
   ViewChild,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { MaterialModule } from '../material.module';
 import { FormsModule } from '@angular/forms';
@@ -49,6 +50,7 @@ import { HttpErrorResponse } from '@angular/common/http';
       <button mat-button color="warn" (click)="onSave()">Confirm</button>
     </mat-dialog-actions>
   `,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [MaterialModule],
 })
 export class ResetRegistryLockPasswordComponent {
@@ -72,6 +74,7 @@ export class ResetRegistryLockPasswordComponent {
   templateUrl: './userEditForm.component.html',
   styleUrls: ['./userEditForm.component.scss'],
   imports: [FormsModule, MaterialModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
   providers: [],
 })
 export class UserEditFormComponent {

console-webapp/src/app/users/users.component.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, effect } from '@angular/core';
+import { Component, effect, ChangeDetectionStrategy } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SelectedRegistrarModule } from '../app.module';
 import { MaterialModule } from '../material.module';
@@ -39,6 +39,7 @@ import { UserEditFormComponent } from './userEditForm.component';
     UserEditFormComponent,
     UserDetailsComponent,
   ],
+  changeDetection: ChangeDetectionStrategy.Eager,
   providers: [UsersService],
 })
 export class UsersComponent {

console-webapp/src/app/users/usersList.component.ts

@@ -19,6 +19,7 @@ import {
   input,
   Output,
   ViewChild,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { MaterialModule } from '../material.module';
 import { User, roleToDescription } from './users.service';
@@ -43,6 +44,7 @@ export const columns = [
   templateUrl: './usersList.component.html',
   styleUrls: ['./usersList.component.scss'],
   imports: [MaterialModule],
+  changeDetection: ChangeDetectionStrategy.Eager,
   providers: [],
 })
 export class UsersListComponent {

console-webapp/tsconfig.app.json

@@ -5,11 +5,14 @@
     "outDir": "./out-tsc/app",
     "types": []
   },
-  "files": [
-    "src/main.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

console-webapp/tsconfig.json

@@ -2,7 +2,9 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
-    "baseUrl": "./",
+    "paths": {
+      "src/*": ["./src/*"]
+    },
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,

console-webapp/tsconfig.spec.json

@@ -3,16 +3,16 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "types": ["jasmine"]
   },
-  "files": [
-    "src/test.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }