Update angular wrappers to ng 15 (#25857)

Co-authored-by: Vasily Strelyaev <[email protected]> Co-authored-by: timbset <[email protected]>
DevExpress · Oct 31, 2023 · 5ece737 · 5ece737
1 parent e5d17f5
commit 5ece737
Show file tree

Hide file tree

Showing 72 changed files with 4,557 additions and 14,653 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,7 +57,7 @@
     "shx": "0.3.4",
     "source-map": "0.7.4",
     "ts-node": "^10.9.1",
-    "typescript": "~4.2.4"
+    "typescript": "^4.9.5"
   },
   "pre-commit": [
     "lint-staged",

diff --git a/packages/devextreme-angular/build.config.js b/packages/devextreme-angular/build.config.js
@@ -64,7 +64,7 @@ module.exports = {
         srcFilesPattern: '**/*.ts',
         tsTestSrc: ['tests/src/**/*.spec.ts', 'tests/src/**/component-names.ts'],
         testsPath: 'tests/dist',
-        sourcesGlobs: ['src/**/*.*', './package.json'],
+        sourcesGlobs: ['src/**/*.*', './package.json', './ng-package.json'],
         tsSourcesGlob: 'src/**/*.ts',
         outputPath: 'dist'
     },

diff --git a/packages/devextreme-angular/gulpfile.js b/packages/devextreme-angular/gulpfile.js
@@ -112,7 +112,7 @@ gulp.task('build.ngc', function() {
 
    return ngPackagr
         .ngPackagr()
-        .forProject(path.join(config.outputPath, 'package.json'))
+        .forProject(path.join(config.outputPath, 'ng-package.json'))
         .withTsConfig('tsconfig.lib.json')
         .build()
 });
@@ -160,13 +160,22 @@ gulp.task('npm.pack', gulp.series(
     (cb) => {
         argv.withDescriptions ? exec('npm --prefix ../../ run angular:inject-descriptions', (err) => cb(err)) : cb();
     },
-    (cb) => { exec('npm pack', { cwd: buildConfig.npm.distPath }, (err) => cb(err)) }
+    (cb) => { exec('npm pack', { cwd: buildConfig.npm.distPath }, (err) => cb(err)) },
+    () => { return  gulp.src(buildConfig.npm.distPath)
+    .pipe(gulp.dest('./node_modules/devextreme-angular')); }
 ));
 
+gulp.task('copy.source', function() {
+    var npmConfig = buildConfig.npm;
+    return gulp.src(`${path.join(npmConfig.distPath, '/**/*.*')}`)
+        .pipe(gulp.dest('./node_modules/devextreme-angular'));
+});
+
 //------------Main------------
 
 var buildTask = gulp.series(
-    'build.components'
+    'build.components',
+    'copy.source'
 );
 
 gulp.task('build', buildTask);
@@ -241,7 +250,9 @@ gulp.task('test.components.server.debug', function(done) {
     new karmaServer(config, done).start();
 });
 
-gulp.task('run.tests', gulp.series('test.components.server', 'test.components.client'));
+gulp.task('run.tests', gulp.series('test.components.client'));
+
+// gulp.task('run.tests', gulp.series('test.components.client', 'test.components.server'));
 
 gulp.task('test', gulp.series('build', 'run.tests'));
 

diff --git a/packages/devextreme-angular/ng-package.json b/packages/devextreme-angular/ng-package.json
@@ -0,0 +1,10 @@
+{
+    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "index.ts"
+    },
+    "allowedNonPeerDependencies": [
+        "."
+    ],
+    "dest": "../npm/dist"
+}
diff --git a/packages/devextreme-angular/package.json b/packages/devextreme-angular/package.json
@@ -24,15 +24,15 @@
     "devextreme": "~23.2.0"
   },
   "devDependencies": {
-    "@angular/animations": "~12.2.17",
-    "@angular/common": "~12.2.17",
-    "@angular/compiler": "~12.2.17",
-    "@angular/compiler-cli": "~12.2.17",
-    "@angular/core": "~12.2.17",
-    "@angular/forms": "~12.2.17",
-    "@angular/platform-browser": "~12.2.17",
-    "@angular/platform-browser-dynamic": "~12.2.17",
-    "@angular/platform-server": "~12.2.17",
+    "@angular/animations": "~15.2.10",
+    "@angular/common": "~15.2.10",
+    "@angular/compiler": "~15.2.10",
+    "@angular/compiler-cli": "~15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "~15.2.10",
+    "@angular/platform-browser": "~15.2.10",
+    "@angular/platform-browser-dynamic": "~15.2.10",
+    "@angular/platform-server": "~15.2.10",
     "@types/jasmine": "2.8.19",
     "@types/node": "~20.8.0",
     "codelyzer": "6.0.2",
@@ -49,11 +49,11 @@
     "karma-jasmine": "^5.1.0",
     "karma-junit-reporter": "^2.0.1",
     "karma-webpack": "^5.0.0",
-    "ng-packagr": "12.2.7",
+    "ng-packagr": "^15.2.2",
     "puppeteer": "^19.11.1",
     "rxjs": "^6.6.7",
     "stream-browserify": "^3.0.0",
-    "typescript": "~4.2.3",
+    "typescript": "^4.9.5",
     "webpack": "^5.88.2",
     "yargs": "^6.6.0",
     "zone.js": "^0.11.8"
@@ -65,19 +65,9 @@
     "devexpress"
   ],
   "dependencies": {
-    "@angular-devkit/schematics": "^12.2.18",
+    "@angular-devkit/schematics": "15.2.10",
     "devextreme-schematics": "*",
     "inferno-server": "7.4.11"
   },
