chore(console): Angular 20 #10690 (#10768)

# Which Problems Are Solved


# How the Problems Are Solved

# Additional Changes

# Additional Context
- Closes #10690

console/angular.json

@@ -15,11 +15,13 @@
       "prefix": "cnsl",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
-            "outputPath": "dist/console",
+            "outputPath": {
+              "browser": "",
+              "base": "dist/console"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
@@ -32,7 +34,13 @@
             "styles": ["src/styles.scss"],
             "scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"],
             "stylePreprocessorOptions": {
-              "includePaths": ["node_modules"]
+              "sass": {
+                "silenceDeprecations": ["import", "mixed-decls"]
+              },
+              "includePaths": [
+                "node_modules",
+                "."
+              ]
             },
             "allowedCommonJsDependencies": [
               "opentype.js",
@@ -46,7 +54,8 @@
               "file-saver",
               "qrcode",
               "codemirror"
-            ]
+            ],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -74,9 +83,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -85,26 +92,56 @@
           "defaultConfiguration": "development"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
-
+          "options": {
+            "prebundle": {
+              "exclude": [
+                "google-protobuf",
+                "google-protobuf/google/protobuf/timestamp_pb.js",
+                "google-protobuf/google/protobuf/descriptor_pb.js",
+                "google-protobuf/google/protobuf/struct_pb.js",
+                "google-protobuf/google/protobuf/duration_pb.js",
+                "i18n-iso-countries/langs/de.json",
+                "i18n-iso-countries/langs/en.json",
+                "i18n-iso-countries/langs/es.json",
+                "i18n-iso-countries/langs/fr.json",
+                "i18n-iso-countries/langs/id.json",
+                "i18n-iso-countries/langs/it.json",
+                "i18n-iso-countries/langs/ja.json",
+                "i18n-iso-countries/langs/pl.json",
+                "i18n-iso-countries/langs/zh.json",
+                "i18n-iso-countries/langs/bg.json",
+                "i18n-iso-countries/langs/pt.json",
+                "i18n-iso-countries/langs/mk.json",
+                "i18n-iso-countries/langs/ru.json",
+                "i18n-iso-countries/langs/cs.json",
+                "i18n-iso-countries/langs/nl.json",
+                "i18n-iso-countries/langs/sv.json",
+                "i18n-iso-countries/langs/hu.json",
+                "i18n-iso-countries/langs/ko.json",
+                "i18n-iso-countries/langs/ro.json",
+                "i18n-iso-countries/langs/tr.json"
+              ]
+            }
+          },
           "configurations": {
             "production": {
-              "browserTarget": "console:build:production"
+              "buildTarget": "console:build:production"
             },
             "development": {
-              "browserTarget": "console:build:development"
+              "buildTarget": "console:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "console:build"
+            "buildTarget": "console:build"
           }
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
@@ -125,6 +162,33 @@
   },
   "cli": {
     "analytics": false,
-    "schematicCollections": ["@angular-eslint/schematics"]
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "packageManager": "pnpm"
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

console/package.json

@@ -15,37 +15,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^16.2.12",
+    "@angular/animations": "^20.3.1",
-    "@angular/cdk": "^16.2.14",
+    "@angular/cdk": "^20.2.4",
-    "@angular/common": "^16.2.12",
+    "@angular/common": "^20.3.1",
-    "@angular/compiler": "^16.2.12",
+    "@angular/compiler": "^20.3.1",
-    "@angular/core": "^16.2.12",
+    "@angular/core": "^20.3.1",
-    "@angular/forms": "^16.2.12",
+    "@angular/forms": "^20.3.1",
-    "@angular/material": "^16.2.14",
+    "@angular/material": "^20.2.4",
-    "@angular/material-moment-adapter": "^16.2.14",
+    "@angular/material-moment-adapter": "^20.2.4",
-    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser": "^20.3.1",
-    "@angular/platform-browser-dynamic": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^20.3.1",
-    "@angular/router": "^16.2.12",
+    "@angular/router": "^20.3.1",
-    "@angular/service-worker": "^16.2.12",
+    "@angular/service-worker": "^20.3.1",
     "@bufbuild/protobuf": "2.6.3",
     "@connectrpc/connect": "~2.0.0",
     "@connectrpc/connect-web": "~2.0.0",
     "@ctrl/ngx-codemirror": "^6.1.0",
-    "@fortawesome/angular-fontawesome": "^0.13.0",
+    "@fortawesome/angular-fontawesome": "^3.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@ng-icons/core": "^25.0.0",
+    "@netlify/build-info": "^10.0.7",
-    "@ng-icons/heroicons": "^25.0.0",
+    "@ng-icons/core": "^32.1.0",
-    "@ngx-translate/core": "^15.0.0",
+    "@ng-icons/heroicons": "^32.1.0",
+    "@ngx-translate/core": "^17.0.0",
     "@tanstack/angular-query-experimental": "^5.85.6",
     "@zitadel/client": "workspace:*",
     "@zitadel/proto": "workspace:*",
-    "angular-oauth2-oidc": "^15.0.1",
+    "angular-oauth2-oidc": "^20.0.2",
-    "angularx-qrcode": "^16.0.2",
+    "angularx-qrcode": "^20.0.0",
     "buffer": "^6.0.3",
     "codemirror": "^5.65.19",
     "file-saver": "^2.0.5",
-    "flag-icons": "^7.3.2",
+    "flag-icons": "^7.5.0",
     "google-protobuf": "~3.21.4",
     "grpc-web": "~1.5.0",
     "i18n-iso-countries": "^7.14.0",
@@ -59,20 +60,19 @@
     "tinycolor2": "^1.6.0",
     "tslib": "^2.7.0",
     "uuid": "^10.0.0",
-    "zone.js": "~0.13.3"
+    "zone.js": "~0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.2.2",
     "@angular-eslint/builder": "18.3.0",
     "@angular-eslint/eslint-plugin": "18.0.0",
     "@angular-eslint/eslint-plugin-template": "18.0.0",
-    "@angular-eslint/schematics": "16.2.0",
+    "@angular-eslint/schematics": "19.8.1",
-    "@angular-eslint/template-parser": "18.3.0",
+    "@angular-eslint/template-parser": "19.8.1",
-    "@angular/cli": "^16.2.15",
+    "@angular/build": "^20.3.2",
-    "@angular/compiler-cli": "^16.2.5",
+    "@angular/cli": "^20.3.2",
-    "@angular/language-service": "^18.2.4",
+    "@angular/compiler-cli": "^20.3.1",
+    "@angular/language-service": "^20.3.1",
     "@bufbuild/buf": "~1.55.1",
-    "@netlify/framework-info": "^9.8.13",
     "@types/file-saver": "^2.0.7",
     "@types/google-protobuf": "~3.15.12",
     "@types/jasmine": "~5.1.4",
@@ -95,6 +95,6 @@
     "karma-jasmine-html-reporter": "^2.1.0",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "typescript": "5.1"
+    "typescript": "5.9.2"
   }
 }

console/src/app/app.component.ts

