Update from Angular 17 to Angular 19

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';
@@ -98,8 +98,8 @@ export class AppComponent {
   imports: [
     BrowserModule,
     DxAutocompleteModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

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/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';
@@ -70,8 +70,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

@@ -23,6 +23,7 @@ if (window && window.config?.packageConfigPaths) {
 
 @Component({
   selector: 'demo-app',
+  standalone: false,
   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/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';
@@ -52,10 +52,10 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxSparklineModule,
     DxSelectBoxModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

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

@@ -3,7 +3,7 @@ import {
 } 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 { DxChartModule, DxSelectBoxModule } from 'devextreme-angular';
@@ -69,10 +69,10 @@ export class AppComponent implements AfterViewInit {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxChartModule,
     DxSelectBoxModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

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

@@ -3,7 +3,7 @@ import {
 } 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 { DxChartComponent, DxChartModule } from 'devextreme-angular';
 import { VisualRange } from 'devextreme-angular/common/charts';
@@ -129,8 +129,8 @@ export class AppComponent {
   imports: [
     BrowserModule,
     DxChartModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.ts

@@ -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`],

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts

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

apps/demos/Demos/DataGrid/BatchUpdateRequest/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 * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { DxDataGridComponent, DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
@@ -92,8 +92,8 @@ export class AppComponent {
   imports: [
     BrowserModule,
     DxDataGridModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/DataGrid/Cell/Angular/app/app.component.ts

@@ -37,7 +37,7 @@ export class AppComponent {
   }
 }
 
-@Pipe({ name: 'gridCellData' })
+@Pipe({ name: 'gridCellData', standalone: true })
 export class GridCellDataPipe implements PipeTransform {
   transform({ data, column }) {
     return data[column.caption.toLowerCase()];
@@ -49,8 +49,9 @@ export class GridCellDataPipe implements PipeTransform {
     BrowserModule,
     DxDataGridModule,
     DxSparklineModule,
+    GridCellDataPipe,
   ],
-  declarations: [AppComponent, GridCellDataPipe],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

apps/demos/Demos/DataGrid/CustomDataSource/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, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { DxDataGridModule } from 'devextreme-angular';
 import { CustomStore, LoadOptions } from 'devextreme-angular/common/data';
@@ -67,8 +67,8 @@ export class AppComponent {
   imports: [
     BrowserModule,
     DxDataGridModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/DataGrid/DataValidation/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 { DxDataGridModule } from 'devextreme-angular';
 import * as AspNetData from 'devextreme-aspnet-data-nojquery';
 import { CustomStore } from 'devextreme-angular/common/data';
@@ -58,9 +58,9 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxDataGridModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/DataGrid/EditStateManagement/Angular/app/app.component.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 import { DxLoadPanelModule } from 'devextreme-angular';
 import { Observable, Subscription } from 'rxjs';
 import { DxDataGridModule, DxDataGridTypes } from 'devextreme-angular/ui/data-grid';
@@ -89,8 +89,8 @@ export class AppComponent implements OnInit, OnDestroy {
     BrowserModule,
     DxDataGridModule,
     DxLoadPanelModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/DataGrid/MasterDetailView/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/DataGrid/MasterDetailView/Angular/app/detail-grid/detail-grid.component.ts

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

apps/demos/Demos/DataGrid/MultipleRecordSelectionAPI/Angular/app/app.component.ts

@@ -60,7 +60,7 @@ export class AppComponent {
   }
 }
 
-@Pipe({ name: 'stringifyEmployees' })
+@Pipe({ name: 'stringifyEmployees', standalone: true })
 export class StringifyEmployeesPipe implements PipeTransform {
   transform(employees: Employee[]) {
     return employees.map((employee) => `${employee.FirstName} ${employee.LastName}`).join(', ');
@@ -73,8 +73,9 @@ export class StringifyEmployeesPipe implements PipeTransform {
     DxDataGridModule,
     DxButtonModule,
     DxSelectBoxModule,
+    StringifyEmployeesPipe,
   ],
-  declarations: [AppComponent, StringifyEmployeesPipe],
+  declarations: [AppComponent],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

apps/demos/Demos/DataGrid/RemoteCRUDOperations/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, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom, Observable } from 'rxjs';
 import { DxDataGridModule, DxSelectBoxModule, DxButtonModule } from 'devextreme-angular';
 import { CustomStore } from 'devextreme-angular/common/data';
@@ -116,8 +116,8 @@ export class AppComponent {
     DxDataGridModule,
     DxSelectBoxModule,
     DxButtonModule,
-    HttpClientModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/Diagram/Adaptability/Angular/app/app.component.ts

@@ -3,7 +3,7 @@ import {
 } 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 { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
 
@@ -37,9 +37,9 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxDiagramModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/Diagram/AdvancedDataBinding/Angular/app/app.component.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { HttpClientModule } from '@angular/common/http';
+import { provideHttpClient, withFetch } from '@angular/common/http';
 
 import { DxDiagramModule } from 'devextreme-angular';
 import { ArrayStore } from 'devextreme-angular/common/data';
@@ -93,9 +93,9 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxDiagramModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })

apps/demos/Demos/Diagram/Containers/Angular/app/app.component.ts

@@ -3,7 +3,7 @@ import {
 } 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 { DxDiagramModule, DxDiagramComponent } from 'devextreme-angular';
 
@@ -37,9 +37,9 @@ export class AppComponent {
 @NgModule({
   imports: [
     BrowserModule,
-    HttpClientModule,
     DxDiagramModule,
   ],
+  providers: [provideHttpClient(withFetch())],
   declarations: [AppComponent],
   bootstrap: [AppComponent],
 })