Skip to content

Commit 9e40815

Browse files
Updating master to Angular v21 (#16345)
--------- Co-authored-by: Radoslav Karaivanov <[email protected]>
1 parent 5140e07 commit 9e40815

File tree

33 files changed

+15500
-13487
lines changed

33 files changed

+15500
-13487
lines changed

package-lock.json

Lines changed: 15242 additions & 13263 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,17 @@
5959
},
6060
"private": true,
6161
"dependencies": {
62-
"@angular/animations": "^20.3.6",
63-
"@angular/common": "^20.3.6",
64-
"@angular/compiler": "^20.3.6",
65-
"@angular/core": "^20.3.6",
66-
"@angular/elements": "^20.3.6",
67-
"@angular/forms": "^20.3.6",
68-
"@angular/platform-browser": "^20.3.6",
69-
"@angular/platform-browser-dynamic": "^20.3.6",
70-
"@angular/platform-server": "^20.3.6",
71-
"@angular/router": "^20.3.6",
72-
"@angular/ssr": "^20.3.6",
62+
"@angular/animations": "^21.0.0",
63+
"@angular/common": "^21.0.0",
64+
"@angular/compiler": "^21.0.0",
65+
"@angular/core": "^21.0.0",
66+
"@angular/elements": "^21.0.0",
67+
"@angular/forms": "^21.0.0",
68+
"@angular/platform-browser": "^21.0.0",
69+
"@angular/platform-browser-dynamic": "^21.0.0",
70+
"@angular/platform-server": "^21.0.0",
71+
"@angular/router": "^21.0.0",
72+
"@angular/ssr": "^21.0.0",
7373
"@igniteui/material-icons-extended": "^3.1.0",
7474
"@lit-labs/ssr-dom-shim": "^1.3.0",
7575
"@types/source-map": "0.5.2",
@@ -83,16 +83,16 @@
8383
"zone.js": "~0.15.0"
8484
},
8585
"devDependencies": {
86-
"@angular-devkit/schematics": "^20.3.6",
87-
"@angular-eslint/builder": "^20.4.0",
88-
"@angular-eslint/eslint-plugin": "^20.4.0",
89-
"@angular-eslint/eslint-plugin-template": "^20.4.0",
90-
"@angular-eslint/schematics": "^20.4.0",
91-
"@angular-eslint/template-parser": "^20.4.0",
92-
"@angular/build": "^20.3.6",
93-
"@angular/cli": "^20.3.9",
94-
"@angular/compiler-cli": "^20.3.6",
95-
"@angular/language-service": "^20.3.6",
86+
"@angular-devkit/schematics": "^21.0.0",
87+
"@angular-eslint/builder": "^20.6.0",
88+
"@angular-eslint/eslint-plugin": "^20.6.0",
89+
"@angular-eslint/eslint-plugin-template": "^20.6.0",
90+
"@angular-eslint/schematics": "^20.6.0",
91+
"@angular-eslint/template-parser": "^20.6.0",
92+
"@angular/build": "^21.0.0",
93+
"@angular/cli": "^21.0.0",
94+
"@angular/compiler-cli": "^21.0.0",
95+
"@angular/language-service": "^21.0.0",
9696
"@angularclass/hmr": "^3.0.0",
9797
"@microsoft/signalr": "^7.0.12",
9898
"@types/estree": "^1.0.0",
@@ -132,7 +132,7 @@
132132
"karma-parallel": "^0.3.1",
133133
"karma-spec-reporter": "^0.0.36",
134134
"lit-html": "^3.2.1",
135-
"ng-packagr": "^20.0.0",
135+
"ng-packagr": "^21.0.0",
136136
"postcss": "^8.5.1",
137137
"postcss-scss": "^4.0.6",
138138
"prettier": "^3.3.3",
@@ -148,6 +148,6 @@
148148
"ts-node": "^10.8.1",
149149
"typedoc": "^0.28.14",
150150
"typedoc-plugin-localization": "^3.1.0",
151-
"typescript": "5.8.3"
151+
"typescript": "5.9.3"
152152
}
153153
}
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1+
import { provideZoneChangeDetection } from "@angular/core";
12
import { bootstrapApplication, BootstrapContext } from '@angular/platform-browser';
23
import { AppComponent } from './app/app.component';
34
import { config } from './app/app.config.server';
45

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

78
export default bootstrap;

projects/bundle-test/src/main.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { provideZoneChangeDetection } from "@angular/core";
12
import { AppComponent } from './app/app.component';
23
import { bootstrapApplication } from '@angular/platform-browser';
34
import { appConfig } from './app/app.config';
45

