chore: update Angular to 22.0.0-rc.0

.github/workflows/nodejs.yml

@@ -16,17 +16,13 @@ jobs:
 
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [22.x]
-
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+        uses: actions/checkout@v6
+      - name: Use Node.js 24
+        uses: actions/setup-node@v6
         with:
-            node-version: ${{ matrix.node-version }}
+            node-version: 24.x
             cache: 'npm'
       - name: Install packages
         run: npm ci

.github/workflows/npm-publish.yml

@@ -11,10 +11,10 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/checkout@v6
+      - uses: actions/setup-node@v6
         with:
-          node-version: '22.22.1' # Specifically avoid 22.22.2 due to a regression with npm latest
+          node-version: 24.x
           cache: 'npm'
           registry-url: 'https://registry.npmjs.org'
 

package.json

@@ -64,17 +64,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^21.1.3",
-    "@angular/common": "^21.1.3",
-    "@angular/compiler": "^21.1.3",
-    "@angular/core": "^21.1.3",
-    "@angular/elements": "^21.1.3",
-    "@angular/forms": "^21.1.3",
-    "@angular/platform-browser": "^21.1.3",
-    "@angular/platform-browser-dynamic": "^21.1.3",
-    "@angular/platform-server": "^21.1.3",
-    "@angular/router": "^21.1.3",
-    "@angular/ssr": "^21.1.2",
+    "@angular/animations": "^22.0.0-rc.1",
+    "@angular/common": "^22.0.0-rc.1",
+    "@angular/compiler": "^22.0.0-rc.1",
+    "@angular/core": "^22.0.0-rc.1",
+    "@angular/elements": "^22.0.0-rc.1",
+    "@angular/forms": "^22.0.0-rc.1",
+    "@angular/platform-browser": "^22.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^22.0.0-rc.1",
+    "@angular/platform-server": "^22.0.0-rc.1",
+    "@angular/router": "^22.0.0-rc.1",
+    "@angular/ssr": "^22.0.0-rc.1",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -94,16 +94,16 @@
     "zone.js": "~0.16.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics": "^21.1.2",
+    "@angular-devkit/schematics": "^22.0.0-rc.1",
     "@angular-eslint/builder": "^21.2.0",
     "@angular-eslint/eslint-plugin": "^21.2.0",
     "@angular-eslint/eslint-plugin-template": "^21.2.0",
     "@angular-eslint/schematics": "^21.2.0",
     "@angular-eslint/template-parser": "^21.2.0",
-    "@angular/build": "^21.1.2",
-    "@angular/cli": "^21.1.2",
-    "@angular/compiler-cli": "^21.1.3",
-    "@angular/language-service": "^21.1.3",
+    "@angular/build": "^22.0.0-rc.1",
+    "@angular/cli": "^22.0.0-rc.1",
+    "@angular/compiler-cli": "^22.0.0-rc.1",
+    "@angular/language-service": "^22.0.0-rc.1",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -137,6 +137,7 @@
     "igniteui-i18n-resources": "^1.0.2",
     "igniteui-sassdoc-theme": "^2.1.0",
     "igniteui-webcomponents": "^7.0.0",
+    "istanbul-lib-instrument": "^6.0.3",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",
@@ -148,11 +149,11 @@
     "karma-parallel": "^0.3.1",
     "karma-spec-reporter": "^0.0.36",
     "lit-html": "^3.2.1",
-    "ng-packagr": "^21.0.0",
+    "ng-packagr": "^22.0.0-next.4",
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
-    "puppeteer": "^24.5.0",
+    "puppeteer": "^25.1.0",
     "sass-embedded": "^1.92.1",
     "sass-true": "^8.1.0",
     "sassdoc": "^2.7.4",
@@ -164,7 +165,7 @@
     "ts-node": "^10.8.1",
     "typedoc": "^0.28.14",
     "typedoc-plugin-localization": "^3.1.0",