@@ -1,7 +1,17 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { OverlayContainer } from '@angular/cdk/overlay';
-import { DOCUMENT, ViewportScroller } from '@angular/common';
+import { ViewportScroller } from '@angular/common';
-import { Component, DestroyRef, effect, HostBinding, HostListener, Inject, OnDestroy, ViewChild } from '@angular/core';
+import {
+  Component,
+  DestroyRef,
+  effect,
+  HostBinding,
+  HostListener,
+  Inject,
+  OnDestroy,
+  ViewChild,
+  DOCUMENT,
+} from '@angular/core';
 import { MatIconRegistry } from '@angular/material/icon';
 import { MatDrawer } from '@angular/material/sidenav';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -30,6 +40,7 @@ import { NewAuthService } from './services/new-auth.service';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
   animations: [toolbarAnimation, ...navAnimations, accountCard, routeAnimations, adminLineAnimation],
+  standalone: false,
 })
 export class AppComponent {
   @ViewChild('drawer') public drawer!: MatDrawer;

console/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { CommonModule, registerLocaleData } from '@angular/common';
-import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import localeBg from '@angular/common/locales/bg';
 import localeDe from '@angular/common/locales/de';
 import localeCs from '@angular/common/locales/cs';
@@ -20,7 +20,7 @@ import localeHu from '@angular/common/locales/hu';
 import localeKo from '@angular/common/locales/ko';
 import localeRo from '@angular/common/locales/ro';
 import localeTr from '@angular/common/locales/tr';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { NgModule, inject, provideAppInitializer } from '@angular/core';
 import { MatNativeDateModule } from '@angular/material/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
@@ -147,8 +147,11 @@ const authConfig: AuthConfig = {
 
 @NgModule({
   declarations: [AppComponent],
+  bootstrap: [AppComponent],
+  exports: [],
   imports: [
     AppRoutingModule,
+
     CommonModule,
     BrowserModule,
     HeaderModule,
@@ -164,7 +167,6 @@ const authConfig: AuthConfig = {
     HasRoleModule,
     InfoOverlayModule,
     BrowserAnimationsModule,
-    HttpClientModule,
     MatIconModule,
     MatTooltipModule,
     FooterModule,
@@ -182,18 +184,14 @@ const authConfig: AuthConfig = {
     ThemeService,
     EnvironmentService,
     ExhaustedService,
-    {
+    provideAppInitializer(() => {
-      provide: APP_INITIALIZER,
+      const initializerFn = appInitializerFn(inject(GrpcService));
-      useFactory: appInitializerFn,
+      return initializerFn();
-      multi: true,
+    }),
-      deps: [GrpcService],
+    provideAppInitializer(() => {
-    },
+      const initializerFn = stateHandlerFn(inject(StatehandlerService));
-    {
+      return initializerFn();
-      provide: APP_INITIALIZER,
+    }),
-      useFactory: stateHandlerFn,
-      multi: true,
-      deps: [StatehandlerService],
-    },
     {
       provide: AuthConfig,
       useValue: authConfig,
@@ -258,9 +256,8 @@ const authConfig: AuthConfig = {
     provideNgIconsConfig({
       size: '1rem',
     }),
+    provideHttpClient(withInterceptorsFromDi()),
   ],
-  bootstrap: [AppComponent],
-  exports: [],
 })
 export class AppModule {
   constructor() {}

console/src/app/components/copy-row/copy-row.component.ts

@@ -6,7 +6,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 
 @Component({
-  standalone: true,
   selector: 'cnsl-copy-row',
   templateUrl: './copy-row.component.html',
   styleUrls: ['./copy-row.component.scss'],

console/src/app/components/feature-toggle/feature-toggle.component.ts

@@ -11,7 +11,6 @@ import { ReplaySubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 @Component({
-  standalone: true,
   selector: 'cnsl-feature-toggle',
   templateUrl: './feature-toggle.component.html',
   styleUrls: ['./feature-toggle.component.scss'],

console/src/app/components/feature-toggle/login-v2-feature-toggle/login-v2-feature-toggle.component.ts

@@ -12,7 +12,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
-  standalone: true,
   selector: 'cnsl-login-v2-feature-toggle',
   templateUrl: './login-v2-feature-toggle.component.html',
   imports: [

console/src/app/components/features/features.component.ts

@@ -65,7 +65,6 @@ export type ToggleStateKeys = keyof ToggleStates;
     FeatureToggleComponent,
     LoginV2FeatureToggleComponent,
   ],
-  standalone: true,
   selector: 'cnsl-features',
   templateUrl: './features.component.html',
   styleUrls: ['./features.component.scss'],

console/src/app/components/framework-autocomplete/framework-autocomplete.component.ts

@@ -12,7 +12,6 @@ import { Observable, map, of, startWith, switchMap, tap } from 'rxjs';
 import { Framework } from '../quickstart/quickstart.component';
 
 @Component({
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'cnsl-framework-autocomplete',
   templateUrl: './framework-autocomplete.component.html',

console/src/app/components/framework-change/framework-change-dialog.component.ts

@@ -17,7 +17,6 @@ import { TranslateModule } from '@ngx-translate/core';
   selector: 'cnsl-framework-change-dialog',
   templateUrl: './framework-change-dialog.component.html',
   styleUrls: ['./framework-change-dialog.component.scss'],
-  standalone: true,
   imports: [MatButtonModule, MatDialogModule, TranslateModule, FrameworkAutocompleteComponent],
 })
 export class FrameworkChangeDialogComponent {

console/src/app/components/framework-change/framework-change.component.ts

@@ -10,7 +10,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { FrameworkChangeDialogComponent } from './framework-change-dialog.component';
 
 @Component({
-  standalone: true,
   selector: 'cnsl-framework-change',
   templateUrl: './framework-change.component.html',
   styleUrls: ['./framework-change.component.scss'],

console/src/app/components/oidc-configuration/oidc-configuration.component.ts

@@ -3,9 +3,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
-import type { FrameworkName } from '@netlify/framework-info/lib/generated/frameworkNames';
+import type { getFramework } from '@netlify/build-info';
 import { AddOIDCAppRequest } from 'src/app/proto/generated/zitadel/management_pb';
 
+type FrameworkName = Parameters<typeof getFramework>[0];
+
 export type FrameworkDefinition = {
   id?: FrameworkName | string;
   title: string;
@@ -20,7 +22,6 @@ export type Framework = FrameworkDefinition & {
 };
 
 @Component({
-  standalone: true,
   selector: 'cnsl-oidc-app-configuration',
   templateUrl: './oidc-configuration.component.html',
   styleUrls: ['./oidc-configuration.component.scss'],

console/src/app/components/quickstart/quickstart.component.ts

@@ -4,9 +4,11 @@ import { RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import frameworkDefinition from '../../../../../docs/frameworks.json';
 import { MatButtonModule } from '@angular/material/button';
-import type { FrameworkName } from '@netlify/framework-info/lib/generated/frameworkNames';
+import type { getFramework } from '@netlify/build-info';
 import { OIDC_CONFIGURATIONS } from 'src/app/utils/framework';
 
+type FrameworkName = Parameters<typeof getFramework>[0];
+
 export type FrameworkDefinition = {
   id?: FrameworkName | string;
   title: string;
@@ -22,7 +24,6 @@ export type Framework = FrameworkDefinition & {
 };
 
 @Component({
-  standalone: true,
   selector: 'cnsl-quickstart',
   templateUrl: './quickstart.component.html',
   styleUrls: ['./quickstart.component.scss'],

console/src/app/directives/back/back.directive.ts

@@ -5,6 +5,7 @@ import { NavigationService } from 'src/app/services/navigation.service';
 
 @Directive({
   selector: '[cnslBack]',
+  standalone: false,
 })
 export class BackDirective {
   new: Boolean = false;

console/src/app/directives/copy-to-clipboard/copy-to-clipboard.directive.ts

@@ -2,6 +2,7 @@ import { Directive, EventEmitter, HostListener, Input, Output } from '@angular/c
 
 @Directive({
   selector: '[cnslCopyToClipboard]',
+  standalone: false,
 })
 export class CopyToClipboardDirective {
   @Input() valueToCopy: string = '';

console/src/app/directives/dropzone/dropzone.directive.ts

@@ -2,6 +2,7 @@ import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
 
 @Directive({
   selector: '[cnslDropzone]',
+  standalone: false,
 })
 export class DropzoneDirective {
   @Output() dropped: EventEmitter<FileList> = new EventEmitter<FileList>();

console/src/app/directives/has-role/has-role.directive.ts

@@ -4,6 +4,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 @Directive({
   selector: '[cnslHasRole]',
+  standalone: false,
 })
 export class HasRoleDirective {
   private hasView: boolean = false;

console/src/app/directives/type-safe-cell-def/type-safe-cell-def.directive.ts

@@ -6,6 +6,7 @@ import { CdkCellDef } from '@angular/cdk/table';
 @Directive({
   selector: '[cnslCellDef]',
   providers: [{ provide: CdkCellDef, useExisting: TypeSafeCellDefDirective }],
+  standalone: false,
 })
 export class TypeSafeCellDefDirective<T> extends MatCellDef {
   @Input({ required: true }) cnslCellDefDataSource!: DataSource<T>;

console/src/app/modules/accounts-card/accounts-card.component.ts

@@ -38,6 +38,7 @@ interface V1AndV2Session {
   selector: 'cnsl-accounts-card',
   templateUrl: './accounts-card.component.html',
   styleUrls: ['./accounts-card.component.scss'],
+  standalone: false,
 })
 export class AccountsCardComponent {
   @Input({ required: true })

console/src/app/modules/action-keys/action-keys.component.ts

@@ -16,6 +16,7 @@ export enum ActionKeysType {
   selector: 'cnsl-action-keys',
   templateUrl: './action-keys.component.html',
   styleUrls: ['./action-keys.component.scss'],
+  standalone: false,
 })
 export class ActionKeysComponent implements AfterViewInit {
   @Input() type: ActionKeysType = ActionKeysType.ADD;

console/src/app/modules/actions-two/actions-two-actions/actions-two-actions-table/actions-two-actions-table.component.ts

@@ -11,6 +11,7 @@ import { CorrectlyTypedExecution } from '../../actions-two-add-action/actions-tw
   templateUrl: './actions-two-actions-table.component.html',
   styleUrls: ['./actions-two-actions-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActionsTwoActionsTableComponent {
   @Output()

console/src/app/modules/actions-two/actions-two-actions/actions-two-actions.component.ts

@@ -23,6 +23,7 @@ import { ExecutionFieldName } from '@zitadel/proto/zitadel/action/v2beta/query_p
   templateUrl: './actions-two-actions.component.html',
   styleUrls: ['./actions-two-actions.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActionsTwoActionsComponent {
   protected readonly refresh$ = new Subject<true>();

console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-autocomplete-input/actions-two-add-action-autocomplete-input.component.ts

@@ -29,7 +29,6 @@ class Filter implements PipeTransform {
   selector: 'cnsl-actions-two-add-action-autocomplete-input',
   templateUrl: './actions-two-add-action-autocomplete-input.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
   imports: [
     AsyncPipe,
     Filter,

console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-condition/actions-two-add-action-condition.component.ts

@@ -28,7 +28,6 @@ export type ConditionTypeValue<T extends ConditionType> = Omit<
 >;
 
 @Component({
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'cnsl-actions-two-add-action-condition',
   templateUrl: './actions-two-add-action-condition.component.html',

console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-dialog.component.ts

@@ -53,7 +53,6 @@ export type ActionTwoAddActionDialogResult = MessageInitShape<typeof SetExecutio
   selector: 'cnsl-actions-two-add-action-dialog',
   templateUrl: './actions-two-add-action-dialog.component.html',
   styleUrls: ['./actions-two-add-action-dialog.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatButtonModule,

console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-target/actions-two-add-action-target.component.ts

@@ -35,7 +35,6 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TableActionsModule } from 'src/app/modules/table-actions/table-actions.module';
 
 @Component({
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'cnsl-actions-two-add-action-target',
   templateUrl: './actions-two-add-action-target.component.html',

console/src/app/modules/actions-two/actions-two-add-action/actions-two-add-action-type/actions-two-add-action-type.component.ts

@@ -16,7 +16,6 @@ import { ConditionType } from '../actions-two-add-action-condition/actions-two-a
 // }
 
 @Component({
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'cnsl-actions-two-add-action-type',
   templateUrl: './actions-two-add-action-type.component.html',

console/src/app/modules/actions-two/actions-two-add-target/actions-two-add-target-dialog.component.ts

@@ -22,7 +22,6 @@ type TargetTypes = ActionTwoAddTargetDialogComponent['targetTypes'][number];
   selector: 'cnsl-actions-two-add-target-dialog',
   templateUrl: './actions-two-add-target-dialog.component.html',
   styleUrls: ['./actions-two-add-target-dialog.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatButtonModule,

console/src/app/modules/actions-two/actions-two-targets/actions-two-targets-table/actions-two-targets-table.component.ts

@@ -10,6 +10,7 @@ import { toSignal } from '@angular/core/rxjs-interop';
   templateUrl: './actions-two-targets-table.component.html',
   styleUrls: ['./actions-two-targets-table.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActionsTwoTargetsTableComponent {
   @Output()

console/src/app/modules/actions-two/actions-two-targets/actions-two-targets.component.ts

@@ -19,6 +19,7 @@ import { InfoSectionType } from '../../info-section/info-section.component';
   templateUrl: './actions-two-targets.component.html',
   styleUrls: ['./actions-two-targets.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ActionsTwoTargetsComponent {
   protected readonly targets$: Observable<Target[]>;

console/src/app/modules/add-key-dialog/add-key-dialog.component.ts

@@ -12,6 +12,7 @@ export enum AddKeyDialogType {
   selector: 'cnsl-add-key-dialog',
   templateUrl: './add-key-dialog.component.html',
   styleUrls: ['./add-key-dialog.component.scss'],
+  standalone: false,
 })
 export class AddKeyDialogComponent {
   public startDate: Date = new Date();

console/src/app/modules/add-member-dialog/member-create-dialog.component.ts

@@ -21,6 +21,7 @@ export enum CreationType {
   selector: 'cnsl-member-create-dialog',
   templateUrl: './member-create-dialog.component.html',
   styleUrls: ['./member-create-dialog.component.scss'],
+  standalone: false,
 })
 export class MemberCreateDialogComponent {
   private projectId: string = '';

console/src/app/modules/add-member-roles-dialog/add-member-roles-dialog.component.ts

@@ -6,6 +6,7 @@ import { getMembershipColor } from 'src/app/utils/color';
   selector: 'cnsl-add-member-roles-dialog',
   templateUrl: './add-member-roles-dialog.component.html',
   styleUrls: ['./add-member-roles-dialog.component.scss'],
+  standalone: false,
 })
 export class AddMemberRolesDialogComponent {
   public allRoles: string[] = [];

console/src/app/modules/add-token-dialog/add-token-dialog.component.ts

@@ -6,6 +6,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
   selector: 'cnsl-add-token-dialog',
   templateUrl: './add-token-dialog.component.html',
   styleUrls: ['./add-token-dialog.component.scss'],
+  standalone: false,
 })
 export class AddTokenDialogComponent {
   public startDate: Date = new Date();

console/src/app/modules/app-card/app-card.component.ts

@@ -5,6 +5,7 @@ import { OIDCAppType } from 'src/app/proto/generated/zitadel/app_pb';
   selector: 'cnsl-app-card',
   templateUrl: './app-card.component.html',
   styleUrls: ['./app-card.component.scss'],
+  standalone: false,
 })
 export class AppCardComponent {
   @Input() public outline: boolean = false;

console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.ts

@@ -25,6 +25,7 @@ export interface RadioItemAuthType {
   selector: 'cnsl-auth-method-radio',
   templateUrl: './app-auth-method-radio.component.html',
   styleUrls: ['./app-auth-method-radio.component.scss'],
+  standalone: false,
 })
 export class AppAuthMethodRadioComponent {
   @Input() current: string = '';

console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.ts

@@ -5,6 +5,7 @@ import { RadioItemAppType, WEB_TYPE } from 'src/app/pages/projects/apps/authtype
   selector: 'cnsl-type-radio',
   templateUrl: './app-type-radio.component.html',
   styleUrls: ['./app-type-radio.component.scss'],
+  standalone: false,
 })
 export class AppTypeRadioComponent {
   @Input() selected: RadioItemAppType = WEB_TYPE;

console/src/app/modules/avatar/avatar.component.ts

@@ -6,6 +6,7 @@ import { Color, getColorHash } from 'src/app/utils/color';
   selector: 'cnsl-avatar',
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.scss'],
+  standalone: false,
 })
 export class AvatarComponent implements OnInit {
   @Input() name: string = '';

console/src/app/modules/card/card.component.ts

@@ -5,6 +5,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CardComponent {
   @Input() public title: string = '';

console/src/app/modules/changes/changes.component.html

@@ -5,7 +5,7 @@
 <div class="scroll-container">
   <li class="item" *ngFor="let hist of data | async; index as histindex">
     <span *ngIf="hist.values[0].dates[0]" class="date">
-      {{ hist.values[0].dates[0] | timestampToDate | localizedDate: 'dd. MMM YYYY' }}
+      {{ hist.values[0].dates[0] | timestampToDate | localizedDate: 'dd. MMM yyyy' }}
     </span>
     <div class="item" *ngFor="let dayelement of hist.values; index as i">
       <div class="row">
@@ -28,7 +28,7 @@
               <span class="msg">{{ action.localizedMessage }}</span>
               <span
                 class="block"
-                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MM YYYY, HH:mm:ss.SSS' }}"
+                matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MM yyyy, HH:mm:ss.SSS' }}"
                 >{{ dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm' }}</span
               >
             </div>

console/src/app/modules/changes/changes.component.ts

@@ -51,6 +51,7 @@ type ListChanges =
   selector: 'cnsl-changes',
   templateUrl: './changes.component.html',
   styleUrls: ['./changes.component.scss'],
+  standalone: false,
 })
 export class ChangesComponent implements OnInit {
   @Input({ required: true }) public changeType!: ChangeType;

console/src/app/modules/client-keys/client-keys.component.ts

@@ -19,6 +19,7 @@ import { PageEvent, PaginatorComponent } from '../paginator/paginator.component'
   selector: 'cnsl-client-keys',
   templateUrl: './client-keys.component.html',
   styleUrls: ['./client-keys.component.scss'],
+  standalone: false,
 })
 export class ClientKeysComponent implements OnInit {
   @Input() projectId!: string;

console/src/app/modules/contributors/contributors.component.ts

@@ -25,6 +25,7 @@ import { Type } from 'src/app/proto/generated/zitadel/user_pb';
       ]),
     ]),
   ],
+  standalone: false,
 })
 export class ContributorsComponent {
   @Input() title: string = '';

console/src/app/modules/create-layout/create-layout.component.ts

@@ -4,6 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   selector: 'cnsl-create-layout',
   templateUrl: './create-layout.component.html',
   styleUrls: ['./create-layout.component.scss'],
+  standalone: false,
 })
 export class CreateLayoutComponent {
   @Input() currentCreateStep: number = 1;

console/src/app/modules/detail-layout/detail-layout.component.ts

@@ -4,6 +4,7 @@ import { Component, Input } from '@angular/core';
   selector: 'cnsl-detail-layout',
   templateUrl: './detail-layout.component.html',
   styleUrls: ['./detail-layout.component.scss'],
+  standalone: false,
 })
 export class DetailLayoutComponent {
   @Input() hasBackButton: boolean = true;

console/src/app/modules/display-json-dialog/display-json-dialog.component.ts

@@ -7,6 +7,7 @@ import { Event } from 'src/app/proto/generated/zitadel/event_pb';
   selector: 'cnsl-display-json-dialog',
   templateUrl: './display-json-dialog.component.html',
   styleUrls: ['./display-json-dialog.component.scss'],
+  standalone: false,
 })
 export class DisplayJsonDialogComponent {
   public event?: Event;

console/src/app/modules/domains/add-domain-dialog/add-domain-dialog.component.ts

@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
   selector: 'cnsl-add-domain-dialog',
   templateUrl: './add-domain-dialog.component.html',
   styleUrls: ['./add-domain-dialog.component.scss'],
+  standalone: false,
 })
 export class AddDomainDialogComponent {
   public newdomain: string = '';

console/src/app/modules/domains/domain-verification/domain-verification.component.ts

@@ -11,6 +11,7 @@ import { ToastService } from 'src/app/services/toast.service';
   selector: 'cnsl-domain-verification',
   templateUrl: './domain-verification.component.html',
   styleUrls: ['./domain-verification.component.scss'],
+  standalone: false,
 })
 export class DomainVerificationComponent {
   public domain?: Domain.AsObject;

console/src/app/modules/domains/domains.component.ts

@@ -14,6 +14,7 @@ import { DomainVerificationComponent } from './domain-verification/domain-verifi
   selector: 'cnsl-domains',
   templateUrl: './domains.component.html',
   styleUrls: ['./domains.component.scss'],
+  standalone: false,
 })
 export class DomainsComponent implements OnInit {
   public domains: Domain.AsObject[] = [];

console/src/app/modules/edit-text/edit-text.component.ts

@@ -9,6 +9,7 @@ import { InfoSectionType } from '../info-section/info-section.component';
   selector: 'cnsl-edit-text',
   templateUrl: './edit-text.component.html',
   styleUrls: ['./edit-text.component.scss'],
+  standalone: false,
 })
 export class EditTextComponent implements OnInit, OnDestroy {
   @Input() label: string = '';

console/src/app/modules/events/events.component.ts

@@ -31,6 +31,7 @@ type LoadRequest = {
   selector: 'cnsl-events',
   templateUrl: './events.component.html',
   styleUrls: ['./events.component.scss'],
+  standalone: false,
 })
 export class EventsComponent implements OnDestroy {
   public INITPAGESIZE = 20;

console/src/app/modules/failed-events/failed-events.component.ts

@@ -12,6 +12,7 @@ import { ToastService } from 'src/app/services/toast.service';
   selector: 'cnsl-iam-failed-events',
   templateUrl: './failed-events.component.html',
   styleUrls: ['./failed-events.component.scss'],
+  standalone: false,
 })
 export class FailedEventsComponent implements AfterViewInit {
   @ViewChild(MatPaginator) public eventPaginator!: MatPaginator;

console/src/app/modules/filter-events/filter-events.component.ts

@@ -34,6 +34,7 @@ function dateToTs(date: Date): Timestamp {
   selector: 'cnsl-filter-events',
   templateUrl: './filter-events.component.html',
   styleUrls: ['./filter-events.component.scss'],
+  standalone: false,
 })
 export class FilterEventsComponent implements OnInit {
   // Make enum available in template

console/src/app/modules/filter-org/filter-org.component.ts

@@ -26,6 +26,7 @@ enum SubQuery {
   selector: 'cnsl-filter-org',
   templateUrl: './filter-org.component.html',
   styleUrls: ['./filter-org.component.scss'],
+  standalone: false,
 })
 export class FilterOrgComponent extends FilterComponent implements OnInit {
   public SubQuery: any = SubQuery;

console/src/app/modules/filter-project/filter-project.component.ts

@@ -17,6 +17,7 @@ enum SubQuery {
   selector: 'cnsl-filter-project',
   templateUrl: './filter-project.component.html',
   styleUrls: ['./filter-project.component.scss'],
+  standalone: false,
 })
 export class FilterProjectComponent extends FilterComponent implements OnInit {
   public SubQuery: any = SubQuery;

console/src/app/modules/filter-user-grants/filter-user-grants.component.ts

@@ -24,6 +24,7 @@ enum SubQuery {
   selector: 'cnsl-filter-user-grants',
   templateUrl: './filter-user-grants.component.html',
   styleUrls: ['./filter-user-grants.component.scss'],
+  standalone: false,
 })
 export class FilterUserGrantsComponent extends FilterComponent implements OnInit {
   public SubQuery: any = SubQuery;

console/src/app/modules/filter-user/filter-user.component.ts

@@ -26,6 +26,7 @@ enum SubQuery {
   selector: 'cnsl-filter-user',
   templateUrl: './filter-user.component.html',
   styleUrls: ['./filter-user.component.scss'],
+  standalone: false,
 })
 export class FilterUserComponent extends FilterComponent implements OnInit {
   public SubQuery: any = SubQuery;

console/src/app/modules/filter/filter.component.ts

@@ -22,6 +22,7 @@ type FilterSearchQueryAsObject =
   selector: 'cnsl-filter',
   templateUrl: './filter.component.html',
   styleUrls: ['./filter.component.scss'],
+  standalone: false,
 })
 export class FilterComponent {
   @Output() public filterChanged: EventEmitter<FilterSearchQuery[]> = new EventEmitter();

console/src/app/modules/footer/footer.component.ts

@@ -7,6 +7,7 @@ import { faXTwitter } from '@fortawesome/free-brands-svg-icons';
   selector: 'cnsl-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
+  standalone: false,
 })
 export class FooterComponent {
   public faXTwitter = faXTwitter;

console/src/app/modules/form-field/error/error.directive.ts

@@ -12,6 +12,7 @@ export const CNSL_ERROR = new InjectionToken<CnslErrorDirective>('CnslError');
     '[attr.id]': 'id',
   },
   providers: [{ provide: CNSL_ERROR, useExisting: CnslErrorDirective }],
+  standalone: false,
 })
 export class CnslErrorDirective {
   @Input() id: string = `cnsl-error-${nextUniqueId++}`;

console/src/app/modules/form-field/field/form-field.component.ts

@@ -60,6 +60,7 @@ interface ValidationError {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [cnslFormFieldAnimations.transitionMessages],
+  standalone: false,
 })
 export class CnslFormFieldComponent extends CnslFormFieldBase implements OnDestroy, AfterContentInit, AfterViewInit {
   focused: boolean = false;

console/src/app/modules/header/header.component.ts

@@ -13,6 +13,7 @@ import { Organization } from '@zitadel/proto/zitadel/org/v2/org_pb';
   selector: 'cnsl-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss'],
+  standalone: false,
 })
 export class HeaderComponent {
   @Input() public isDarkTheme: boolean = true;

console/src/app/modules/iam-views/iam-views.component.ts

@@ -12,6 +12,7 @@ import { Breadcrumb, BreadcrumbService, BreadcrumbType } from 'src/app/services/
   selector: 'cnsl-iam-views',
   templateUrl: './iam-views.component.html',
   styleUrls: ['./iam-views.component.scss'],
+  standalone: false,
 })
 export class IamViewsComponent implements AfterViewInit {
   @ViewChild(MatSort) sort!: MatSort;

console/src/app/modules/idp-table/idp-table.component.ts

@@ -43,6 +43,7 @@ import { first } from 'rxjs/operators';
   selector: 'cnsl-idp-table',
   templateUrl: './idp-table.component.html',
   styleUrls: ['./idp-table.component.scss'],
+  standalone: false,
 })
 export class IdpTableComponent implements OnInit, OnDestroy {
   @Input() public serviceType!: PolicyComponentServiceType;

console/src/app/modules/info-dialog/info-dialog.component.ts

@@ -7,6 +7,7 @@ import { InfoSectionType } from '../info-section/info-section.component';
   selector: 'cnsl-info-dialog',
   templateUrl: './info-dialog.component.html',
   styleUrls: ['./info-dialog.component.scss'],
+  standalone: false,
 })
 export class InfoDialogComponent {
   public confirm: string = '';

console/src/app/modules/info-overlay/info-overlay.component.ts

@@ -7,6 +7,7 @@ export const OVERLAY_DATA = new InjectionToken<any>('OVERLAY_DATA');
   selector: 'cnsl-info-overlay',
   templateUrl: './info-overlay.component.html',
   styleUrls: ['./info-overlay.component.scss'],
+  standalone: false,
 })
 export class InfoOverlayComponent {
   constructor(

console/src/app/modules/info-row/info-row.component.html

@@ -21,14 +21,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECREATED' | translate }}</p>
     <p *ngIf="creationDate" class="info-row-desc">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'USER.DETAILS.DATECHANGED' | translate }}</p>
     <p *ngIf="changeDate" class="info-row-desc">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
@@ -97,14 +97,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="instance?.details?.creationDate as creationDate" class="info-row-desc">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="instance?.details?.changeDate as changeDate" class="info-row-desc">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 </div>
@@ -144,14 +144,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.CREATIONDATE' | translate }}</p>
     <p *ngIf="org?.details?.creationDate as creationDate" class="info-row-desc">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'ORG.PAGES.DATECHANGED' | translate }}</p>
     <p *ngIf="org?.details?.changeDate as changeDate" class="info-row-desc">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 </div>
@@ -179,14 +179,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="project?.details?.creationDate as creationDate" class="info-row-desc">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="project?.details?.changeDate as changeDate" class="info-row-desc">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 </div>
@@ -219,14 +219,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.CREATEDON' | translate }}</p>
     <p *ngIf="grantedProject?.details?.creationDate as creationDate" class="info-row-desc">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'PROJECT.PAGES.LASTMODIFIED' | translate }}</p>
     <p *ngIf="grantedProject?.details?.changeDate as changeDate" class="info-row-desc">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 </div>
@@ -265,14 +265,14 @@
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECREATED' | translate }}</p>
       <p *ngIf="app?.details?.creationDate as creationDate" class="info-row-desc">
-        {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+        {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
       </p>
     </div>
 
     <div class="info-wrapper">
       <p class="info-row-title">{{ 'APP.PAGES.DATECHANGED' | translate }}</p>
       <p *ngIf="app?.details?.changeDate as changeDate" class="info-row-desc">
-        {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+        {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
       </p>
     </div>
 
@@ -318,14 +318,14 @@
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECREATED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp?.details?.creationDate as creationDate">
-      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ creationDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 
   <div class="info-wrapper">
     <p class="info-row-title">{{ 'IDP.DETAIL.DATECHANGED' | translate }}</p>
     <p class="info-row-desc" *ngIf="idp?.details?.changeDate as changeDate">
-      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}
+      {{ changeDate | timestampToDate | localizedDate: 'dd. MMMM yyyy, HH:mm' }}
     </p>
   </div>
 

console/src/app/modules/info-row/info-row.component.ts

@@ -15,6 +15,7 @@ import { Organization as OrgV2 } from '@zitadel/proto/zitadel/org/v2/org_pb';
   selector: 'cnsl-info-row',
   templateUrl: './info-row.component.html',
   styleUrls: ['./info-row.component.scss'],
+  standalone: false,
 })
 export class InfoRowComponent {
   @Input() public user?: User.AsObject | UserV2 | UserV1;

console/src/app/modules/info-section/info-section.component.ts

@@ -11,6 +11,7 @@ export enum InfoSectionType {
   templateUrl: './info-section.component.html',
   styleUrls: ['./info-section.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class InfoSectionComponent {
   @Input() type: InfoSectionType = InfoSectionType.INFO;

console/src/app/modules/input/input.directive.spec.ts

@@ -12,6 +12,7 @@ import { By } from '@angular/platform-browser';
 
 @Component({
   template: `<input appInputDirective />`,
+  standalone: false,
 })
 class TestHostComponent {}
 

console/src/app/modules/input/input.directive.ts

@@ -16,7 +16,7 @@ import {
   Self,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
+import { _ErrorStateTracker, ErrorStateMatcher } from '@angular/material/core';
 import { MatFormField, MatFormFieldControl, MAT_FORM_FIELD } from '@angular/material/form-field';
 import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 import { Subject } from 'rxjs';
@@ -26,24 +26,6 @@ const MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image'
 
 let nextUniqueId = 0;
 
-const _MatInputBase = mixinErrorState(
-  class {
-    readonly stateChanges = new Subject<void>();
-
-    constructor(
-      public _defaultErrorStateMatcher: ErrorStateMatcher,
-      public _parentForm: NgForm,
-      public _parentFormGroup: FormGroupDirective,
-      /**
-       * Form control bound to the component.
-       * Implemented as part of `MatFormFieldControl`.
-       * @docs-private
-       */
-      public ngControl: NgControl,
-    ) {}
-  },
-);
-
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
   selector: `input[cnslInput], textarea[cnslInput], select[cnslNativeControl]`,
@@ -68,11 +50,9 @@ const _MatInputBase = mixinErrorState(
     '[attr.aria-required]': 'required.toString()',
   },
   providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
+  standalone: false,
 })
-export class InputDirective
+export class InputDirective implements MatFormFieldControl<any>, OnChanges, OnDestroy, AfterViewInit, DoCheck {
-  extends _MatInputBase
-  implements MatFormFieldControl<any>, OnChanges, CanUpdateErrorState, OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState
-{
   protected _uid: string = `cnsl-input-${nextUniqueId++}`;
   protected _previousNativeValue: any;
   private _inputValueAccessor: { value: any };
@@ -97,7 +77,14 @@ export class InputDirective
    * Implemented as part of MatFormFieldControl.
    * @docs-private
    */
-  override readonly stateChanges: Subject<void> = new Subject<void>();
+  readonly stateChanges: Subject<void> = new Subject<void>();
+
+  get errorState() {
+    return this._errorStateTracker.errorState;
+  }
+  set errorState(value: boolean) {
+    this._errorStateTracker.errorState = value;
+  }
 
   /**
    * Implemented as part of MatFormFieldControl.
@@ -184,9 +171,6 @@ export class InputDirective
   }
   protected _type: string = 'text';
 
-  /** An object used to control when error messages are shown. */
-  @Input() override errorStateMatcher!: ErrorStateMatcher;
-
   /**
    * Implemented as part of MatFormFieldControl.
    * @docs-private
@@ -223,24 +207,40 @@ export class InputDirective
     getSupportedInputTypes().has(t),
   );
 
+  @Input()
+  get errorStateMatcher() {
+    return this._errorStateTracker.matcher;
+  }
+  set errorStateMatcher(value: ErrorStateMatcher) {
+    this._errorStateTracker.matcher = value;
+  }
+
+  private _errorStateTracker: _ErrorStateTracker;
+
   constructor(
     protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
     protected _platform: Platform,
     /** @docs-private */
-    @Optional() @Self() public override ngControl: NgControl,
+    @Optional() @Self() public ngControl: NgControl,
-    @Optional() _parentForm: NgForm,
+    @Optional() parentForm: NgForm,
-    @Optional() _parentFormGroup: FormGroupDirective,
+    @Optional() parentFormGroup: FormGroupDirective,
-    _defaultErrorStateMatcher: ErrorStateMatcher,
+    defaultErrorStateMatcher: ErrorStateMatcher,
     @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
     private _autofillMonitor: AutofillMonitor,
     ngZone: NgZone,
     @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField,
   ) {
-    super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);
-
     const element = this._elementRef.nativeElement;
     const nodeName = element.nodeName.toLowerCase();
 
+    this._errorStateTracker = new _ErrorStateTracker(
+      defaultErrorStateMatcher,
+      ngControl,
+      parentFormGroup,
+      parentForm,
+      this.stateChanges,
+    );
+
     // If no input value accessor was explicitly specified, use the element as the input value
     // accessor.
     this._inputValueAccessor = inputValueAccessor || element;
@@ -317,6 +317,10 @@ export class InputDirective
     this._dirtyCheckPlaceholder();
   }
 
+  updateErrorState() {
+    this._errorStateTracker.updateErrorState();
+  }
+
   /** Focuses the input. */
   focus(options?: FocusOptions): void {
     this._elementRef.nativeElement.focus(options);

console/src/app/modules/keyboard-shortcuts/keyboard-shortcuts.component.ts

@@ -7,6 +7,7 @@ import { KeyboardShortcut, ORGSHORTCUTS, SIDEWIDESHORTCUTS } from 'src/app/servi
   selector: 'cnsl-keyboard-shortcuts',
   templateUrl: './keyboard-shortcuts.component.html',
   styleUrls: ['./keyboard-shortcuts.component.scss'],
+  standalone: false,
 })
 export class KeyboardShortcutsComponent {
   public orgShortcuts: KeyboardShortcut[] = ORGSHORTCUTS;

console/src/app/modules/label/label.component.ts

@@ -4,6 +4,7 @@ import { Component } from '@angular/core';
   selector: 'cnsl-label',
   templateUrl: './label.component.html',
   styleUrls: ['./label.component.scss'],
+  standalone: false,
 })
 export class LabelComponent {
   constructor() {}

console/src/app/modules/machine-keys/machine-keys.component.ts

@@ -20,6 +20,7 @@ import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
   selector: 'cnsl-machine-keys',
   templateUrl: './machine-keys.component.html',
   styleUrls: ['./machine-keys.component.scss'],
+  standalone: false,
 })
 export class MachineKeysComponent implements OnInit {
   @Input() userId?: string;

console/src/app/modules/members-table/members-table.component.ts

@@ -26,6 +26,7 @@ type MemberDatasource =
   selector: 'cnsl-members-table',
   templateUrl: './members-table.component.html',
   styleUrls: ['./members-table.component.scss'],
+  standalone: false,
 })
 export class MembersTableComponent implements OnInit, OnDestroy {
   public INITIALPAGESIZE: number = 25;

console/src/app/modules/memberships-table/memberships-table.component.ts

@@ -22,6 +22,7 @@ import { Organization } from '@zitadel/proto/zitadel/org/v2/org_pb';
   selector: 'cnsl-memberships-table',
   templateUrl: './memberships-table.component.html',
   styleUrls: ['./memberships-table.component.scss'],
+  standalone: false,
 })
 export class MembershipsTableComponent implements OnInit, OnDestroy {
   public INITIALPAGESIZE: number = 25;

console/src/app/modules/meta-layout/meta-layout.component.ts

@@ -7,6 +7,7 @@ import { map } from 'rxjs/operators';
   selector: 'cnsl-meta-layout',
   templateUrl: './meta-layout.component.html',
   styleUrls: ['./meta-layout.component.scss'],
+  standalone: false,
 })
 export class MetaLayoutComponent {
   constructor(private breakpointObserver: BreakpointObserver) {

console/src/app/modules/metadata/metadata-dialog/metadata-dialog.component.ts

@@ -15,6 +15,7 @@ export type MetadataDialogData = {
   selector: 'cnsl-metadata-dialog',
   templateUrl: './metadata-dialog.component.html',
   styleUrls: ['./metadata-dialog.component.scss'],
+  standalone: false,
 })
 export class MetadataDialogComponent {
   public metadata: { key: string; value: string }[] = [];

console/src/app/modules/metadata/metadata/metadata.component.ts

@@ -15,6 +15,7 @@ type StringMetadata = {
   selector: 'cnsl-metadata',
   templateUrl: './metadata.component.html',
   styleUrls: ['./metadata.component.scss'],
+  standalone: false,
 })
 export class MetadataComponent implements OnInit {
   @Input({ required: true }) public set metadata(metadata: (Metadata.AsObject | MetadataV2)[]) {

console/src/app/modules/name-dialog/name-dialog.component.ts

@@ -5,6 +5,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
   selector: 'cnsl-name-dialog',
   templateUrl: './name-dialog.component.html',
   styleUrls: ['./name-dialog.component.scss'],
+  standalone: false,
 })
 export class NameDialogComponent {
   public name: string = '';

console/src/app/modules/nav-toggle/nav-toggle.component.ts

@@ -4,6 +4,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   selector: 'cnsl-nav-toggle',
   templateUrl: './nav-toggle.component.html',
   styleUrls: ['./nav-toggle.component.scss'],
+  standalone: false,
 })
 export class NavToggleComponent {
   @Input() public label: string = '';

console/src/app/modules/nav/nav.component.ts

@@ -69,6 +69,7 @@ import { Organization } from '@zitadel/proto/zitadel/org/v2/org_pb';
       ]),
     ]),
   ],
