Skip to content

chore(*): migrating to angular 21 #16484

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
kdinev wants to merge 2 commits into from
Closed

chore(*): migrating to angular 21 #16484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2cb9b60
chore(*): migrating to angular 21
Nov 19, 2025
245f0a8
fix(build): fixing the lib build with 21
Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8,941 changes: 5,241 additions & 3,700 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

58 changes: 29 additions & 29 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,42 +59,42 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^20.3.6",
"@angular/common": "^20.3.6",
"@angular/compiler": "^20.3.6",
"@angular/core": "^20.3.6",
"@angular/elements": "^20.3.6",
"@angular/forms": "^20.3.6",
"@angular/platform-browser": "^20.3.6",
"@angular/platform-browser-dynamic": "^20.3.6",
"@angular/platform-server": "^20.3.6",
"@angular/router": "^20.3.6",
"@angular/ssr": "^20.3.6",
"@angular/animations": "^21.0.0",
"@angular/common": "^21.0.0",
"@angular/compiler": "^21.0.0",
"@angular/core": "^21.0.0",
"@angular/elements": "^21.0.0",
"@angular/forms": "^21.0.0",
"@angular/platform-browser": "^21.0.0",
"@angular/platform-browser-dynamic": "^21.0.0",
"@angular/platform-server": "^21.0.0",
"@angular/router": "^21.0.0",
"@angular/ssr": "^21.0.0",
"@igniteui/material-icons-extended": "^3.1.0",
"@lit-labs/ssr-dom-shim": "^1.3.0",
"@types/source-map": "0.5.2",
"express": "^5.1.0",
"fflate": "^0.8.1",
"igniteui-theming": "^23.0.0",
"igniteui-theming": "^23.1.1",
"igniteui-trial-watermark": "^3.1.0",
"lodash-es": "^4.17.21",
"rxjs": "^7.8.2",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
"zone.js": "~0.15.1"
},
"devDependencies": {
"@angular-devkit/schematics": "^20.3.6",
"@angular-eslint/builder": "^20.4.0",
"@angular-eslint/eslint-plugin": "^20.4.0",
"@angular-eslint/eslint-plugin-template": "^20.4.0",
"@angular-eslint/schematics": "^20.4.0",
"@angular-eslint/template-parser": "^20.4.0",
"@angular/build": "^20.3.6",
"@angular/cli": "^20.3.9",
"@angular/compiler-cli": "^20.3.6",
"@angular/language-service": "^20.3.6",
"@angular-devkit/schematics": "^21.0.0",
"@angular-eslint/builder": "^20.6.0",
"@angular-eslint/eslint-plugin": "^20.6.0",
"@angular-eslint/eslint-plugin-template": "^20.6.0",
"@angular-eslint/schematics": "^20.6.0",
"@angular-eslint/template-parser": "^20.6.0",
"@angular/build": "^21.0.0",
"@angular/cli": "^21.0.0",
"@angular/compiler-cli": "^21.0.0",
"@angular/language-service": "^21.0.0",
"@angularclass/hmr": "^3.0.0",
"@microsoft/signalr": "^7.0.12",
"@microsoft/signalr": "^10.0.0",
"@types/estree": "^1.0.0",
"@types/express": "^5.0.0",
"@types/hammerjs": "^2.0.46",
Expand All @@ -119,9 +119,9 @@
"hammer-simulator": "0.0.1",
"hammerjs": "^2.0.8",
"ig-typedoc-theme": "^7.0.0",
"igniteui-dockmanager": "^1.17.0",
"igniteui-dockmanager": "^1.18.1",
"igniteui-sassdoc-theme": "^2.1.0",
"igniteui-webcomponents": "6.2.1",
"igniteui-webcomponents": "6.3.6",
"jasmine": "^5.6.0",
"jasmine-core": "^5.6.0",
"karma": "^6.4.4",
Expand All @@ -132,11 +132,11 @@
"karma-parallel": "^0.3.1",
"karma-spec-reporter": "^0.0.36",
"lit-html": "^3.2.1",
"ng-packagr": "^20.0.0",
"ng-packagr": "^21.0.0",
"postcss": "^8.5.1",
"postcss-scss": "^4.0.6",
"prettier": "^3.3.3",
"puppeteer": "^24.5.0",
"puppeteer": "^24.30.0",
"sass-embedded": "^1.92.1",
"sass-true": "^8.1.0",
"sassdoc": "^2.7.4",
Expand All @@ -148,6 +148,6 @@
"ts-node": "^10.8.1",
"typedoc": "^0.28.14",
"typedoc-plugin-localization": "^3.1.0",
"typescript": "5.8.3"
"typescript": "5.9.3"
}
}
3 changes: 2 additions & 1 deletion projects/bundle-test/src/main.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { provideZoneChangeDetection } from "@angular/core";
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';

const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, config, context);
const bootstrap = (context: BootstrapContext) => bootstrapApplication(AppComponent, {...config, providers: [provideZoneChangeDetection(), ...config.providers]}, context);

export default bootstrap;
3 changes: 2 additions & 1 deletion projects/bundle-test/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { provideZoneChangeDetection } from "@angular/core";
import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';


bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err));
Copy link

Copilot AI Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bootstrap configuration is duplicating providers by spreading appConfig.providers. If appConfig already includes provideZoneChangeDetection(), this will result in duplicate providers. Consider checking if zone change detection is already configured in appConfig before adding it, or modify appConfig directly instead of spreading and overriding.

Suggested change
bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err));
// Ensure provideZoneChangeDetection is only added once
const zoneProvider = provideZoneChangeDetection();
if (!appConfig.providers.some(p => p.provide === zoneProvider.provide)) {
appConfig.providers.unshift(zoneProvider);
}
bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));

Copilot uses AI. Check for mistakes.
14 changes: 7 additions & 7 deletions projects/igniteui-angular/calendar/src/calendar/common/calendar-view.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,39 +183,39 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
* @hidden
*/
@HostListener("keydown.arrowdown", ["$event"])
public onKeydownArrowDown(event: KeyboardEvent) {
public onKeydownArrowDown(event) {
this.navigateTo(event, IgxCalendarNavDirection.NEXT, 3);
}

/**
* @hidden
*/
@HostListener("keydown.arrowup", ["$event"])
public onKeydownArrowUp(event: KeyboardEvent) {
public onKeydownArrowUp(event) {
this.navigateTo(event, IgxCalendarNavDirection.PREV, 3);
}

/**
* @hidden
*/
@HostListener("keydown.arrowright", ["$event"])
public onKeydownArrowRight(event: KeyboardEvent) {
public onKeydownArrowRight(event) {
this.navigateTo(event, IgxCalendarNavDirection.NEXT, 1);
}

/**
* @hidden
*/
@HostListener("keydown.arrowleft", ["$event"])
public onKeydownArrowLeft(event: KeyboardEvent) {
public onKeydownArrowLeft(event) {
this.navigateTo(event, IgxCalendarNavDirection.PREV, 1);
}

/**
* @hidden
*/
@HostListener("keydown.home", ["$event"])
public onKeydownHome(event: KeyboardEvent) {
public onKeydownHome(event) {
event.preventDefault();
event.stopPropagation();

Expand All @@ -227,7 +227,7 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
* @hidden
*/
@HostListener("keydown.end", ["$event"])
public onKeydownEnd(event: KeyboardEvent) {
public onKeydownEnd(event) {
event.preventDefault();
event.stopPropagation();

Expand All @@ -239,7 +239,7 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
* @hidden
*/
@HostListener("keydown.enter", ["$event"])
public onKeydownEnter(event: KeyboardEvent) {
public onKeydownEnter(event) {
event.stopPropagation();

this.selected.emit(this.date);
Expand Down
14 changes: 7 additions & 7 deletions projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,31 +231,31 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
* @hidden
*/
@HostListener('keydown.arrowright', ['$event'])
protected onArrowRight(event: KeyboardEvent) {
protected onArrowRight(event) {
this.handleArrowKeydown(event, 1);
}

/**
* @hidden
*/
@HostListener('keydown.arrowleft', ['$event'])
protected onArrowLeft(event: KeyboardEvent) {
protected onArrowLeft(event) {
this.handleArrowKeydown(event, -1);
}

/**
* @hidden
*/
@HostListener('keydown.arrowup', ['$event'])
protected onArrowUp(event: KeyboardEvent) {
protected onArrowUp(event) {
this.handleArrowKeydown(event, -7);
}

/**
* @hidden
*/
@HostListener('keydown.arrowdown', ['$event'])
protected onArrowDown(event: KeyboardEvent) {
protected onArrowDown(event) {
this.handleArrowKeydown(event, 7);
}

Expand All @@ -264,7 +264,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
*/
@HostListener('keydown.Space', ['$event'])
@HostListener('keydown.enter', ['$event'])
protected onKeydownEnter(event: KeyboardEvent) {
protected onKeydownEnter(event) {
event.stopPropagation();
this.selectActiveDate();
}
Expand All @@ -273,7 +273,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
* @hidden
*/
@HostListener('keydown.home', ['$event'])
protected onKeydownHome(event: KeyboardEvent) {
protected onKeydownHome(event) {
event.preventDefault();
event.stopPropagation();

Expand All @@ -288,7 +288,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
* @hidden
*/
@HostListener('keydown.end', ['$event'])
protected onKeydownEnd(event: KeyboardEvent) {
protected onKeydownEnd(event) {
event.preventDefault();
event.stopPropagation();

Expand Down
12 changes: 6 additions & 6 deletions projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
[attr.aria-label]="prevNavLabel((getPrevYearDate(viewDate) | date: 'yyyy'))"
data-action="prev"
igxCalendarScrollPage
(mousedown)="previousPage()"
(mousedown)="previousPage($event)"
(keydown)="changePageKB($event, false)"
>
<ng-container *ngTemplateOutlet="prevArrow"></ng-container>
Expand All @@ -35,7 +35,7 @@
[attr.aria-label]="nextNavLabel((getNextYearDate(viewDate) | date: 'yyyy'))"
data-action="next"
igxCalendarScrollPage
(mousedown)="nextPage()"
(mousedown)="nextPage($event)"
(keydown)="changePageKB($event)"
>
<ng-container *ngTemplateOutlet="nextArrow"></ng-container>
Expand Down Expand Up @@ -131,8 +131,8 @@
[monthFormat]="formatOptions.month"
[showActive]="showActiveDay"
[standalone]="false"
(swiperight)="previousPage()"
(swipeleft)="nextPage()"
(swiperight)="previousPage($event)"
(swipeleft)="nextPage($event)"
(selected)="selectMonth($event)"
(pageChanged)="updateDate($event)"
(mousedown)="$event.preventDefault()">
Expand All @@ -151,8 +151,8 @@
[yearFormat]="formatOptions.year"
[showActive]="showActiveDay"
[standalone]="false"
(swiperight)="previousPage()"
(swipeleft)="nextPage()"
(swiperight)="previousPage($event)"
(swipeleft)="nextPage($event)"
(selected)="selectYear($event)"
(pageChanged)="updateDate($event)"
(mousedown)="$event.preventDefault()"
Expand Down
10 changes: 5 additions & 5 deletions projects/igniteui-angular/calendar/src/calendar/month-picker/month-picker.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
* @hidden
*/
@HostListener("keydown.pageup", ["$event"])
public previousPage(event?: KeyboardEvent) {
public previousPage(event) {
event?.preventDefault();
this.previousViewDate = this.viewDate;

Expand All @@ -124,7 +124,7 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
* @hidden
*/
@HostListener("keydown.pagedown", ["$event"])
public nextPage(event?: KeyboardEvent) {
public nextPage(event) {
event?.preventDefault();
this.previousViewDate = this.viewDate;

Expand Down Expand Up @@ -206,9 +206,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
event.stopPropagation();

if (next) {
this.nextPage();
this.nextPage(event);
} else {
this.previousPage();
this.previousPage(event);
}
}
}
Expand Down Expand Up @@ -370,7 +370,7 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
this.viewDate = CalendarDay.from(this.viewDate).add('year', delta).native;
this.cdr.detectChanges();
} else {
delta > 0 ? this.nextPage() : this.previousPage();
delta > 0 ? this.nextPage(event) : this.previousPage(event);
}
}

Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/chips/src/chips/chips-area.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
protected destroy$ = new Subject<boolean>();

@HostBinding('class')
private hostClass = 'igx-chip-area';
public hostClass = 'igx-chip-area';

private modifiedChipsArray: IgxChipComponent[];
private _differ: IterableDiffer<IgxChipComponent> | null = null;
Expand Down
4 changes: 2 additions & 2 deletions ...r/date-picker/src/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

import { IgxChipComponent } from 'igniteui-angular/chips';
import { CalendarDay, CustomDateRange, DateRange, DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from 'igniteui-angular/core';

Expand All @@ -9,7 +9,7 @@ type PredefinedRangeKey = 'last7Days' | 'currentMonth' | 'last30Days' | 'yearToD
@Component({
selector: 'igx-predefined-ranges-area',
standalone: true,
imports: [CommonModule, IgxChipComponent],
imports: [IgxChipComponent],
templateUrl: './predefined-ranges-area-component.html',
styles: [`
:host { display:block; }
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/directives/src/directives/button/icon-button.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class IgxIconButtonDirective extends IgxButtonBaseDirective {
* @internal
*/
@HostBinding('class.igx-icon-button')
private _cssClass = 'igx-icon-button';
public _cssClass = 'igx-icon-button';

/**
* @hidden
Expand Down
8 changes: 4 additions & 4 deletions projects/igniteui-angular/directives/src/directives/form-control/form-control.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
@Directive({
selector: 'igc-rating[ngModel],igc-rating[formControlName]',
providers: [
{
Expand Down Expand Up @@ -35,9 +35,9 @@ export class IgcFormControlDirective implements ControlValueAccessor {
}

/** @hidden @internal */
@HostListener('igcChange', ['$event.detail'])
public listenForValueChange(value) {
this.onChange(value);
@HostListener('igcChange', ['$event'])
public listenForValueChange(event): void {
this.onChange(event.detail);
}

/** @hidden @internal */
Expand Down
6 changes: 3 additions & 3 deletions projects/igniteui-angular/directives/src/directives/mask/mask.directive.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,10 +273,10 @@ export class IgxMaskDirective implements OnInit, AfterViewChecked, ControlValueA
}

/** @hidden */
@HostListener('blur', ['$event.target.value'])
public onBlur(value: string): void {
@HostListener('blur', ['$event'])
public onBlur(event): void {
this._focused = false;
this.showDisplayValue(value);
this.showDisplayValue(event.target.value);
this._onTouchedCallback();
}

Expand Down
Loading
Loading