Ng22update

eslint.config.js

@@ -53,6 +53,7 @@ module.exports = tseslint.config(
       "@typescript-eslint/unbound-method": ["error", { ignoreStatic: true }],
       "@typescript-eslint/prefer-nullish-coalescing": "off", // TODO do it later
       "@typescript-eslint/no-misused-spread": "off", // TODO check later if we need it.
+      "@typescript-eslint/no-unnecessary-type-assertion": "off",
 
       /* @smarttools/eslint-plugin-rxjs rules (https://github.com/DaveMBush/eslint-plugin-rxjs?tab=readme-ov-file#rules) */
       "@smarttools/rxjs/no-implicit-any-catch": "off",
@@ -84,7 +85,6 @@ module.exports = tseslint.config(
         { type: "attribute", prefix: ["configcat-trello"], style: "camelCase" },
       ],
       "@angular-eslint/no-async-lifecycle-method": "error",
-      "@angular-eslint/no-conflicting-lifecycle": "error",
       "@angular-eslint/no-duplicates-in-metadata-arrays": "error",
       "@angular-eslint/prefer-output-readonly": "error",
       "@angular-eslint/prefer-signals": "error",
@@ -93,6 +93,7 @@ module.exports = tseslint.config(
       "@angular-eslint/use-lifecycle-interface": "error",
       "@angular-eslint/no-uncalled-signals": "error",
       "@angular-eslint/prefer-output-emitter-ref": "error",
+      "@angular-eslint/prefer-on-push-component-change-detection": "off", // We should turn this on after onpush migrations.
       // All rules for angular eslint-plugin: https://github.com/angular-eslint/angular-eslint/blob/main/packages/eslint-plugin/src/configs/all.json
 
       /* Layout & Formatting (https://eslint.style/packages/js, https://eslint.style/packages/ts) */

package.json

@@ -10,43 +10,43 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.2.17",
-    "@angular/cdk": "^21.2.14",
-    "@angular/common": "^21.2.17",
-    "@angular/compiler": "^21.2.17",
-    "@angular/core": "^21.2.17",
-    "@angular/forms": "^21.2.17",
-    "@angular/material": "^21.2.14",
-    "@angular/platform-browser": "^21.2.17",
-    "@angular/router": "^21.2.17",
+    "@angular/animations": "^22.0.7",
+    "@angular/cdk": "^22.0.5",
+    "@angular/common": "^22.0.7",
+    "@angular/compiler": "^22.0.7",
+    "@angular/core": "^22.0.7",
+    "@angular/forms": "^22.0.7",
+    "@angular/material": "^22.0.5",
+    "@angular/platform-browser": "^22.0.7",
+    "@angular/router": "^22.0.7",
     "@types/trellopowerup": "^1.25.0",
     "ace-builds": "^1.37.0",
-    "ng-configcat-publicapi": "^6.0.0",
-    "ng-configcat-publicapi-ui": "^5.4.2",
+    "ng-configcat-publicapi": "^6.1.0",
+    "ng-configcat-publicapi-ui": "^5.5.0",
     "papaparse": "^5.5.3",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.1",
     "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.2.15",
-    "@angular/cli": "^21.2.15",
-    "@angular/compiler-cli": "^21.2.17",
-    "@angular/language-service": "^21.2.17",
+    "@angular/build": "^22.0.7",
+    "@angular/cli": "^22.0.7",
+    "@angular/compiler-cli": "^22.0.7",
+    "@angular/language-service": "^22.0.7",
     "@configcat/sdk": "^1.0.2",
     "@rxweb/reactive-form-validators": "^13.0.1",
     "@smarttools/eslint-plugin-rxjs": "^1.0.20",
     "@stylistic/eslint-plugin": "^4.4.1",
-    "@types/node": "^22.15.30",
-    "angular-eslint": "21.3.1",
+    "@types/node": "^24.1.0",
+    "angular-eslint": "22.1.0",
     "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-prettier": "^5.5.4",
-    "eslint-plugin-sonarjs": "^4.0.2",
-    "prettier": "3.6.2",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-sonarjs": "^4.2.0",
+    "prettier": "3.9.5",
     "ts-node": "~10.9.1",
-    "typescript": "~5.9.3",
-    "typescript-eslint": "^8.40.0"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.64.0"
   }
 }

src/app/add-feature-flag/add-feature-flag.component.ts