+  standalone: false,
 })
 export class NavComponent implements OnDestroy {
   @ViewChild('input', { static: false }) input!: ElementRef;

console/src/app/modules/new-header/header-button/header-button.component.ts

@@ -7,7 +7,6 @@ import { MatRippleModule } from '@angular/material/core';
   selector: 'cnsl-header-button',
   templateUrl: './header-button.component.html',
   styleUrls: ['./header-button.component.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [NgIconComponent, MatRippleModule],
   providers: [provideIcons({ heroChevronUpDown })],

console/src/app/modules/new-header/header-dropdown/header-dropdown.component.ts

@@ -23,7 +23,6 @@ import { ReplaySubject } from 'rxjs';
   selector: 'cnsl-header-dropdown',
   templateUrl: './header-dropdown.component.html',
   styleUrls: ['./header-dropdown.component.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CdkConnectedOverlay, NgIf, AsyncPipe],
 })
@@ -59,15 +58,12 @@ export class HeaderDropdownComponent implements OnInit {
     // to make sure the dropdown will be rendered in the correct position
     runInInjectionContext(this.injector, () => {
       const isOpen = toSignal(this.isOpen$, { requireSync: true });
-      effect(
+      effect(() => {
-        () => {
+        this.isHandset();
-          this.isHandset();
+        if (untracked(() => isOpen())) {
-          if (untracked(() => isOpen())) {
+          this.closed.emit();
-            this.closed.emit();
+        }
-          }
+      });
-        },
-        { allowSignalWrites: true },
-      );
     });
   }
 

console/src/app/modules/new-header/instance-selector/instance-selector.component.ts

@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, Output, Input } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatButtonModule } from '@angular/material/button';
-import { Router, RouterLink } from '@angular/router';
 import { InstanceDetail } from '@zitadel/proto/zitadel/instance_pb';
 import { NgIconComponent, provideIcons } from '@ng-icons/core';
 import { heroCog8ToothSolid } from '@ng-icons/heroicons/solid';
