Updated to Angular 19

angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
             "allowedCommonJsDependencies": [
               "core-js",
@@ -24,10 +24,13 @@
               "@babel/runtime",
               "pdfmake"
             ],
-            "outputPath": "dist/pivot-angular",
+            "outputPath": {
+              "base": "dist/pivot-angular"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
@@ -36,7 +39,8 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -61,9 +65,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -72,7 +74,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "pivot-angular:build:production"
@@ -84,9 +86,9 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "@angular/build:extract-i18n",
           "options": {
-            "browserTarget": "pivot-angular:build:production,development"
+            "buildTarget": "pivot-angular:build:production,development"
           }
         }
       }

package.json

@@ -12,29 +12,29 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.10.22",
     "@amcharts/amcharts5": "^5.3.3",
-    "@angular/animations": "^18.0.2",
-    "@angular/common": "^18.0.2",
-    "@angular/compiler": "^18.0.2",
-    "@angular/core": "^18.0.2",
-    "@angular/forms": "^18.0.2",
-    "@angular/platform-browser": "^18.0.2",
-    "@angular/platform-browser-dynamic": "^18.0.2",
-    "@angular/router": "^18.0.2",
+    "@angular/animations": "^19.1.2",
+    "@angular/common": "^19.1.2",
+    "@angular/compiler": "^19.1.2",
+    "@angular/core": "^19.1.2",
+    "@angular/forms": "^19.1.2",
+    "@angular/platform-browser": "^19.1.2",
+    "@angular/platform-browser-dynamic": "^19.1.2",
+    "@angular/router": "^19.1.2",
     "express": "^4.18.2",
     "highcharts": "^11.4.3",
     "ngx-flexmonster": "latest",
     "path": "^0.12.7",
     "rxjs": "^7.4.0",
     "tslib": "^2.3.0",
-    "zone.js": "~0.14.0"
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.0.2",
-    "@angular/cli": "^18.0.2",
-    "@angular/compiler-cli": "^18.0.2",
+    "@angular/build": "^19.1.3",
+    "@angular/cli": "^19.1.3",
+    "@angular/compiler-cli": "^19.1.2",
     "@types/node": "^20.14.2",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
-    "typescript": "^5.0.2"
+    "typescript": "^5.5.4"
   }