-  "schematics": "./schematics/collection.json",
-  "ngPackage": {
-    "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-    "lib": {
-      "entryFile": "index.ts"
-    },
-    "dest": "../npm/dist",
-    "whitelistedNonPeerDependencies": [
-      "."
-    ]
-  }
+  "schematics": "./schematics/collection.json"
 }
diff --git a/packages/devextreme-angular/src/core/ng-package.json b/packages/devextreme-angular/src/core/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/devextreme-angular/src/core/package.json b/packages/devextreme-angular/src/core/package.json
diff --git a/packages/devextreme-angular/src/server/ng-package.json b/packages/devextreme-angular/src/server/ng-package.json
@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}
diff --git a/packages/devextreme-angular/src/server/package.json b/packages/devextreme-angular/src/server/package.json
diff --git a/packages/devextreme-angular/tests/src/core/component-extension.spec.ts b/packages/devextreme-angular/tests/src/core/component-extension.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ElementRef,

diff --git a/packages/devextreme-angular/tests/src/core/component.spec.ts b/packages/devextreme-angular/tests/src/core/component.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ElementRef,

diff --git a/packages/devextreme-angular/tests/src/core/nested-option.spec.ts b/packages/devextreme-angular/tests/src/core/nested-option.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ElementRef,

diff --git a/packages/devextreme-angular/tests/src/core/template.spec.ts b/packages/devextreme-angular/tests/src/core/template.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ElementRef,

diff --git a/packages/devextreme-angular/tests/src/ui/chart.spec.ts b/packages/devextreme-angular/tests/src/ui/chart.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ViewChild
@@ -14,6 +13,7 @@ import {
 import {
     DxChartModule, DxChartComponent, DxScrollViewModule
 } from 'devextreme-angular';
+
 import dxChart from 'devextreme/viz/chart';
 
 @Component({
@@ -25,12 +25,12 @@ class TestContainerComponent {
         label: 'label1'
     }];
     @ViewChild(DxChartComponent) chart: DxChartComponent;
-    dataSource = [];
+    dataSource: any[] = [];
     disposed = false;
     commonSeriesSettings = {
         argumentField: undefined
     };
-    seriesAsArray = [];
+    seriesAsArray: any[] = [];
     seriesAsObject = {
         valueField: undefined
     };

diff --git a/packages/devextreme-angular/tests/src/ui/data-grid.spec.ts b/packages/devextreme-angular/tests/src/ui/data-grid.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ViewChildren,
@@ -184,8 +183,8 @@ describe('DxDataGrid', () => {
         if (typeof column === 'string') {
             fail();
         } else {
-            expect(column.columns.length).toBe(1);
-            expect(column.columns[0]['dataField']).toBe('Field');
+            expect(column?.columns?.length).toBe(1);
+            expect(column?.columns?.[0]['dataField']).toBe('Field');
         }
     });
 
@@ -236,11 +235,11 @@ describe('DxDataGrid', () => {
         jasmine.clock().tick(101);
         let testComponent = fixture.componentInstance;
         const instance = testComponent.innerWidgets.last.instance;
-        expect(instance.option('columnChooser').enabled).toBe(true);
+        expect(instance?.option('columnChooser')?.enabled).toBe(true);
 
         testComponent.showComponent = false;
         fixture.detectChanges();
-        expect(instance.option('columnChooser').enabled).toBe(false);
+        expect(instance?.option('columnChooser')?.enabled).toBe(false);
         jasmine.clock().uninstall();
     });
 
@@ -511,7 +510,7 @@ describe('Nested DxDataGrid', () => {
         setTimeout(() => {
             let instance = fixture.componentInstance.innerWidgets.first.instance;
             let element = instance.element().querySelector('.my-template');
-            expect(element.textContent).toBe('String');
+            expect(element?.textContent).toBe('String');
             done();
         }, 1000);
     });

diff --git a/packages/devextreme-angular/tests/src/ui/events.spec.ts b/packages/devextreme-angular/tests/src/ui/events.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component, NgZone
 } from '@angular/core';
@@ -76,7 +75,7 @@ describe('events', () => {
 
         const element = fixture.nativeElement.querySelector('.elem');
         let counter = 0;
-        fixture.ngZone.runOutsideAngular(() => {
+        fixture?.ngZone?.runOutsideAngular(() => {
             on(element, 'click', () => {
                 expect(NgZone.isInAngularZone()).toBe(true);
                 counter++;

diff --git a/packages/devextreme-angular/tests/src/ui/form.spec.ts b/packages/devextreme-angular/tests/src/ui/form.spec.ts
@@ -1,5 +1,4 @@
 /* tslint:disable:component-selector */
-
 import {
     Component,
     ViewChild
@@ -134,7 +133,7 @@ describe('DxForm', () => {
         let instance = getWidget(fixture);
         let input = instance.element().querySelector('input');
         input.value = 'test value';
-        input.dispatchEvent(new Event('change'));
+        input?.dispatchEvent(new Event('change'));
 
         expect(document.getElementById('text').innerText.trim()).toBe('test value');
         fixture.autoDetectChanges(false);