@@ -14,9 +13,8 @@ import { CommonModule } from '@angular/common';
   selector: 'cnsl-instance-selector',
   templateUrl: './instance-selector.component.html',
   styleUrls: ['./instance-selector.component.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TranslateModule, MatButtonModule, RouterLink, NgIconComponent, CommonModule],
+  imports: [TranslateModule, MatButtonModule, NgIconComponent, CommonModule],
   providers: [provideIcons({ heroCog8ToothSolid, heroChevronRight })],
 })
 export class InstanceSelectorComponent {

console/src/app/modules/new-header/new-header.component.ts

@@ -25,7 +25,6 @@ import { MatRippleModule } from '@angular/material/core';
   selector: 'cnsl-new-header',
   templateUrl: './new-header.component.html',
   styleUrls: ['./new-header.component.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     MatToolbarModule,

console/src/app/modules/new-header/organization-selector/organization-selector.component.ts

@@ -48,7 +48,6 @@ const QUERY_LIMIT = 20;
   selector: 'cnsl-organization-selector',
   templateUrl: './organization-selector.component.html',
   styleUrls: ['./organization-selector.component.scss'],
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     NgForOf,

console/src/app/modules/onboarding-card/onboarding-card.component.ts

@@ -7,6 +7,7 @@ import { ONBOARDING_MILESTONES } from 'src/app/utils/onboarding';
   selector: 'cnsl-onboarding-card',
   templateUrl: './onboarding-card.component.html',
   styleUrls: ['./onboarding-card.component.scss'],
+  standalone: false,
 })
 export class OnboardingCardComponent implements OnInit {
   public percentageChanged: EventEmitter<number> = new EventEmitter<number>();

console/src/app/modules/onboarding/onboarding.component.ts

@@ -7,6 +7,7 @@ import { ONBOARDING_MILESTONES } from 'src/app/utils/onboarding';
   selector: 'cnsl-onboarding',
   templateUrl: './onboarding.component.html',
   styleUrls: ['./onboarding.component.scss'],
+  standalone: false,
 })
 export class OnboardingComponent {
   public actions = this.adminService.progressMilestones;

console/src/app/modules/org-context/org-context.component.ts

@@ -15,6 +15,7 @@ const ORG_QUERY_LIMIT = 100;
   selector: 'cnsl-org-context',
   templateUrl: './org-context.component.html',
   styleUrls: ['./org-context.component.scss'],
+  standalone: false,
 })
 export class OrgContextComponent implements OnInit {
   public pinned: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);

