Angular 19 support

Angular/demo/angular.json

@@ -15,16 +15,19 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular/build:application",
           "options": {
             "allowedCommonJsDependencies": [
               "powerbi-report-authoring",
               "powerbi-client"
             ],
-            "outputPath": "dist/demo",
+            "outputPath": {
+              "base": "dist/demo"
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "src/polyfills.ts"
+            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               "src/assets",
@@ -33,7 +36,8 @@
             "styles": [
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -58,9 +62,7 @@
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
@@ -69,7 +71,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "powerbi-client-angular-demo:build"
           },

Angular/demo/package.json

@@ -9,15 +9,15 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.9",
-    "@angular/cli": "^17.3.9",
-    "@angular/common": "^17.3.12",
-    "@angular/compiler": "^17.3.12",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/build": "^19.2.6",
+    "@angular/cli": "^19.2.6",
+    "@angular/common": "^19.2.5",
+    "@angular/compiler": "^19.2.5",
+    "@angular/compiler-cli": "^19.2.5",
+    "@angular/core": "^19.2.5",
+    "@angular/platform-browser": "^19.2.5",
+    "@angular/platform-browser-dynamic": "^19.2.5",
     "@types/node": "^18.19.51",
-    "typescript": "^5.4.5"
+    "typescript": "^5.8.3"
   }
 }

Angular/demo/src/app/app.component.ts

@@ -24,9 +24,10 @@ export interface ConfigResponse {
 }
 
 @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 {
   // Wrapper object to access report properties

Angular/demo/src/components/embed-config-dialog/embed-config-dialog.component.ts

@@ -4,9 +4,10 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
-  selector: 'embed-config-dialog',
-  templateUrl: './embed-config-dialog.component.html',
-  styleUrls: ['./embed-config-dialog.component.css']
+    selector: 'embed-config-dialog',
+    templateUrl: './embed-config-dialog.component.html',
+    styleUrls: ['./embed-config-dialog.component.css'],
+    standalone: false
 })
 
 export class EmbedConfigDialogComponent {

Angular/demo/src/components/event-details-dialog/event-details-dialog.component.ts

@@ -4,9 +4,10 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'event-details-dialog',
-  templateUrl: './event-details-dialog.component.html',
-  styleUrls: ['./event-details-dialog.component.css']
+    selector: 'event-details-dialog',
+    templateUrl: './event-details-dialog.component.html',
+    styleUrls: ['./event-details-dialog.component.css'],
+    standalone: false
 })
 export class EventDetailsDialogComponent {
   @Input() dataSelectedEventDetails: any;

Angular/powerbi-client-angular/package.json

@@ -32,18 +32,18 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.9",
+    "@angular-devkit/build-angular": "^19.2.6",
     "@angular-eslint/builder": "^17.5.3",
     "@angular-eslint/eslint-plugin": "^17.5.3",
     "@angular-eslint/eslint-plugin-template": "^17.5.3",
     "@angular-eslint/schematics": "^17.5.3",
     "@angular-eslint/template-parser": "^17.5.3",
-    "@angular/cli": "^17.3.9",
-    "@angular/compiler": "^17.3.12",
-    "@angular/compiler-cli": "^17.3.12",
-    "@angular/core": "^17.3.12",
-    "@angular/platform-browser": "^17.3.12",
-    "@angular/platform-browser-dynamic": "^17.3.12",
+    "@angular/cli": "^19.2.6",
+    "@angular/compiler": "^19.2.5",
+    "@angular/compiler-cli": "^19.2.5",
+    "@angular/core": "^19.2.5",
+    "@angular/platform-browser": "^19.2.5",
+    "@angular/platform-browser-dynamic": "^19.2.5",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^18.19.51",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -59,9 +59,9 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^17.3.0",
+    "ng-packagr": "^19.2.1",
     "powerbi-report-authoring": "^1.1.1",
-    "typescript": "^5.4.5",
-    "zone.js": "~0.14.10"
+    "typescript": "^5.8.3",
+    "zone.js": "~0.15.0"
   }
-}
+}

Angular/powerbi-client-angular/src/components/powerbi-create-report/powerbi-create-report.component.ts

@@ -12,8 +12,9 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Create report component to embed the entity, extends the Base component
  */
 @Component({
-  selector: 'powerbi-create-report[embedConfig]',
-  template: '<div class={{cssClassName}} #createReportContainer></div>',
+    selector: 'powerbi-create-report[embedConfig]',
+    template: '<div class={{cssClassName}} #createReportContainer></div>',
+    standalone: false
 })
 export class PowerBICreateReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Configuration for embedding the PowerBI Create report (Required)