-    "typescript": "5.9.3"
+    "typescript": "6.0.3"
   },
   "overrides": {
     "igniteui-sassdoc-theme": {
@@ -173,14 +174,20 @@
       }
     },
     "igniteui-angular-charts": {
-      "@angular/core": "^21.0.0",
-      "@angular/common": "^21.0.0",
-      "@angular/compiler": "^21.0.0"
+      "@angular/core": "^22.0.0-rc.0",
+      "@angular/common": "^22.0.0-rc.0",
+      "@angular/compiler": "^22.0.0-rc.0"
     },
     "igniteui-angular-core": {
-      "@angular/core": "^21.0.0",
-      "@angular/common": "^21.0.0",
-      "@angular/compiler": "^21.0.0"
+      "@angular/core": "^22.0.0-rc.0",
+      "@angular/common": "^22.0.0-rc.0",
+      "@angular/compiler": "^22.0.0-rc.0"
+    },
+    "@angular-eslint/builder": {
+      "@angular/cli": "$@angular/cli"
+    },
+    "@angular-eslint/schematics": {
+      "@angular/cli": "$@angular/cli"
     }
   }
 }

projects/bundle-test/src/app/app.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { IgxNavbarComponent } from 'igniteui-angular/navbar';
 
 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [RouterOutlet, IgxNavbarComponent]
 })
 export class AppComponent {

projects/bundle-test/src/app/app.config.ts

@@ -2,7 +2,7 @@ import { ApplicationConfig } from '@angular/core';
 import { NavigationError, provideRouter, withNavigationErrorHandler } from '@angular/router';
 
 import { routes } from './app.routes';
-import { provideClientHydration } from '@angular/platform-browser';
+import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -11,6 +11,6 @@ export const appConfig: ApplicationConfig = {
       // force failed routes to throw & fail the SSG part of the build
       withNavigationErrorHandler((e: NavigationError) => { throw e; })
     ),
-    provideClientHydration()
+    provideClientHydration(withNoIncrementalHydration())
   ]
 };

projects/bundle-test/src/app/chip/chip.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { ChipResourceStringsBG } from 'igniteui-angular-i18n';
 import { IgxChipComponent } from 'igniteui-angular/chips';
 
 @Component({
     selector: 'app-chip',
     imports: [IgxChipComponent],
     templateUrl: './chip.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrls: ['./chip.component.scss']
 })
 export class ChipComponent {

projects/bundle-test/src/app/form/form.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { IgxCheckboxComponent } from 'igniteui-angular/checkbox';
 import { IgxButtonDirective } from 'igniteui-angular/directives';
@@ -19,6 +19,7 @@ import { IgxSwitchComponent } from 'igniteui-angular/switch';
         ReactiveFormsModule
     ],
     templateUrl: './form.component.html',
