Upgrade to Angular 19: align all packages and fix deprecated APIs

.github/workflows/ci.yml

@@ -17,39 +17,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
-
-      # package.json has inconsistent Angular versions (10.0.8, 19.x, ^9 ng-packagr),
-      # TypeScript 3.9.7 (ng-packagr@11 needs >=4.0 <4.2), and webpack:"*" which
-      # resolves to v5 — but build-angular@0.900 uses webpack 4 APIs (ParserHelpers
-      # was removed in v5). Patch everything to a consistent Angular 11 set.
-      - name: Pin Angular 11 + TypeScript 4.1 + webpack 4 in package.json
-        run: |
-          node -e "
-            const fs = require('fs');
-            const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-            const v = '11.2.14';
-            const ng = ['@angular/animations','@angular/common','@angular/compiler',
-                        '@angular/compiler-cli','@angular/core','@angular/forms',
-                        '@angular/platform-browser','@angular/platform-browser-dynamic',
-                        '@angular/router'];
-            ng.forEach(p => {
-              if (pkg.dependencies && pkg.dependencies[p])    pkg.dependencies[p] = v;
-              if (pkg.devDependencies && pkg.devDependencies[p]) pkg.devDependencies[p] = v;
-            });
-            if (pkg.dependencies)    pkg.dependencies['webpack']                       = '4.46.0';
-            if (pkg.devDependencies) {
-              pkg.devDependencies['ng-packagr']                    = '11.2.0';
-              pkg.devDependencies['typescript']                    = '4.1.6';
-              pkg.devDependencies['@angular/cli']                  = '11.2.19';
-              pkg.devDependencies['@angular-devkit/build-angular'] = '0.1102.19';
-              pkg.devDependencies['@angular-devkit/schematics']    = '11.2.19';
-            }
-            // source-map 0.8+ requires WASM init; pin transitive dep to last 0.7.x.
-            // Only safe as an override (not direct dep) to avoid EOVERRIDE conflict.
-            pkg.overrides = { 'source-map': '0.7.4' };
-            fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2));
-          "
+          node-version: '20'
 
       - name: Install dependencies
         run: npm install --legacy-peer-deps
@@ -61,9 +29,7 @@ jobs:
         run: npm run copy
 
       - name: Build demo app
-        run: npx ng build --prod --base-href /ng-gantt/
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
+        run: npx ng build dev --configuration production --base-href /ng-gantt/
 
   deploy:
     name: Deploy to GitHub Pages
@@ -77,33 +43,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
-
-      - name: Pin Angular 11 + TypeScript 4.1 + webpack 4 in package.json
-        run: |
-          node -e "
-            const fs = require('fs');
-            const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
-            const v = '11.2.14';
-            const ng = ['@angular/animations','@angular/common','@angular/compiler',
-                        '@angular/compiler-cli','@angular/core','@angular/forms',
-                        '@angular/platform-browser','@angular/platform-browser-dynamic',
-                        '@angular/router'];
-            ng.forEach(p => {
-              if (pkg.dependencies && pkg.dependencies[p])    pkg.dependencies[p] = v;
-              if (pkg.devDependencies && pkg.devDependencies[p]) pkg.devDependencies[p] = v;
-            });
-            if (pkg.dependencies)    pkg.dependencies['webpack']                       = '4.46.0';
-            if (pkg.devDependencies) {
-              pkg.devDependencies['ng-packagr']                    = '11.2.0';
-              pkg.devDependencies['typescript']                    = '4.1.6';
-              pkg.devDependencies['@angular/cli']                  = '11.2.19';
-              pkg.devDependencies['@angular-devkit/build-angular'] = '0.1102.19';
-              pkg.devDependencies['@angular-devkit/schematics']    = '11.2.19';
-            }
-            pkg.overrides = { 'source-map': '0.7.4' };
-            fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2));
-          "
+          node-version: '20'
 
       - name: Install dependencies
         run: npm install --legacy-peer-deps
@@ -115,9 +55,7 @@ jobs:
         run: npm run copy
 
       - name: Build demo app for production
-        run: npx ng build --prod --base-href /ng-gantt/
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
+        run: npx ng build dev --configuration production --base-href /ng-gantt/
 
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3

angular.json

@@ -30,12 +30,9 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -79,39 +76,6 @@
             ]
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
-        }
-      }
-    },
-    "dev-e2e": {
-      "root": "",
-      "sourceRoot": "",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "dev:serve"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "e2e/tsconfig.e2e.json"
-            ],
-            "exclude": []
-          }
-        }
       }
     },
     "packages": {
@@ -141,12 +105,9 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
-              "buildOptimizer": true,
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -190,20 +151,9 @@
             ]
           }
         },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": []
-          }
-        }
       }
     }
   },
-  "defaultProject": "dev",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

ng-gantt/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public_api.ts"
+  },
+  "dest": "../dist/ng-gantt"
+}

ng-gantt/package.json

@@ -20,12 +20,5 @@
     "@angular/common": ">=8.0.0",
     "jsgantt-improved": "*"
   },
-  "ngPackage": {
-    "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-
-    "lib": {
-      "entryFile": "src/public_api.ts"
-    },
-    "dest": "../dist/ng-gantt"
-  }
+  "ngPackagr": "ng-package.json"
 }

ng-gantt/src/gantt/gantt.component.ts