56

6-
bootstrapApplication(AppComponent, appConfig).catch(err => console.error(err));
7+
bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.error(err));
Lines changed: 78 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ComponentFixture, TestBed } from '@angular/core/testing';
2-
import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service';
3-
import { Component, SecurityContext } from '@angular/core';
2+
import { ActionType, BroadcastIconsChangeMessage, IgxIconBroadcastService, SvgIcon, } from './icon.broadcast.service';
3+
import { Component, inject } from '@angular/core';
44
import { IconMeta, IgxIconService } from 'igniteui-angular';
55
import { wait } from 'igniteui-angular/test-utils/ui-interactions.spec';
66

@@ -9,107 +9,107 @@ describe('Icon broadcast service', () => {
99
let broadcastChannel: BroadcastChannel;
1010
let events: BroadcastIconsChangeMessage[] = [];
1111
const buildIcon =
12-
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
12+
'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"/></svg>';
1313

1414
beforeEach(async () => {
1515
await TestBed.configureTestingModule({
16-
imports: [],
17-
providers: [IgxIconBroadcastService]
16+
imports: [],
17+
providers: [IgxIconBroadcastService]
1818
})
19-
.compileComponents();
20-
});
19+
.compileComponents();
20+
});
2121

22-
beforeEach(() => {
22+
beforeEach(() => {
2323
broadcastChannel = new BroadcastChannel("ignite-ui-icon-channel");
2424
broadcastChannel.onmessage = (e: MessageEvent<BroadcastIconsChangeMessage>) => {
2525
events.push(e.data);
2626
}
2727
fixture = TestBed.createComponent(BroadcastServiceComponent);
28-
});
28+
});
2929

30-
afterEach(() => {
30+
afterEach(() => {
3131
events = [];
3232
broadcastChannel.close();
33-
});
33+
});
3434

