WIP. Update to Demos to Angular 21 for testing with DX under Angular 17 (updated)

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { NgModule, Component, enableProdMode } from '@angular/core';
+import { NgModule, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
@@ -19,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
@@ -43,6 +44,7 @@ export class AppComponent {
   ],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
+  providers: [provideZoneChangeDetection({ eventCoalescing: true })]
 })
 export class AppModule { }
 

apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.ts

@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.ts

@@ -1,7 +1,7 @@
 import { Component, NgModule, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxAutocompleteModule } from 'devextreme-angular';
 import { CustomStore } from 'devextreme-angular/common/data';
@@ -23,6 +23,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,
@@ -98,8 +99,8 @@ export class AppComponent {
   imports: [
     BrowserModule,
     DxAutocompleteModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/Box/Overview/Angular/app/app.component.ts

@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Button/Icons/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,

apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Calendar/Overview/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts

@@ -22,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/CardTemplate/Angular/app/license-info/license-info.component.ts

@@ -8,6 +8,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'license-info',
   templateUrl: `.${modulePrefix}/license-info/license-info.component.html`,
 })

apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.ts

@@ -7,6 +7,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'vehicle-card',
   templateUrl: `.${modulePrefix}/vehicle-card/vehicle-card.component.html`,
   styleUrls: [`.${modulePrefix}/vehicle-card/vehicle-card.component.css`],

apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/ColumnHeaderFilter/Angular/app/app.component.ts

@@ -19,6 +19,7 @@ function getOrderDay(rowData: Order) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/ColumnReordering/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/DataValidation/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],
@@ -70,8 +71,8 @@ export class AppComponent {
     BrowserModule,
     DxCardViewModule,
     DxTextAreaModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.ts

@@ -22,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/FieldTemplate/Angular/app/card-header/card-header.component.ts

@@ -7,6 +7,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'card-header',
   templateUrl: `.${modulePrefix}/card-header/card-header.component.html`,
   styleUrls: [`.${modulePrefix}/card-header/card-header.component.css`],

apps/demos/Demos/CardView/FieldTemplate/Angular/app/employee/employee.component.ts

@@ -8,6 +8,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'employee',
   templateUrl: `.${modulePrefix}/employee/employee.component.html`,
   styleUrls: [`.${modulePrefix}/employee/employee.component.css`],

apps/demos/Demos/CardView/FieldTemplate/Angular/app/priority/priority.component.ts

@@ -8,6 +8,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'priority',
   templateUrl: `.${modulePrefix}/priority/priority.component.html`,
   styleUrls: [`.${modulePrefix}/priority/priority.component.css`],

apps/demos/Demos/CardView/FieldTemplate/Angular/app/progress-bar/progress-bar.component.ts

@@ -7,6 +7,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'progress-bar',
   templateUrl: `.${modulePrefix}/progress-bar/progress-bar.component.html`,
   styleUrls: [`.${modulePrefix}/progress-bar/progress-bar.component.css`],

apps/demos/Demos/CardView/FilterPanel/Angular/app/app.component.ts

@@ -19,6 +19,7 @@ function getOrderDay({ OrderDate }: Order): number {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/Overview/Angular/app/app.component.ts

@@ -18,6 +18,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/PopupEditing/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/SearchPanel/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/Selection/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/SimpleArray/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/Sorting/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   providers: [Service],

apps/demos/Demos/CardView/WebAPIService/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 const url = 'https://js.devexpress.com/Demos/NetCore/api/TreeListTasks';
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
 })

apps/demos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/Annotation/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/Area/Angular/app/app.component.ts

@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/AreaSelectionZooming/Angular/app/app.component.ts

@@ -19,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,

apps/demos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts

@@ -15,6 +15,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/AutoCalculatedBarWidth/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/AxisCustomPosition/Angular/app/app.component.ts

@@ -16,6 +16,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,

apps/demos/Demos/Charts/AxisLabelCustomization/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/BarColorCustomization/Angular/app/app.component.ts

@@ -17,6 +17,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Charts/BarDrillDown/Angular/app/app.component.ts

@@ -18,6 +18,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,

apps/demos/Demos/Charts/BarSparklines/Angular/app/app.component.ts

@@ -1,7 +1,7 @@
 import { NgModule, Component, enableProdMode } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 
 import { DxSparklineModule, DxSelectBoxModule } from 'devextreme-angular';
@@ -18,6 +18,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  standalone: false,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
@@ -52,10 +53,10 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxSparklineModule,
     DxSelectBoxModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })