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

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 {