3535
describe('Broadcast Events', () => {
36-
it('should correctly process event of icons registering on channel.', async() => {
37-
// simulate a new icon being registered on channel
38-
const icons: Map<string, Map<string, SvgIcon>> = new Map();
39-
const icon: Map<string, SvgIcon> = new Map()
40-
icon.set("customIcon", { svg: buildIcon });
41-
icons.set("customCollection", icon);
42-
const message: BroadcastIconsChangeMessage = {
43-
actionType: ActionType.RegisterIcon,
44-
collections: icons
45-
};
46-
broadcastChannel.postMessage(message);
47-
fixture.detectChanges();
48-
await wait(50);
49-
fixture.detectChanges();
50-
const iconService = fixture.componentInstance.iconService;
51-
const svg = iconService.getSvgIcon("customIcon", "customCollection");
52-
expect(svg).not.toBeUndefined();
53-
});
36+
it('should correctly process event of icons registering on channel.', async () => {
37+
// simulate a new icon being registered on channel
38+
const icons: Map<string, Map<string, SvgIcon>> = new Map();
39+
const icon: Map<string, SvgIcon> = new Map();
40+
icon.set("customIcon", { svg: buildIcon });
41+
icons.set("customCollection", icon);
42+
const message: BroadcastIconsChangeMessage = {
43+
actionType: ActionType.RegisterIcon,
44+
collections: icons
45+
};
46+
broadcastChannel.postMessage(message);
47+
fixture.detectChanges();
48+
await wait(50);
49+
fixture.detectChanges();
50+
const iconService = fixture.componentInstance.iconService;
51+
const svg = iconService.getSvgIcon("customIcon", "customCollection");
52+
expect(svg).not.toBeUndefined();
53+
});
5454

55-
it('should correctly process event of setting an icon reference on channel.', async() => {
56-
const refs: Map<string, Map<string, IconMeta>> = new Map();
57-
const ref: Map<string, IconMeta> = new Map()
58-
ref.set("customIcon", {name: "customNameOfIcon", collection: "customCollection" } as any);
59-
refs.set("customCollection", ref);
60-
const message: BroadcastIconsChangeMessage = {
61-
actionType: ActionType.UpdateIconReference,
62-
references: refs
63-
};
64-
broadcastChannel.postMessage(message);
65-
fixture.detectChanges();
66-
await wait(50);
67-
fixture.detectChanges();
55+
it('should correctly process event of setting an icon reference on channel.', async () => {
56+
const refs: Map<string, Map<string, IconMeta>> = new Map();
57+
const ref: Map<string, IconMeta> = new Map();
58+
ref.set("customIcon", { name: "customNameOfIcon", collection: "customCollection" } as any);
59+
refs.set("customCollection", ref);
60+
const message: BroadcastIconsChangeMessage = {
61+
actionType: ActionType.UpdateIconReference,
62+
references: refs
63+
};
64+
broadcastChannel.postMessage(message);
65+
fixture.detectChanges();
66+
await wait(50);
67+
fixture.detectChanges();
6868

69-
const iconService = fixture.componentInstance.iconService;
70-
const serviceRef = iconService.getIconRef("customIcon", "default");
71-
expect(serviceRef.family).toBe("customCollection");
72-
expect(serviceRef.name).toBe("customNameOfIcon");
73-
});
69+
const iconService = fixture.componentInstance.iconService;
70+
const serviceRef = iconService.getIconRef("customIcon", "default");
71+
expect(serviceRef.family).toBe("customCollection");
72+
expect(serviceRef.name).toBe("customNameOfIcon");
73+
});
7474

75-
it('should send a request to sync state from any peer already on the channel on init.', async() => {
76-
await wait(50);
77-
expect(events.length).toBe(1);
78-
expect(events[0].actionType).toBe(ActionType.SyncState);
79-
});
75+
it('should send a request to sync state from any peer already on the channel on init.', async () => {
76+
await wait(50);
77+
expect(events.length).toBe(1);
78+
expect(events[0].actionType).toBe(ActionType.SyncState);
79+
});
8080

81-
it('should correctly process event of synching full state of icons on channel.', async() => {
82-
const icons: Map<string, Map<string, SvgIcon>> = new Map();
83-
const icon: Map<string, SvgIcon> = new Map()
84-
icon.set("customIcon", { svg: buildIcon });
85-
icons.set("customCollection", icon);
86-
const refs: Map<string, Map<string, IconMeta>> = new Map();
87-
const ref: Map<string, IconMeta> = new Map()
88-
ref.set("customIcon", {name: "customIcon", family: "customCollection" });
89-
refs.set("customCollection", ref);
90-
const message: BroadcastIconsChangeMessage = {
91-
actionType: ActionType.SyncState,
92-
collections: icons,
93-
references: refs
94-
};
95-
broadcastChannel.postMessage(message);
96-
await wait(50);
97-
const iconService = fixture.componentInstance.iconService;
98-
const svg = iconService.getSvgIcon("customIcon", "customCollection");
99-
expect(svg).not.toBeUndefined();
100-
const serviceRef = iconService.getIconRef("customIcon", "customCollection");
101-
expect(serviceRef.family).toBe("customCollection");
102-
expect(serviceRef.name).toBe("customIcon");
103-
});
81+
it('should correctly process event of synching full state of icons on channel.', async () => {
82+
const icons: Map<string, Map<string, SvgIcon>> = new Map();
83+
const icon: Map<string, SvgIcon> = new Map()
84+
icon.set("customIcon", { svg: buildIcon });
85+
icons.set("customCollection", icon);
86+
const refs: Map<string, Map<string, IconMeta>> = new Map();
87+
const ref: Map<string, IconMeta> = new Map()
88+
ref.set("customIcon", { name: "customIcon", family: "customCollection" });
89+
refs.set("customCollection", ref);
90+
const message: BroadcastIconsChangeMessage = {
91+
actionType: ActionType.SyncState,
92+
collections: icons,
93+
references: refs
94+
};
95+
broadcastChannel.postMessage(message);
96+
await wait(50);
97+
const iconService = fixture.componentInstance.iconService;
98+
const svg = iconService.getSvgIcon("customIcon", "customCollection");
99+
expect(svg).not.toBeUndefined();
100+
const serviceRef = iconService.getIconRef("customIcon", "customCollection");
101+
expect(serviceRef.family).toBe("customCollection");
102+
expect(serviceRef.name).toBe("customIcon");
103+
});
104104
})
105105
});
106106

107107
@Component({
108-
template: `
109-
`,
108+
template: ``,
110109
standalone: true,
111110
providers: [IgxIconBroadcastService, IgxIconService]
112111
})
113112
export class BroadcastServiceComponent {
114-
constructor(public iconBroadcast: IgxIconBroadcastService, public iconService: IgxIconService) {}
113+
public iconBroadcast = inject(IgxIconBroadcastService);
114+
public iconService = inject(IgxIconService);
115115
}

projects/igniteui-angular-elements/src/utils/injector-ref.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { createEnvironmentInjector, EnvironmentInjector, getPlatform, importProvidersFrom, provideZoneChangeDetection, ɵChangeDetectionScheduler, ɵChangeDetectionSchedulerImpl } from '@angular/core';
1+
import { ClassProvider, createEnvironmentInjector, EnvironmentInjector, getPlatform, importProvidersFrom, provideZoneChangeDetection, ɵChangeDetectionScheduler, ɵprovideZonelessChangeDetectionInternal, } from '@angular/core';
22
import { BrowserModule, platformBrowser } from '@angular/platform-browser';
33
import { provideAnimations } from '@angular/platform-browser/animations';
44
import { IgxIconBroadcastService } from '../lib/icon.broadcast.service';
@@ -24,11 +24,14 @@ const platformInjector = getPlatform()?.injector ?? platformBrowser().injector;
2424
// createEnvironmentInjector is a public wrapper around EnvironmentNgModuleRefAdapter
2525
// https://github.com/angular/angular/blob/969dadc8e2fad8ca9d892858bdadbe3abb13de95/packages/core/src/application/create_application.ts#L56C25-L56C54
2626
const injector = createEnvironmentInjector([
27-
// TODO: -> provideExperimentalZonelessChangeDetection
27+
// TODO: -> provideExperimentalZonelessChangeDetection
2828
provideZoneChangeDetection({ eventCoalescing: true }),
2929
// Required, but only provided internally by `provideExperimentalZonelessChangeDetection`, `bootstrapModuleFactory`
3030
// & `internalCreateApplication` (`bootstrapApplication`/`createApplication`), so no public API alternative:
31-
{ provide: ɵChangeDetectionScheduler, useExisting: ɵChangeDetectionSchedulerImpl },
31+
32+
// Still no "direct" public API but at least `ɵprovideZonelessChangeDetectionInternal` exports it somewhat:
33+
// https://github.com/angular/angular/commit/45fed3d2011bf6feffa8ee1365a5c88d603f826c#diff-10544e5a7c018dbc5dc5a1d4192919bb839c5d1b7cbcc1b20f57aa74c2ae7febR391-R397
34+
ɵprovideZonelessChangeDetectionInternal().find((entity) => (entity as ClassProvider).provide === ɵChangeDetectionScheduler),
3235
importProvidersFrom(BrowserModule),
3336
// Elements specific:
3437
provideAnimations(),

projects/igniteui-angular-i18n/tsconfig.build.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"rootDir": "./src",
55
"target": "es2015",
66
"module": "esnext",
7-
"moduleResolution": "node",
7+
"moduleResolution": "bundler",
88
"declaration": true,
99
"outDir": "../../dist/igniteui-angular-i18n",
1010
"stripInternal": true,

projects/igniteui-angular/calendar/src/calendar/days-view/days-view.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
262262
/**
263263
* @hidden
264264
*/
265-
@HostListener('keydown.Space', ['$event'])
265+
@HostListener('keydown.space', ['$event'])
266266
@HostListener('keydown.enter', ['$event'])
267267
protected onKeydownEnter(event: KeyboardEvent) {
268268
event.stopPropagation();

projects/igniteui-angular/chips/src/chips/chips-area.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
187187
protected destroy$ = new Subject<boolean>();
188188

189189
@HostBinding('class')
190-
private hostClass = 'igx-chip-area';
190+
protected hostClass = 'igx-chip-area';
191191

192192
private modifiedChipsArray: IgxChipComponent[];
193193
private _differ: IterableDiffer<IgxChipComponent> | null = null;
Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/**
2+
* Global type augmentations for IgniteUI Angular
3+
*/
4+
5+
declare global {
6+
interface GlobalEventHandlersEventMap {
7+
'keydown.enter': KeyboardEvent;
8+
'keydown.escape': KeyboardEvent;
9+
'keydown.tab': KeyboardEvent;
10+
'keydown.arrowup': KeyboardEvent;
11+
'keydown.arrowdown': KeyboardEvent;
12+
'keydown.arrowleft': KeyboardEvent;
13+
'keydown.arrowright': KeyboardEvent;
14+
'keydown.shift.tab': KeyboardEvent;
15+
'keydown.alt.arrowup': KeyboardEvent;
16+
'keydown.alt.arrowdown': KeyboardEvent;
17+
'keydown.pageup': KeyboardEvent;
18+
'keydown.pagedown': KeyboardEvent;
19+
'keydown.home': KeyboardEvent;
20+
'keydown.end': KeyboardEvent;
21+
'keydown.space': KeyboardEvent;
22+
'igcChange': CustomEvent;
23+
}
24+
}
25+
26+
// This export is needed to make this file a module
27+
export {};

0 commit comments

Comments
 (0)