@@ -1,18 +1,15 @@
-import { Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
 import { AuthorizationComponent, LinkFeatureFlagComponent } from "ng-configcat-publicapi-ui";
 import { BaseLinkFeatureFlagComponent } from "../base-link-feature-flag.component";
 
 @Component({
   selector: "configcat-trello-add-feature-flag",
   templateUrl: "./add-feature-flag.component.html",
   styleUrls: ["./add-feature-flag.component.scss"],
-  imports: [
-    AuthorizationComponent,
-    LinkFeatureFlagComponent,
-  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [AuthorizationComponent, LinkFeatureFlagComponent],
 })
 export class AddFeatureFlagComponent extends BaseLinkFeatureFlagComponent {
-
   errorText: string | null = null;
 
   selectDropdownPanelChanged() {

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, ElementRef, inject, OnInit, viewChild } from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, inject, OnInit, viewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { MatDialog } from "@angular/material/dialog";
 import { RouterModule } from "@angular/router";
@@ -8,6 +8,7 @@ import { TrelloService } from "./services/trello-service";
 @Component({
   selector: "configcat-trello-root",
   templateUrl: "./app.component.html",
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [RouterModule],
 })
 export class AppComponent implements OnInit {
@@ -34,21 +35,17 @@ export class AppComponent implements OnInit {
       }
     });
 
-    const darkModeOn =
-    window.matchMedia
-    && window.matchMedia("(prefers-color-scheme: dark)").matches;
+    const darkModeOn = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
     // If dark mode is enabled then directly switch to the dark-theme
     if (darkModeOn) {
       this.themeService.setTheme(Theme.Dark);
     }
 
-    window
-      .matchMedia("(prefers-color-scheme: dark)")
-      .addEventListener("change", (e) => {
-        const turnOn = e.matches;
-        this.themeService.setTheme(turnOn ? Theme.Dark : Theme.Light);
-      });
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
+      const turnOn = e.matches;
+      this.themeService.setTheme(turnOn ? Theme.Dark : Theme.Light);
+    });
   }
 
   resize(dialogId?: string): void {
@@ -64,9 +61,6 @@ export class AppComponent implements OnInit {
         }
         void this.trelloService.sizeToHeight(height);
       }
-
     }, 300);
   }
-
 }
-

src/app/app.config.ts

@@ -2,23 +2,15 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from "@a
 import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } from "@angular/core";
 import { MatNativeDateModule } from "@angular/material/core";
 import { MatDialogModule } from "@angular/material/dialog";
-import {
-  provideRouter,
-  withComponentInputBinding,
-  withInMemoryScrolling,
-  withRouterConfig,
-} from "@angular/router";
+import { provideRouter, withComponentInputBinding, withInMemoryScrolling, withRouterConfig } from "@angular/router";
 import { CONFIGCAT_PUBLICAPI_UI_CONFIGURATION, provideConfigCatPublicApiUi } from "ng-configcat-publicapi-ui";
-import { environment } from "src/environments/environment";
+import { environment } from "../environments/environment";
 import { routes } from "./app-routing.module";
 import { ForbiddenInterceptor } from "./forbidden.interceptor";
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    importProvidersFrom(
-      MatDialogModule,
-      MatNativeDateModule
-    ),
+    importProvidersFrom(MatDialogModule, MatNativeDateModule),
     provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
     provideRouter(
       routes,

src/app/authorization/authorization.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from "@angular/core";
+import { ChangeDetectionStrategy, Component, inject, OnInit } from "@angular/core";
 import { AuthorizationComponent, AuthorizationModel } from "ng-configcat-publicapi-ui";
 import { AuthService } from "../services/auth.service";
 import { TrelloService } from "../services/trello-service";
@@ -7,6 +7,7 @@ import { TrelloService } from "../services/trello-service";
   selector: "configcat-trello-authorization",
   templateUrl: "./authorization.component.html",
   styleUrls: ["./authorization.component.scss"],
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [AuthorizationComponent],
 })
 export class AuthComponent implements OnInit {
@@ -19,13 +20,20 @@ export class AuthComponent implements OnInit {
 
   login(authorizationModel: AuthorizationModel) {
     this.authService
-      .setAuthorizationParameters({ basicAuthUsername: authorizationModel.basicAuthUsername, basicAuthPassword: authorizationModel.basicAuthPassword }, false)
+      .setAuthorizationParameters(
+        {
+          basicAuthUsername: authorizationModel.basicAuthUsername,
+          basicAuthPassword: authorizationModel.basicAuthPassword,
+        },
+        false
+      )
       .then(() => {
         this.trelloService.closePopup().catch(() => {
           console.log("trelloService closePopup failed.");
         });
         return this.trelloService.closeModal();
-      }).catch((error: unknown) => {
+      })
+      .catch((error: unknown) => {
         console.log("authService setAuthorizationParameters failed.", error);
       });
   }

src/app/create-feature-flag/create-feature-flag.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
 import { SettingType } from "ng-configcat-publicapi";
 import { AuthorizationComponent, CreateFeatureFlagComponent, FormHelper } from "ng-configcat-publicapi-ui";
 import { BaseLinkFeatureFlagComponent } from "../base-link-feature-flag.component";
@@ -8,10 +8,8 @@ import { ErrorHandler } from "../services/error-handler";
   selector: "configcat-trello-create-feature-flag",
   templateUrl: "./create-feature-flag.component.html",
   styleUrls: ["./create-feature-flag.component.scss"],
-  imports: [
-    AuthorizationComponent,
-    CreateFeatureFlagComponent,
-  ],
+  changeDetection: ChangeDetectionStrategy.Eager,
+  imports: [AuthorizationComponent, CreateFeatureFlagComponent],
 })
 export class CreateLinkFeatureFlagComponent extends BaseLinkFeatureFlagComponent {
   SettingTypeEnum = SettingType;