console/src/app/modules/org-table/org-table.component.ts

@@ -26,6 +26,7 @@ type SearchQuery = NonNullable<MessageInitShape<typeof ListOrganizationsRequestS
   selector: 'cnsl-org-table',
   templateUrl: './org-table.component.html',
   styleUrls: ['./org-table.component.scss'],
+  standalone: false,
 })
 export class OrgTableComponent {
   public displayedColumns: string[] = ['name', 'state', 'primaryDomain', 'creationDate', 'changeDate', 'actions'];

console/src/app/modules/paginator/paginator.component.ts

@@ -13,6 +13,7 @@ export interface PageEvent {
   selector: 'cnsl-paginator',
   templateUrl: './paginator.component.html',
   styleUrls: ['./paginator.component.scss'],
+  standalone: false,
 })
 export class PaginatorComponent {
   @Input() public timestamp: Timestamp.AsObject | ConnectTimestamp | undefined = undefined;

console/src/app/modules/password-complexity-view/password-complexity-view.component.html

@@ -30,22 +30,22 @@
       }})
     </span>
   </div>
-  <div class="val" *ngIf="this.policy.hasSymbol">
+  <div class="val" *ngIf="policy.hasSymbol">
     <i *ngIf="password?.pristine || password?.errors?.['errorssymbolerror']" class="las la-times red"></i>
     <i *ngIf="password?.dirty && !password?.errors?.['errorssymbolerror']" class="las la-check green"></i>
     <span class="cnsl-secondary-text"> {{ 'ERRORS.SYMBOLERROR' | translate }}</span>
   </div>
