chore(*): migrating to angular 21

Author: kdinev

package-lock.json

@@ -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",
@@ -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",
@@ -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",
@@ -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"
   }
 }

package.json

@@ -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;

projects/bundle-test/src/main.server.ts

@@ -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));

projects/bundle-test/src/main.ts

@@ -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';
 
@@ -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; }

projects/igniteui-angular/date-picker/src/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts

@@ -5,13 +5,12 @@ import { CommonModule } from '@angular/common';
 @Component({
   selector: 'igx-tooltip-close-button',
   template: `
-        <ng-container *ngIf="customTemplate; else defaultTemplate">
-            <ng-container *ngTemplateOutlet="customTemplate"></ng-container>
-        </ng-container>
-        <ng-template #defaultTemplate>
-            <igx-icon aria-hidden="true" family="default" name="close"></igx-icon>
-        </ng-template>
-  `,
+        @if (customTemplate) {
+          <ng-container *ngTemplateOutlet="customTemplate"></ng-container>
+        } @else {
+          <igx-icon aria-hidden="true" family="default" name="close"></igx-icon>
+        }
+        `,
   imports: [IgxIconComponent, CommonModule],
 })
 export class IgxTooltipCloseButtonComponent {

projects/igniteui-angular/directives/src/directives/tooltip/tooltip-close-button.component.ts

@@ -73,14 +73,14 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^23.0.0",
+        "igniteui-theming": "^23.1.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {
-        "@angular/common": "20",
-        "@angular/core": "20",
-        "@angular/animations": "20",
-        "@angular/forms": "20",
+        "@angular/common": "21",
+        "@angular/core": "21",
+        "@angular/animations": "21",
+        "@angular/forms": "21",
         "hammerjs": "^2.0.8",
         "@types/hammerjs": "^2.0.40"
     },

projects/igniteui-angular/package.json

@@ -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;

src/main.server.ts

@@ -1,3 +1,4 @@
+import { provideZoneChangeDetection } from "@angular/core";
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
 import localeDe from '@angular/common/locales/de';
@@ -14,4 +15,4 @@ registerLocaleData(localeJa);
 registerLocaleData(localeBb);
 registerLocaleData(localeZh);
 
-bootstrapApplication(AppComponent, appConfig).catch(err => console.log(err));
+bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}).catch(err => console.log(err));

src/main.ts

@@ -16,10 +16,6 @@
       "typeRoots": [
         "node_modules/@types"
       ],
-      "lib": [
-        "es2022",
-        "dom"
-      ],
       "paths": {
         "igniteui-angular": [
           "projects/igniteui-angular/src/public_api.ts"