Updating master to ng next

package.json

@@ -59,17 +59,17 @@
   },
   "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-next.8",
+    "@angular/common": "^21.0.0-next.8",
+    "@angular/compiler": "^21.0.0-next.8",
+    "@angular/core": "^21.0.0-next.8",
+    "@angular/elements": "^21.0.0-next.8",
+    "@angular/forms": "^21.0.0-next.8",
+    "@angular/platform-browser": "^21.0.0-next.8",
+    "@angular/platform-browser-dynamic": "^21.0.0-next.8",
+    "@angular/platform-server": "^21.0.0-next.8",
+    "@angular/router": "^21.0.0-next.8",
+    "@angular/ssr": "^21.0.0-next.8",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@lit-labs/ssr-dom-shim": "^1.3.0",
     "@types/source-map": "0.5.2",
@@ -83,16 +83,16 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/schematics": "^20.3.6",
+    "@angular-devkit/schematics": "^21.0.0-next.8",
     "@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.6",
-    "@angular/compiler-cli": "^20.3.6",
-    "@angular/language-service": "^20.3.6",
+    "@angular/build": "^21.0.0-next.8",
+    "@angular/cli": "^21.0.0-next.8",
+    "@angular/compiler-cli": "^21.0.0-next.8",
+    "@angular/language-service": "^21.0.0-next.8",
     "@angularclass/hmr": "^3.0.0",
     "@microsoft/signalr": "^7.0.12",
     "@types/estree": "^1.0.0",
@@ -132,7 +132,7 @@
     "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-next.4",
     "postcss": "^8.5.1",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.3.3",
@@ -146,8 +146,8 @@
     "stylelint-prettier": "^5.0.2",
     "stylelint-scss": "^6.9.0",
     "ts-node": "^10.8.1",
-    "typedoc": "^0.27.0",
+    "typedoc": "^0.28.14",
     "typedoc-plugin-localization": "^3.0.6",
-    "typescript": "5.8.3"
+    "typescript": "5.9.3"
   }
 }

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

@@ -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.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/igniteui-angular/src/lib/date-range-picker/predefined-ranges/predefined-ranges-area.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, Input, Output, ChangeDetectionStrategy } from '@angular/core';
-import { CommonModule } from '@angular/common';
+
 import { IgxChipComponent } from '../../chips/chip.component';
 import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from '../../core/i18n/date-range-picker-resources';
 import { DateRange, CustomDateRange} from '.././date-range-picker-inputs.common';
@@ -11,7 +11,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/src/lib/directives/tooltip/tooltip-close-button.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 {

src/main.server.ts

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

tsconfig.json

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