Up to Angular 19 of devextreme-angular (#32041)

Author: GoodDayForSurf

apps/angular/angular.json

@@ -11,18 +11,22 @@
       "schematics": {},
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/sandbox",
+            "outputPath": {
+              "base": "dist/sandbox"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "src/tsconfig.app.json",
             "styles": [
               "node_modules/devextreme/dist/css/dx.common.css",
               "node_modules/devextreme/dist/css/dx.light.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -35,12 +39,9 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -53,26 +54,23 @@
               "optimization": false,
               "outputHashing": "none",
               "sourceMap": true,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": false
+              "extractLicenses": true
             }
           }
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "sandbox:build"
+            "buildTarget": "sandbox:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "sandbox:build:production"
+              "buildTarget": "sandbox:build:production"
             },
             "dev": {
-              "browserTarget": "sandbox:build:dev"
+              "buildTarget": "sandbox:build:dev"
             }
           }
         },
@@ -93,6 +91,5 @@
         }
       }
     }
-  },
-  "defaultProject": "sandbox"
+  }
 }

apps/angular/package.json

@@ -6,32 +6,28 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {
-    "@angular/animations": "17.3.12",
-    "@angular/common": "17.3.12",
-    "@angular/compiler": "17.3.12",
-    "@angular/compiler-cli": "17.3.12",
-    "@angular/core": "17.3.12",
-    "@angular/forms": "17.3.12",
-    "@angular/platform-browser": "17.3.12",
-    "@angular/platform-browser-dynamic": "17.3.12",
-    "@angular/router": "17.3.12",
+    "@angular/common": "catalog:angular",
+    "@angular/compiler": "catalog:angular",
+    "@angular/compiler-cli": "catalog:angular",
+    "@angular/core": "catalog:angular",
+    "@angular/forms": "catalog:angular",
+    "@angular/platform-browser": "catalog:angular",
+    "@angular/platform-browser-dynamic": "catalog:angular",
+    "@angular/router": "catalog:angular",
     "core-js": "^2.6.12",
     "devextreme": "workspace:*",
     "devextreme-angular": "workspace:*",
-    "rxjs": "7.8.1",
     "tslib": "^2.6.1",
-    "zone.js": "0.14.10"
+    "zone.js": "catalog:angular"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.11",
-    "@angular/cli": "17.3.11",
-    "@angular/language-service": "17.3.12",
-    "@angular/platform-server": "17.3.12",
+    "@angular-devkit/build-angular": "catalog:angular",
+    "@angular/cli": "catalog:angular",
     "@types/jasmine": "5.1.4",
     "@types/node": "20.11.17",
     "cross-env": "7.0.3",
     "ts-node": "10.9.2",
-    "typescript": "5.4.5"
+    "typescript": "catalog:angular"
   },
   "scripts": {
     "ng": "ng",

apps/angular/src/app/app.component.ts

@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
   Component,
   OnInit,
@@ -95,7 +94,8 @@ import ArrayStore from 'devextreme/data/array_store';
     CustomerService,
     AppointmentService,
     OwnerService
-  ]
+  ],
+  standalone: false
 })
 export class AppComponent implements OnInit, AfterViewInit {
   @ViewChild(DxPopoverComponent) popover: DxPopoverComponent;

apps/angular/src/app/app.module.ts

@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { ReactiveFormsModule } from '@angular/forms';
 import { AppComponent } from './app.component';
 
-
 import { DevExtremeModule } from 'devextreme-angular';
 
 @NgModule({

apps/angular/tsconfig.json

@@ -5,12 +5,11 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "ES2022",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "importHelpers": true,
-    "target": "es5",
     "typeRoots": [
       "node_modules/@types"
     ],

packages/devextreme-angular/package.json

@@ -19,24 +19,22 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": ">=17.0.0",
-    "@angular/core": ">=17.0.0",
-    "@angular/forms": ">=17.0.0",
+    "@angular/common": ">=19.0.0",
+    "@angular/core": ">=19.0.0",
+    "@angular/forms": ">=19.0.0",
     "devextreme": "workspace:*"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "0.1900.2",
-    "@angular-devkit/schematics": "17.3.11",
-    "@angular/animations": "17.3.12",
-    "@angular/cli": "17.3.11",
-    "@angular/common": "17.3.12",
-    "@angular/compiler": "17.3.12",
-    "@angular/compiler-cli": "17.3.12",
-    "@angular/core": "17.3.12",
-    "@angular/forms": "17.3.12",
-    "@angular/platform-browser": "17.3.12",
-    "@angular/platform-browser-dynamic": "17.3.12",
-    "@angular/platform-server": "17.3.12",
+    "@angular-devkit/architect": "catalog:angular",
+    "@angular/cli": "catalog:angular",
+    "@angular/common": "catalog:angular",
+    "@angular/compiler": "catalog:angular",
+    "@angular/compiler-cli": "catalog:angular",
+    "@angular/core": "catalog:angular",
+    "@angular/forms": "catalog:angular",
+    "@angular/platform-browser": "catalog:angular",
+    "@angular/platform-browser-dynamic": "catalog:angular",
+    "@angular/platform-server": "catalog:angular",
     "@babel/eslint-parser": "catalog:",
     "@eslint/eslintrc": "catalog:",
     "@eslint-stylistic/metadata": "catalog:",
@@ -54,23 +52,23 @@
     "eslint-config-devextreme": "1.1.5",
     "eslint-plugin-import": "catalog:",
     "eslint-migration-utils": "workspace:*",
-    "jasmine": "5.4.0",
+    "jasmine": "5.12.0",
     "karma": "6.4.4",
     "karma-chrome-launcher": "3.2.0",
     "karma-jasmine": "5.1.0",
     "karma-junit-reporter": "2.0.1",
     "karma-webpack": "5.0.1",
-    "ng-packagr": "17.3.0",
+    "ng-packagr": "catalog:angular",
     "puppeteer": "23.6.1",
+    "rxjs": "7.8.2",
     "reflect-metadata": "0.1.13",
-    "rxjs": "7.8.1",
     "stream-browserify": "3.0.0",
     "style-loader": "3.3.4",
     "tslib": "2.6.3",
-    "typescript": "5.4.5",
+    "typescript": "catalog:angular",
     "webpack": "5.96.1",
     "yargs": "17.7.2",
-    "zone.js": "0.14.10"
+    "zone.js": "catalog:angular"
   },
   "main": "./src/index.ts",
   "keywords": [
@@ -111,7 +109,7 @@
     "shadowdom"
   ],
   "dependencies": {
-    "@angular-devkit/schematics": "17.3.11",
+    "@angular-devkit/schematics": "catalog:angular",
     "devextreme-schematics": "*",
     "inferno-server": "catalog:"
   },

packages/devextreme-angular/tests/src/core/component-extension.spec.ts

@@ -30,6 +30,7 @@ DxTestExtension.defaultOptions({
 });
 
 @Component({
+  standalone: false,
   selector: 'dx-test-extension',
   template: '',
   providers: [DxTemplateHost, WatcherHelper],
@@ -52,6 +53,7 @@ export class DxTestExtensionComponent extends DxComponentExtension {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-container-component',
   template: '',
 })

packages/devextreme-angular/tests/src/core/component.spec.ts

@@ -39,6 +39,7 @@ DxTestWidget.defaultOptions({
 });
 
 @Component({
+  standalone: false,
   selector: 'dx-test-widget',
   template: '',
   providers: [DxTemplateHost, WatcherHelper],
@@ -104,6 +105,7 @@ export class DxTestWidgetComponent extends DxComponent implements OnDestroy {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-container-component',
   template: '',
 })

packages/devextreme-angular/tests/src/core/nested-option.spec.ts

@@ -48,6 +48,7 @@ DxTestWidget.defaultOptions({
 });
 
 @Component({
+  standalone: false,
   selector: 'dxo-test-option',
   template: '',
   providers: [NestedOptionHost],
@@ -81,6 +82,7 @@ export class DxoTestOptionComponent extends NestedOption {
 }
 
 @Component({
+  standalone: false,
   selector: 'dxi-test-collection-option',
   template: '',
   providers: [NestedOptionHost],
@@ -114,6 +116,7 @@ export class DxiTestCollectionOptionComponent extends CollectionNestedOption {
 }
 
 @Component({
+  standalone: false,
   selector: 'dxi-test-collection-option-with-template',
   template: '<ng-content></ng-content>',
   providers: [NestedOptionHost],
@@ -163,6 +166,7 @@ export class DxiTestCollectionOptionWithTemplateComponent extends CollectionNest
 }
 
 @Component({
+  standalone: false,
   selector: 'dx-test-widget',
   template: '',
   providers: [DxTemplateHost, NestedOptionHost, WatcherHelper],
@@ -244,6 +248,7 @@ export class DxTestWidgetComponent extends DxComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-container-component',
   template: '',
 })

packages/devextreme-angular/tests/src/core/template.spec.ts

@@ -36,6 +36,7 @@ DxTestWidget.defaultOptions({
 });
 
 @Component({
+  standalone: false,
   selector: 'dx-test-widget',
   template: '',
   providers: [DxTemplateHost, WatcherHelper],
@@ -76,6 +77,7 @@ export class DxTestWidgetComponent extends DxComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'dx-test',
   template: '',
   providers: [DxTemplateHost, WatcherHelper],
@@ -116,6 +118,7 @@ export class DxTestComponent extends DxComponent implements AfterViewInit {
 }
 
 @Component({
+  standalone: false,
   selector: 'test-container-component',
   template: '',
   providers: [DxTemplateHost],
@@ -143,6 +146,7 @@ export class TestContainerComponent {
 }
 
 @Component({
+  standalone: false,
   selector: 'dx-imitation',
   template: `
         <div *dxTemplate="let d of 'ImportedTemlate'">