Use Angular 22 in demos

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

@@ -1,4 +1,9 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import {
   DxAccordionModule, DxCheckBoxModule, DxSliderModule, DxTagBoxModule,
@@ -17,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/CardView/DataValidation/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/CardView/WebAPIService/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

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

@@ -1,5 +1,10 @@
 import {
-  Component, AfterViewInit, enableProdMode, provideZoneChangeDetection, inject,
+  ChangeDetectionStrategy,
+  Component,
+  AfterViewInit,
+  enableProdMode,
+  provideZoneChangeDetection,
+  inject,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
@@ -20,6 +25,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

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

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxTreeMapModule, DxSelectBoxModule } from 'devextreme-angular';
 import { PopulationByAge, Service } from './app.service';
@@ -14,6 +14,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/DataGrid/CollaborativeEditing/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/DataGrid/CustomEditors/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/DataGrid/DataValidation/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

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

@@ -1,5 +1,10 @@
 import {
-  Component, ViewChild, AfterViewInit, enableProdMode, provideZoneChangeDetection,
+  Component,
+  ViewChild,
+  AfterViewInit,
+  enableProdMode,
+  provideZoneChangeDetection,
+  ChangeDetectionStrategy,
 } from '@angular/core';
 import { DxDataGridModule, DxDataGridComponent, DxButtonModule } from 'devextreme-angular';
 import { query } from 'devextreme-angular/common/data';
@@ -17,6 +22,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

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

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import Guid from 'devextreme/core/guid';
 import { CustomStore } from 'devextreme-angular/common/data';
@@ -19,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/DataGrid/NewRecordPosition/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

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

@@ -1,5 +1,5 @@
 import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { HttpClient, HttpParams, provideHttpClient, withFetch } from '@angular/common/http';
 import { lastValueFrom, Observable } from 'rxjs';
 import { DxDataGridModule, DxSelectBoxModule, DxButtonModule } from 'devextreme-angular';
@@ -20,6 +20,7 @@ if (window && window.config?.packageConfigPaths) {
 
 @Component({
   selector: 'demo-app',
+  changeDetection: ChangeDetectionStrategy.Eager,
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,

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

@@ -1,4 +1,9 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  enableProdMode,
+  provideZoneChangeDetection,
+} from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxDataGridModule } from 'devextreme-angular';
 import { Service, Employee } from './app.service';
@@ -14,6 +19,7 @@ if (window && window.config?.packageConfigPaths) {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/DataGrid/WebAPIService/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

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

@@ -1,5 +1,10 @@
 import {
-  Component, Pipe, PipeTransform, enableProdMode, provideZoneChangeDetection,
+  ChangeDetectionStrategy,
+  Component,
+  Pipe,
+  PipeTransform,
+  enableProdMode,
+  provideZoneChangeDetection,
 } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { ArrayStore } from 'devextreme-angular/common/data';
@@ -26,6 +31,7 @@ export class StringifyItemsPipe implements PipeTransform {
 }
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],

apps/demos/Demos/Diagram/WebAPIService/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/FileUploader/CustomDropzone/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/FileUploader/FileUploading/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/FileUploader/Validation/ReactJs/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App.js';
-// eslint-disable-next-line import/no-unresolved
+
 import 'anti-forgery';
 
 ReactDOM.render(<App />, document.getElementById('app'));

apps/demos/Demos/FilterBuilder/Customization/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule, DxButtonModule, DxTagBoxModule } from 'devextreme-angular';
 import { DxFilterBuilderModule, DxFilterBuilderComponent, DxFilterBuilderTypes } from 'devextreme-angular/ui/filter-builder';
@@ -31,6 +31,7 @@ if (window && window.config?.packageConfigPaths) {
 @Component({
   selector: 'demo-app',
   providers: [Service],
+  changeDetection: ChangeDetectionStrategy.Eager,
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   imports: [

apps/demos/Demos/List/DragAndDrop/Angular/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DxListModule } from 'devextreme-angular';
 import type { DxSortableTypes } from 'devextreme-angular/ui/sortable';
@@ -21,6 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   providers: [Service],
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
+  changeDetection: ChangeDetectionStrategy.Eager,
   preserveWhitespaces: true,
   imports: [DxListModule],
 })

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

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { DataSource, ArrayStore } from 'devextreme-angular/common/data';
 import { DxSelectBoxModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -23,6 +23,7 @@ if (window && window.config?.packageConfigPaths) {
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     DxSelectBoxModule,
     DxListModule,

apps/demos/Demos/Localization/UsingGlobalize/Vue/App.vue

@@ -67,18 +67,12 @@ import 'devextreme/common/core/localization/globalize/number';
 import 'devextreme/common/core/localization/globalize/date';
 import 'devextreme/common/core/localization/globalize/currency';
 import 'devextreme/common/core/localization/globalize/message';
-// @ts-ignore
-import * as deMessages from 'npm:devextreme/localization/messages/de.json!json';
-// @ts-ignore
-import * as ruMessages from 'npm:devextreme/localization/messages/ru.json!json';
-// @ts-ignore
-import * as deCldrData from 'npm:devextreme-cldr-data/de.json!json';
-// @ts-ignore
-import * as ruCldrData from 'npm:devextreme-cldr-data/ru.json!json';
-// @ts-ignore
-import * as supplementalCldrData from 'npm:devextreme-cldr-data/supplemental.json!json';
-// @ts-ignore
-import * as Globalize from 'globalize';
+import deMessages from 'npm:devextreme/localization/messages/de.json!json';
+import ruMessages from 'npm:devextreme/localization/messages/ru.json!json';
+import deCldrData from 'npm:devextreme-cldr-data/de.json!json';
+import ruCldrData from 'npm:devextreme-cldr-data/ru.json!json';
+import supplementalCldrData from 'npm:devextreme-cldr-data/supplemental.json!json';
+import Globalize from 'globalize';
 import service from './data.ts';
 
 type Locale = string;

apps/demos/Demos/Localization/UsingGlobalize/Vue/systemjs-imports.d.ts

@@ -0,0 +1,34 @@
+declare module 'npm:devextreme/localization/messages/de.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'npm:devextreme/localization/messages/ru.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'npm:devextreme-cldr-data/de.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'npm:devextreme-cldr-data/ru.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'npm:devextreme-cldr-data/supplemental.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'globalize' {
+  const Globalize: {
+    load: (...args: object[]) => void;
+    loadMessages: (messages: object) => void;
+    locale: (locale: string) => void;
+    formatMessage: (key: string, ...args: unknown[]) => string;
+  };
+  export default Globalize;
+}

apps/demos/Demos/Localization/UsingIntl/Vue/App.vue

@@ -63,10 +63,8 @@ import {
   DxDataGrid, DxColumn, DxEditing, DxFilterRow,
 } from 'devextreme-vue/data-grid';
 import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
-// @ts-ignore
-import * as deMessages from 'npm:devextreme/localization/messages/de.json!json';
-// @ts-ignore
-import * as ruMessages from 'npm:devextreme/localization/messages/ru.json!json';
+import deMessages from 'npm:devextreme/localization/messages/de.json!json';
+import ruMessages from 'npm:devextreme/localization/messages/ru.json!json';
 import { locale as dxLocale, loadMessages, formatMessage as dxFormatMessage } from 'devextreme-vue/common/core/localization';
 import service from './data.ts';
 

apps/demos/Demos/Localization/UsingIntl/Vue/systemjs-imports.d.ts

@@ -0,0 +1,9 @@
+declare module 'npm:devextreme/localization/messages/de.json!json' {
+  const json: object;
+  export default json;
+}
+
+declare module 'npm:devextreme/localization/messages/ru.json!json' {
+  const json: object;
+  export default json;
+}

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

@@ -1,4 +1,4 @@
-import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
+import { ChangeDetectionStrategy, Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
 import { bootstrapApplication } from '@angular/platform-browser';
 
 import { DxMultiViewModule, DxCheckBoxModule } from 'devextreme-angular';
@@ -21,6 +21,7 @@ if (window && window.config?.packageConfigPaths) {
   styleUrls: [`.${modulePrefix}/app.component.css`],
   providers: [Service],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.Eager,
   imports: [
     DxMultiViewModule,
     DxCheckBoxModule,