-  <div class="val" *ngIf="this.policy.hasNumber">
+  <div class="val" *ngIf="policy.hasNumber">
     <i *ngIf="password?.pristine || password?.errors?.['errorsnumbererror']" class="las la-times red"></i>
     <i *ngIf="password?.dirty && !password?.errors?.['errorsnumbererror']" class="las la-check green"></i>
     <span class="cnsl-secondary-text"> {{ 'ERRORS.NUMBERERROR' | translate }}</span>
   </div>
-  <div class="val" *ngIf="this.policy.hasUppercase">
+  <div class="val" *ngIf="policy.hasUppercase">
     <i *ngIf="password?.pristine || password?.errors?.['errorsuppercasemissing']" class="las la-times red"></i>
     <i *ngIf="password?.dirty && !password?.errors?.['errorsuppercasemissing']" class="las la-check green"></i>
     <span class="cnsl-secondary-text"> {{ 'ERRORS.UPPERCASEMISSING' | translate }}</span>
   </div>
-  <div class="val" *ngIf="this.policy.hasLowercase">
+  <div class="val" *ngIf="policy.hasLowercase">
     <i *ngIf="password?.pristine || password?.errors?.['errorslowercasemissing']" class="las la-times red"></i>
     <i *ngIf="password?.dirty && !password?.errors?.['errorslowercasemissing']" class="las la-check green"></i>
     <span class="cnsl-secondary-text">{{ 'ERRORS.LOWERCASEMISSING' | translate }}</span>