-}
+}

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
+    standalone: false
 })
 export class AppComponent {
   title = 'pivot-angular';

src/app/app.module.ts

@@ -11,7 +11,6 @@ import { TopMenuComponent } from './common/top-menu/top-menu.component';
 import { HandlingEventsComponent } from './examples/handling-events/handling-events.component';
 import { CustomizingGridComponent } from './examples/customizing-grid/customizing-grid.component';
 import { CustomizingToolbarComponent } from './examples/customizing-toolbar/customizing-toolbar.component';
-import { PivotTableDemoComponent } from './examples/pivot-table-demo/pivot-table-demo.component';
 import { UpdatingDataComponent } from './examples/updating-data/updating-data.component';
 import { UsingApiCallsComponent } from './examples/using-api-calls/using-api-calls.component';
 import { WithAmcharts4Component } from './examples/with-amcharts4/with-amcharts4.component';
@@ -24,7 +23,6 @@ import { FormsModule } from '@angular/forms';
     AppComponent,
     TopMenuComponent,
     SideMenuComponent,
-    PivotTableDemoComponent,
     HandlingEventsComponent,
     UsingApiCallsComponent,
     UpdatingDataComponent,

src/app/common/side-menu/side-menu.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-side-menu',
     templateUrl: './side-menu.component.html',
-    styleUrls: ['./side-menu.component.css']
+    styleUrls: ['./side-menu.component.css'],
+    standalone: false
 })
 export class SideMenuComponent implements OnInit {
 

src/app/common/toggle-button/toggle-button.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 
 @Component({
-  selector: 'app-toggle-button',
-  templateUrl: './toggle-button.component.html',
-  styleUrls: ['./toggle-button.component.css']
+    selector: 'app-toggle-button',
+    templateUrl: './toggle-button.component.html',
+    styleUrls: ['./toggle-button.component.css'],
+    standalone: false
 })
 export class ToggleButtonComponent implements OnInit {
   @Input() public _id!: string;

src/app/common/toggle-switch/toggle-switch.component.ts

@@ -1,9 +1,10 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
 
 @Component({
-  selector: 'app-toggle-switch',
-  templateUrl: './toggle-switch.component.html',
-  styleUrls: ['./toggle-switch.component.css']
+    selector: 'app-toggle-switch',
+    templateUrl: './toggle-switch.component.html',
+    styleUrls: ['./toggle-switch.component.css'],
+    standalone: false
 })
 export class ToggleSwitchComponent implements OnInit {
   @Input() public _id!: string;

src/app/common/top-menu/top-menu.component.ts

@@ -3,7 +3,8 @@ import { Component, OnInit } from '@angular/core';
 @Component({
     selector: 'app-top-menu',
     templateUrl: './top-menu.component.html',
-    styleUrls: ['./top-menu.component.css']
+    styleUrls: ['./top-menu.component.css'],
+    standalone: false
 })
 export class TopMenuComponent implements OnInit {
 

src/app/examples/customizing-grid/customizing-grid.component.ts

@@ -4,7 +4,8 @@ import { FlexmonsterPivot } from 'ngx-flexmonster';
 @Component({
     selector: 'app-customizing-grid',
     templateUrl: './customizing-grid.component.html',
-    styleUrls: ['./customizing-grid.component.css']
+    styleUrls: ['./customizing-grid.component.css'],
+    standalone: false
 })
 export class CustomizingGridComponent implements OnInit {
 

src/app/examples/customizing-toolbar/customizing-toolbar.component.ts

@@ -4,7 +4,8 @@ import { FlexmonsterPivot } from 'ngx-flexmonster';
 @Component({
     selector: 'app-customizing-toolbar',
     templateUrl: './customizing-toolbar.component.html',
-    styleUrls: ['./customizing-toolbar.component.css']
+    styleUrls: ['./customizing-toolbar.component.css'],
+    standalone: false
 })
 export class CustomizingToolbarComponent implements OnInit {
 

src/app/examples/handling-events/handling-events.component.ts

@@ -4,7 +4,8 @@ import { FlexmonsterPivot } from 'ngx-flexmonster';
 @Component({
     selector: 'app-handling-events',
     templateUrl: './handling-events.component.html',
-    styleUrls: ['./handling-events.component.css']
+    styleUrls: ['./handling-events.component.css'],
+    standalone: false
 })
 export class HandlingEventsComponent implements OnInit {
 

src/app/examples/pivot-table-demo/pivot-table-demo.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnInit } from '@angular/core';
+import { FlexmonsterPivotModule } from 'ngx-flexmonster';
 
 @Component({
     selector: 'app-pivot-table-demo',
     templateUrl: './pivot-table-demo.component.html',
-    styleUrls: ['./pivot-table-demo.component.css']
+    styleUrls: ['./pivot-table-demo.component.css'],
+    imports: [FlexmonsterPivotModule],
+    standalone: true
 })
 export class PivotTableDemoComponent implements OnInit {
 

src/app/examples/updating-data/updating-data.component.ts

@@ -4,7 +4,8 @@ import { FlexmonsterPivot } from 'ngx-flexmonster';
 @Component({
     selector: 'app-updating-data',
     templateUrl: './updating-data.component.html',
-    styleUrls: ['./updating-data.component.css']
+    styleUrls: ['./updating-data.component.css'],
+    standalone: false
 })
 export class UpdatingDataComponent implements OnInit {
 

src/app/examples/using-api-calls/using-api-calls.component.ts

@@ -4,7 +4,8 @@ import { FlexmonsterPivot } from 'ngx-flexmonster';
 @Component({
     selector: 'app-using-api-calls',
     templateUrl: './using-api-calls.component.html',
-    styleUrls: ['./using-api-calls.component.css']
+    styleUrls: ['./using-api-calls.component.css'],
+    standalone: false
 })
 export class UsingApiCallsComponent implements OnInit {
 

src/app/examples/with-amcharts/with-amcharts.component.ts

@@ -12,7 +12,8 @@ import "flexmonster/lib/flexmonster.amcharts.js";
 @Component({
     selector: 'app-with-amcharts',
     templateUrl: './with-amcharts.component.html',
-    styleUrls: ['./with-amcharts.component.css']
+    styleUrls: ['./with-amcharts.component.css'],
+    standalone: false
 })
 export class WithAmchartsComponent implements OnInit {
     @ViewChild('pivot') pivot!: FlexmonsterPivot;

src/app/examples/with-amcharts4/with-amcharts4.component.ts

@@ -12,7 +12,8 @@ import "flexmonster/lib/flexmonster.amcharts.js";
 @Component({
     selector: 'app-with-amcharts4',
     templateUrl: './with-amcharts4.component.html',
-    styleUrls: ['./with-amcharts4.component.css']
+    styleUrls: ['./with-amcharts4.component.css'],
+    standalone: false
 })
 export class WithAmcharts4Component implements OnInit {
     @ViewChild('pivot') pivot!: FlexmonsterPivot;

src/app/examples/with-highcharts/with-highcharts.component.ts

@@ -8,7 +8,8 @@ import "flexmonster/lib/flexmonster.highcharts.js";
 @Component({
     selector: 'app-with-highcharts',
     templateUrl: './with-highcharts.component.html',
-    styleUrls: ['./with-highcharts.component.css']
+    styleUrls: ['./with-highcharts.component.css'],
+    standalone: false
 })
 export class WithHighchartsComponent implements OnInit {
 

tsconfig.json

@@ -5,12 +5,12 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
     "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,
     "declaration": false,
-    "downlevelIteration": true,
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,