@@ -8,6 +8,7 @@ import { GanttEditorOptions } from './gantt.editoroptions';
 @Component({
   // tslint:disable-next-line:component-selector
   selector: 'ng-gantt',
+  standalone: false,
   template: '<div [id]="id" #ganttEditorContainer></div>'
 })
 export class GanttEditorComponent implements OnInit {

package.json

@@ -5,64 +5,54 @@
   "license": "MIT",
   "scripts": {
     "start": "ng serve",
-    "build": "npm run copy && ng build",
+    "build": "npm run copy && ng build dev",
     "copy": "cp -R dist/ng-gantt src/ng-gantt",
     "build:app": "npm run copy && ng build --project packages && rimraf src/ng-gantt",
-    "build:lib": "rimraf dist && ng-packagr -p ng-gantt/package.json",
+    "build:lib": "rimraf dist && ng-packagr -p ng-gantt/ng-package.json",
     "publish-npm": "npm run build:lib && cd dist/ng-gantt && npm publish",
     "reload": "npm run build:lib && npm run build && npm run start",
     "dev": "cd dist/app && http-server",
-    "test": "ng test dev --watch=false && npm run e2e",
+    "test": "ng test dev --watch=false",
     "unittest": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e",
     "kill": "kill -9 $(lsof -t -i:4200)",
     "reinstall": "rm package-lock.json && rm -rf node_modules && npm i",
     "sass:rebuild": "npm rebuild node-sass"
   },
   "dependencies": {
-    "@angular/common": "10.0.8",
+    "@angular/common": "19.2.18",
     "@angular/compiler": "19.2.18",
     "@angular/core": "19.2.18",
-    "@angular/forms": "10.0.8",
-    "@angular/http": "*",
-    "@angular/platform-browser": "10.0.8",
-    "@angular/platform-browser-dynamic": "10.0.8",
-    "@angular/router": "10.0.8",
-    "core-js": "^3.6.4",
-    "rxjs": "*",
-    "webpack": "*",
-    "zone.js": "^0.10.3",
+    "@angular/forms": "19.2.18",
+    "@angular/platform-browser": "19.2.18",
+    "@angular/platform-browser-dynamic": "19.2.18",
+    "@angular/router": "19.2.18",
+    "rxjs": "^7.4.0",
+    "zone.js": "~0.16.0",
     "jsgantt-improved": "*"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.900.2",
-    "@angular-devkit/schematics": "^9.0.2",
-    "@angular/cli": "10.0.5",
-    "@angular/compiler-cli": "10.0.8",
-    "@angular/language-service": "10.0.8",
-    "@types/jasmine": "3.3.8",
-    "@types/node": "^13.7.1",
-    "codelyzer": "~5.0.0",
+    "@angular-devkit/build-angular": "~19.2.24",
+    "@angular-devkit/schematics": "~19.2.24",
+    "@angular/cli": "~19.2.24",
+    "@angular/compiler-cli": "19.2.18",
+    "@angular/language-service": "19.2.18",
+    "@types/jasmine": "~4.3.0",
+    "@types/node": "^18.0.0",
     "cpr": "^3.0.0",
-    "jasmine": "^3.3.0",
-    "jasmine-core": "^3.3.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-cli": "~1.0.1",
-    "karma-coverage-istanbul-reporter": "^2.0.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
-    "ng-packagr": "^9.0.0",
-    "protractor": "~5.4.0",
-    "rimraf": "^2.7.1",
-    "ts-node": "~7.0.0",
-    "tsickle": "^0.29.0",
-    "tslib": "^1.9.0",
-    "tslint": "~6.1.3",
-    "typescript": "3.9.7",
-    "awesome-typescript-loader": "^2.2.1",
-    "rollup": "0.67.4"
+    "jasmine": "^4.0.0",
+    "jasmine-core": "^4.0.0",
+    "jasmine-spec-reporter": "~7.0.0",
+    "karma": "~6.4.0",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-cli": "~2.0.0",
+    "karma-coverage": "~2.2.0",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "ng-packagr": "~19.2.2",
+    "rimraf": "^5.0.0",
+    "ts-node": "~10.9.0",
+    "tslib": "^2.3.0",
+    "typescript": "~5.7.0"
   }
 }

src/app/app.component.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
+  standalone: false,
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import { Routes, RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 import { NgGanttEditorModule } from 'ng-gantt';
@@ -19,7 +19,7 @@ export const routes: Routes = [
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule,
+    HttpClientModule,
     NgGanttEditorModule,
     RouterModule.forRoot(routes)
   ],

src/app/demo/demo.component.ts

@@ -3,6 +3,7 @@ import { GanttEditorComponent } from 'ng-gantt';
 
 @Component({
   selector: 'app-demo',
+  standalone: false,
   templateUrl: './demo.component.html',
   styleUrls: ['./demo.component.css']
 })

src/polyfills.ts

@@ -40,19 +40,10 @@
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 
-/** Evergreen browsers require these. **/
-import 'core-js/es/reflect';
-
-
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
-
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
+import 'zone.js';  // Included with Angular CLI.
 
 
 

tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compileOnSave": false,
-  "annotateForClosureCompiler": false,
   "compilerOptions": {
     "outDir": "./dist",
     "baseUrl": "src",
@@ -10,12 +9,14 @@
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es5",
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "ES2022",
     "typeRoots": [
       "node_modules/@types"
     ],
     "lib": [
-      "es2017",
+      "ES2022",
       "dom"
     ],
     "paths": {