update to Angular 19

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": {
@@ -38,8 +42,6 @@
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",
@@ -54,23 +56,21 @@
               "sourceMap": 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"
             }
           }
         },

apps/angular/package.json

@@ -6,31 +6,29 @@
   "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/animations": "19.2.15",
+    "@angular/common": "19.2.15",
+    "@angular/compiler": "19.2.15",
+    "@angular/compiler-cli": "19.2.15",
+    "@angular/core": "19.2.15",
+    "@angular/forms": "19.2.15",
+    "@angular/platform-browser": "19.2.15",
+    "@angular/platform-browser-dynamic": "19.2.15",
+    "@angular/router": "19.2.17",
     "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": "0.15.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "17.3.11",
-    "@angular/cli": "17.3.11",
-    "@angular/language-service": "17.3.12",
+    "@angular-devkit/build-angular": "19.2.19",
+    "@angular/cli": "19.2.18",
     "@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": "5.8.3"
   },
   "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,9 +19,9 @@
   "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": {
@@ -62,8 +62,8 @@
     "karma-webpack": "5.0.1",
     "ng-packagr": "19.2.2",
     "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",

packages/devextreme-angular/tests/src/server/hydration.spec.ts

@@ -1,22 +1,29 @@
 import { BrowserModule, provideClientHydration } from '@angular/platform-browser';
 import {
-  Component, destroyPlatform, NgModule, PLATFORM_ID, VERSION, importProvidersFrom,
+  Component,
+  destroyPlatform,
+  NgModule,
+  PLATFORM_ID,
+  importProvidersFrom,
 } from '@angular/core';
-import { provideServerRendering, ServerModule } from '@angular/platform-server';
+import { ServerModule, renderModule } from '@angular/platform-server';
 import { DxServerModule } from 'devextreme-angular/server';
 import infernoRenderer from 'devextreme/core/inferno_renderer';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DevExtremeModule } from 'devextreme-angular';
-import { componentNames } from './component-names';
+import { componentNames as componentNamesAll } from './component-names';
+
+const componentNames = componentNamesAll.filter((n) => ['toast', 'action-sheet'].includes(n));
 
 const containerClass = 'container';
 const containerSelector = `.${containerClass}`;
 
 @Component({
   selector: 'app-root',
+  standalone: false,
   template: `<div class="${containerClass}">
-        ${componentNames.map((name) => `<dx-${name}></dx-${name}>`).join('\n')}
-    </div>`,
+    ${componentNames.map((name) => `<dx-${name}></dx-${name}>`).join('\n')}
+  </div>`,
 })
 class AppComponent {}
 
@@ -34,20 +41,13 @@ class AppBrowserModule {}
   bootstrap: [AppComponent],
   providers: [
     provideClientHydration(),
-    provideServerRendering(),
     { provide: PLATFORM_ID, useValue: 'server' },
     importProvidersFrom(DxServerModule),
   ],
 })
 class AppSSRModule {}
 
 class TestHelpers {
-  static createSSRBodyMarkup(ssrComponentsHTML: string): string {
-    const nghData = '[{}]';
-    return `<!--nghm--><app-root ng-version="${VERSION.full}" ngh="0" ng-server-context="ssr">${ssrComponentsHTML}</app-root>
-      <script id="ng-state" type="application/json">{"DX_isPlatformServer":true,"__nghData__":${nghData}}</script>`;
-  }
-
   static normalizeClassNames(element: HTMLElement): void {
     const classNames = Array.from(element.classList).sort();
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -56,18 +56,6 @@ class TestHelpers {
     element.classList.add(...classNames);
   }
 
-  static compareContainers(ssrContainer: HTMLElement, hydratedContainer: HTMLElement): [string, string] {
-    const selector = `${containerSelector} > *`;
-
-    [ssrContainer, hydratedContainer].forEach((container) => {
-      container.querySelectorAll(selector).forEach((el) => {
-        this.normalizeClassNames(el as HTMLElement);
-      });
-    });
-
-    return [ssrContainer.innerHTML, hydratedContainer.innerHTML];
-  }
-
   static hasConsoleMessage(spy: jasmine.Spy, messages: string[]): boolean {
     return spy.calls.allArgs().some((args) => messages.some((msg) => args[0].toLowerCase().includes(msg.toLowerCase())));
   }
@@ -80,11 +68,11 @@ describe('Angular Components Hydration Test', () => {
     log: jasmine.Spy;
   };
   const ssrState: {
-    body: HTMLElement | null;
     containerHtml: string;
+    ssrHTML: string;
   } = {
-    body: null,
     containerHtml: '',
+    ssrHTML: '',
   };
 
   beforeAll(() => {
@@ -105,36 +93,39 @@ describe('Angular Components Hydration Test', () => {
   });
 
   it('should generate correct SSR HTML', async () => {
-    document.body.innerHTML = '<app-root></app-root>';
+    const html = await renderModule(AppSSRModule, {
+      document: '<!DOCTYPE html><html><head></head><body><app-root></app-root></body></html>',
+      url: '/',
+    });
 
-    // Act
-    await platformBrowserDynamic().bootstrapModule(AppSSRModule);
+    ssrState.ssrHTML = html
+      .replace(/ng-server-context="other"/g, 'ng-server-context="ssg"')
+      .replace(/^.*<body/, '<body')
+      .replace(/<\/body>.*$/, '</body>');
+
+    const tempDiv = document.createElement('div');
+    tempDiv.innerHTML = ssrState.ssrHTML;
 
     // Assert
-    ssrState.body = document.body;
-    ssrState.containerHtml = document.querySelector(`${containerSelector}`)?.outerHTML ?? '';
+    ssrState.containerHtml = tempDiv.querySelector(`${containerSelector}`)?.innerHTML ?? '';
 
     expect(ssrState.containerHtml).toBeTruthy();
+    expect(ssrState.ssrHTML).toBeTruthy();
   });
 
   it('should correctly hydrate server-rendered HTML', async () => {
     infernoRenderer.resetInjection();
-    document.body.innerHTML = TestHelpers.createSSRBodyMarkup(ssrState.containerHtml);
+
+    document.body.outerHTML = ssrState.ssrHTML;
 
     // Act
     await platformBrowserDynamic().bootstrapModule(AppBrowserModule);
 
-    // Assert
-    const [ssrResult, hydratedResult] = TestHelpers.compareContainers(
-      ssrState.body.querySelector(`${containerSelector}`),
-      document.querySelector(`${containerSelector}`),
-    );
-
     expect(TestHelpers.hasConsoleMessage(
       consoleSpies.log,
       ['Angular hydrated 1 component(s)'],
     )).toBeTruthy();
 
-    expect(ssrResult).toEqual(hydratedResult);
+    expect(ssrState.containerHtml).toEqual(document.querySelector(`${containerSelector}`).innerHTML);
   });
 });

packages/devextreme-angular/tests/src/server/ssr-ajax.spec.ts

@@ -49,9 +49,9 @@ describe('Universal', () => {
       {
         declarations: [TestContainerComponent],
         imports: [
-         DxServerModule,
-         ServerModule,
-         DxServerTransferStateModule,
+          DxServerModule,
+          ServerModule,
+          DxServerTransferStateModule,
         ],
       },
     );

packages/devextreme-angular/tests/src/server/ssr-components.spec.ts

@@ -20,6 +20,7 @@ import {
 } from './component-names';
 
 @Component({
+  standalone: false,
   selector: 'test-container-component',
   template: '',
 })