+    changeDetection: ChangeDetectionStrategy.Eager,
     styleUrls: ['./form.component.scss']
 })
 export class FormComponent {

projects/bundle-test/src/app/h-grid/h-grid.component.ts

@@ -1,10 +1,11 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';
 
 @Component({
     selector: 'app-h-grid',
     templateUrl: './h-grid.component.html',
     styleUrls: ['./h-grid.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES]
 })
 export class HGridComponent {

projects/bundle-test/src/app/pivot-grid/pivot-grid.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { IGX_PIVOT_GRID_DIRECTIVES } from 'igniteui-angular/grids/pivot-grid';
 import { IgxPivotDateDimension, IPivotConfiguration } from 'igniteui-angular/grids/core';
 
 @Component({
     selector: 'app-pivot-grid',
     templateUrl: './pivot-grid.component.html',
     styleUrls: ['./pivot-grid.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: [IGX_PIVOT_GRID_DIRECTIVES]
 })
 export class PivotGridComponent {

projects/bundle-test/src/app/stepper/stepper.component.ts

@@ -1,11 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
 import { IgxStepperComponent } from 'igniteui-angular/stepper';
 
 @Component({
   selector: 'app-grid',
   standalone: true,
   imports: [IgxStepperComponent],
   templateUrl: './stepper.component.html',
+  changeDetection: ChangeDetectionStrategy.Eager,
   styleUrls: ['./stepper.component.scss']
 })
 export class StepperComponent {

projects/bundle-test/tsconfig.app.json

@@ -3,27 +3,21 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
-    "types": [
-        "node"
-    ],
+    "types": ["node"],
     "paths": {
-        "igniteui-angular": [
-          "dist/igniteui-angular"
-        ],
-        "igniteui-angular/*": [
-          "dist/igniteui-angular/*"
-        ],
-        "igniteui-angular-i18n": [
-          "dist/igniteui-angular-i18n"
-        ]
+      "igniteui-angular": ["../../dist/igniteui-angular"],
+      "igniteui-angular/*": ["../../dist/igniteui-angular/*"],
+      "igniteui-angular-i18n": ["../../dist/igniteui-angular-i18n"]
     }
   },
-  "files": [
-    "src/main.ts",
-    "src/main.server.ts",
-    "server.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.ts", "src/main.server.ts", "server.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }

projects/bundle-test/tsconfig.spec.json

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

projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren, inject } from '@angular/core';
+import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren, inject, ChangeDetectionStrategy } from '@angular/core';
 import { Subject } from 'rxjs';
 import { TemplateRefWrapper } from './template-ref-wrapper';
 
@@ -10,6 +10,7 @@ type TemplateFunction = (arg: any) => TemplateResult;
     selector: 'igx-template-wrapper',
     templateUrl: './wrapper.component.html',
     styleUrls: ['./wrapper.component.scss'],
+    changeDetection: ChangeDetectionStrategy.Eager,
     imports: []
 })
 export class TemplateWrapperComponent {

projects/igniteui-angular-elements/src/lib/icon.broadcast.service.spec.ts

@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service';
-import { Component, inject } from '@angular/core';
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
 import { IconMeta, IgxIconService } from 'igniteui-angular';
 import { wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
 
@@ -107,6 +107,7 @@ describe('Icon broadcast service', () => {
 @Component({
     template: ``,
     standalone: true,
+    changeDetection: ChangeDetectionStrategy.Eager,
     providers: [IgxIconBroadcastService, IgxIconService]
 })
 export class BroadcastServiceComponent {

projects/igniteui-angular-elements/src/lib/state.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, inject } from '@angular/core';
+import { Component, EventEmitter, Output, inject, ChangeDetectionStrategy } from '@angular/core';
 import { IFilteringExpressionsTree, IGroupingState, IPagingState, ISortingExpression } from 'igniteui-angular/core';
 import { GridFeatures, GridSelectionRange, GridType, IColumnState, IGridStateCollection, IGX_GRID_BASE, IgxGridStateBaseDirective, IPinningConfig, IPivotConfiguration } from 'igniteui-angular/grids/core';
 
@@ -41,6 +41,7 @@ export interface IGridStateInfo {
     selector: 'igx-grid-state',
     template: ``,
     styles: `:host { display: none }`,
+    changeDetection: ChangeDetectionStrategy.Eager,
     standalone: true
 })
 export class IgxGridStateComponent extends IgxGridStateBaseDirective {

projects/igniteui-angular-elements/tsconfig.app.json

@@ -2,13 +2,16 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../out-tsc/app",
+    "outDir": "../../out-tsc/app"
   },
-  "files": [
-    "src/main.app.ts",
-    "src/polyfills.ts"
-  ],
-  "include": [
-    "src/**/*.d.ts"
-  ]
+  "files": ["src/main.app.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"],
+  "angularCompilerOptions": {
+    "extendedDiagnostics": {
+      "checks": {
+        "nullishCoalescingNotNullable": "suppress",
+        "optionalChainNotNullable": "suppress"
+      }
+    }
+  }
 }