console/src/app/modules/password-complexity-view/password-complexity-view.component.ts

@@ -6,6 +6,7 @@ import { PasswordComplexityPolicy } from '@zitadel/proto/zitadel/policy_pb';
   selector: 'cnsl-password-complexity-view',
   templateUrl: './password-complexity-view.component.html',
   styleUrls: ['./password-complexity-view.component.scss'],
+  standalone: false,
 })
 export class PasswordComplexityViewComponent {
   @Input() public password: AbstractControl | null = null;

console/src/app/modules/personal-access-tokens/personal-access-tokens.component.ts

@@ -20,6 +20,7 @@ import { WarnDialogComponent } from '../warn-dialog/warn-dialog.component';
   selector: 'cnsl-personal-access-tokens',
   templateUrl: './personal-access-tokens.component.html',
   styleUrls: ['./personal-access-tokens.component.scss'],
+  standalone: false,
 })
 export class PersonalAccessTokensComponent implements OnInit {
   @Input() userId!: string;

console/src/app/modules/policies/domain-policy/domain-policy.component.ts

@@ -21,6 +21,7 @@ import { NewOrganizationService } from '../../../services/new-organization.servi
   selector: 'cnsl-domain-policy',
   templateUrl: './domain-policy.component.html',
   styleUrls: ['./domain-policy.component.scss'],
+  standalone: false,
 })
 export class DomainPolicyComponent implements OnInit, OnDestroy {
   private managementService!: ManagementService;

console/src/app/modules/policies/idp-settings/idp-settings.component.ts

@@ -8,6 +8,7 @@ import { PolicyComponentServiceType } from '../policy-component-types.enum';
   selector: 'cnsl-idp-settings',
   templateUrl: './idp-settings.component.html',
   styleUrls: ['./idp-settings.component.scss'],
+  standalone: false,
 })
 export class IdpSettingsComponent implements OnInit {
   @Input() public serviceType!: PolicyComponentServiceType;

console/src/app/modules/policies/language-settings/language-settings.component.ts

@@ -17,6 +17,7 @@ interface State {
   selector: 'cnsl-language-settings',
   templateUrl: './language-settings.component.html',
   styleUrls: ['./language-settings.component.scss'],
+  standalone: false,
 })
 export class LanguageSettingsComponent {
   public canWriteRestrictions$: Observable<boolean> = this.authService.isAllowed(['iam.restrictions.write']);

console/src/app/modules/policies/login-policy/factor-table/dialog-add-type/dialog-add-type.component.ts

@@ -11,6 +11,7 @@ enum LoginMethodComponentType {
   selector: 'cnsl-dialog-add-type',
   templateUrl: './dialog-add-type.component.html',
   styleUrls: ['./dialog-add-type.component.scss'],
+  standalone: false,
 })
 export class DialogAddTypeComponent {
   public LoginMethodComponentType: any = LoginMethodComponentType;

console/src/app/modules/policies/login-policy/factor-table/factor-table.component.ts

@@ -33,6 +33,7 @@ export enum LoginMethodComponentType {
   selector: 'cnsl-factor-table',
   templateUrl: './factor-table.component.html',
   styleUrls: ['./factor-table.component.scss'],
+  standalone: false,
 })
 export class FactorTableComponent {
   public LoginMethodComponentType: any = LoginMethodComponentType;