@@ -23,7 +24,7 @@ export class PowerBICreateReportEmbedComponent extends PowerBIEmbedComponent imp
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('createReportContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('createReportContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-dashboard-embed/powerbi-dashboard-embed.component.ts

@@ -10,8 +10,9 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Dashboard component to embed the dashboard, extends the Base component
  */
 @Component({
-  selector: 'powerbi-dashboard[embedConfig]',
-  template: '<div class={{cssClassName}} #dashboardContainer></div>',
+    selector: 'powerbi-dashboard[embedConfig]',
+    template: '<div class={{cssClassName}} #dashboardContainer></div>',
+    standalone: false
 })
 export class PowerBIDashboardEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
@@ -22,7 +23,7 @@ export class PowerBIDashboardEmbedComponent extends PowerBIEmbedComponent implem
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('dashboardContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('dashboardContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-embed/powerbi-embed.component.ts

@@ -14,8 +14,9 @@ export type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?:
  * Base component to hold common properties for all the Power BI entities
  */
 @Component({
-  selector: 'powerbi-embed',
-  template: '',
+    selector: 'powerbi-embed',
+    template: '',
+    standalone: false
 })
 export class PowerBIEmbedComponent implements OnInit {
   // Power BI service instance to be used if user doesnt provide custom service

Angular/powerbi-client-angular/src/components/powerbi-paginated-report-embed/powerbi-paginated-report-embed.component.ts

@@ -11,16 +11,17 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Paginated report component to embed the entity, extends the Base component
  */
 @Component({
-  selector: 'powerbi-paginated-report[embedConfig]',
-  template: '<div class={{cssClassName}} #paginatedReportContainer></div>',
+    selector: 'powerbi-paginated-report[embedConfig]',
+    template: '<div class={{cssClassName}} #paginatedReportContainer></div>',
+    standalone: false
 })
 export class PowerBIPaginatedReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
   // Configuration for embedding the PowerBI Paginated report (Required)
   @Input() embedConfig!: IPaginatedReportLoadConfiguration;
 
   // Ref to the HTML div container element
-  @ViewChild('paginatedReportContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('paginatedReportContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-qna-embed/powerbi-qna-embed.component.ts

@@ -10,8 +10,9 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Qna component to embed the Qna visual, extends Base component
  */
 @Component({
-  selector: 'powerbi-qna[embedConfig]',
-  template: '<div class={{cssClassName}} #qnaContainer></div>',
+    selector: 'powerbi-qna[embedConfig]',
+    template: '<div class={{cssClassName}} #qnaContainer></div>',
+    standalone: false
 })
 export class PowerBIQnaEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
@@ -22,7 +23,7 @@ export class PowerBIQnaEmbedComponent extends PowerBIEmbedComponent implements O
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('qnaContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('qnaContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-report-embed/powerbi-report-embed.component.ts

@@ -10,8 +10,9 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Report component to embed the report, extends the Base Component
  */
 @Component({
-  selector: 'powerbi-report[embedConfig]',
-  template: '<div class={{cssClassName}} #reportContainer></div>',
+    selector: 'powerbi-report[embedConfig]',
+    template: '<div class={{cssClassName}} #reportContainer></div>',
+    standalone: false
 })
 export class PowerBIReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
@@ -25,7 +26,7 @@ export class PowerBIReportEmbedComponent extends PowerBIEmbedComponent implement
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('reportContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('reportContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-tile-embed/powerbi-tile-embed.component.ts

@@ -4,14 +4,14 @@
 import { AfterViewInit, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { Embed, ITileEmbedConfiguration, Tile } from 'powerbi-client';
 import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-embed.component';
-import { isEmbedSetupValid } from '../../utils/utils';
 
 /**
  * Tile component to embed the tile, extends Base component
  */
 @Component({
-  selector: 'powerbi-tile[embedConfig]',
-  template: '<div class={{cssClassName}} #tileContainer></div>',
+    selector: 'powerbi-tile[embedConfig]',
+    template: '<div class={{cssClassName}} #tileContainer></div>',
+    standalone: false
 })
 export class PowerBITileEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
@@ -22,7 +22,7 @@ export class PowerBITileEmbedComponent extends PowerBIEmbedComponent implements
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('tileContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('tileContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/src/components/powerbi-visual-embed/powerbi-visual-embed.component.ts

@@ -10,8 +10,9 @@ import { isEmbedSetupValid } from '../../utils/utils';
  * Visual component to embed the visual, extends Base component
  */
 @Component({
-  selector: 'powerbi-visual[embedConfig]',
-  template: '<div class={{cssClassName}} #visualContainer></div>',
+    selector: 'powerbi-visual[embedConfig]',
+    template: '<div class={{cssClassName}} #visualContainer></div>',
+    standalone: false
 })
 export class PowerBIVisualEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent
@@ -22,7 +23,7 @@ export class PowerBIVisualEmbedComponent extends PowerBIEmbedComponent implement
   @Input() eventHandlers?: Map<string, EventHandler | null>;
 
   // Ref to the HTML div container element
-  @ViewChild('visualContainer') private containerRef!: ElementRef<HTMLDivElement>;
+  @ViewChild('visualContainer') private readonly containerRef!: ElementRef<HTMLDivElement>;
 
   // Embedded entity
   // Note: Do not read or assign to this member variable directly, instead use the getter and setter

Angular/powerbi-client-angular/tsconfig.json

@@ -4,12 +4,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,