Angular 16 support

Angular/powerbi-client-angular/angular.json

@@ -42,6 +42,5 @@
         }
       }
     }
-  },
-  "defaultProject": "powerbi-client-angular"
+  }
 }

Angular/powerbi-client-angular/config/src/tsconfig.lib.json

@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
-    "target": "es2015",
     "declaration": true,
     "declarationMap": true,
     "inlineSources": true,

Angular/powerbi-client-angular/ng-package.json

@@ -7,8 +7,6 @@
   "allowedNonPeerDependencies": [
     "powerbi-client",
     "powerbi-report-authoring",
-    "prettier",
-    "tslib",
-    "zone.js"
+    "prettier"
   ]
-}
+}

Angular/powerbi-client-angular/package.json

@@ -28,22 +28,21 @@
     "tag": "beta"
   },
   "dependencies": {
-    "powerbi-client": "^2.21.1",
-    "tslib": "^2.1.0"
+    "powerbi-client": "^2.21.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~13.3.8",
+    "@angular-devkit/build-angular": "^16.2.16",
     "@angular-eslint/builder": "^13.5.0",
     "@angular-eslint/eslint-plugin": "^13.5.0",
     "@angular-eslint/eslint-plugin-template": "^13.5.0",
     "@angular-eslint/schematics": "^13.5.0",
     "@angular-eslint/template-parser": "^13.5.0",
-    "@angular/cli": "~13.3.8",
-    "@angular/compiler": "~13.3.11",
-    "@angular/compiler-cli": "~13.3.11",
-    "@angular/core": "^13.3.11",
-    "@angular/platform-browser": "~13.3.11",
-    "@angular/platform-browser-dynamic": "~13.3.11",
+    "@angular/cli": "^16.2.16",
+    "@angular/compiler": "^16.2.12",
+    "@angular/compiler-cli": "^16.2.12",
+    "@angular/core": "^16.2.12",
+    "@angular/platform-browser": "^16.2.12",
+    "@angular/platform-browser-dynamic": "^16.2.12",
     "@types/jasmine": "~3.6.0",
     "@types/node": "^12.11.1",
     "@typescript-eslint/eslint-plugin": "4.16.1",
@@ -59,9 +58,9 @@
     "karma-coverage": "~2.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.0.0",
-    "ng-packagr": "^13.3.1",
+    "ng-packagr": "^16.2.3",
     "powerbi-report-authoring": "^1.1.1",
-    "typescript": "~4.6.4",
-    "zone.js": "~0.11.3"
+    "typescript": "~4.9.5",
+    "zone.js": "~0.13.3"
   }
-}
+}

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

@@ -12,7 +12,7 @@ describe('PowerBIDashboardEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIDashboardEmbedComponent],
+      imports: [PowerBIDashboardEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-em
 @Component({
   selector: 'powerbi-dashboard[embedConfig]',
   template: '<div class={{cssClassName}} #dashboardContainer></div>',
+  standalone: true,
 })
 export class PowerBIDashboardEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

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

@@ -10,7 +10,7 @@ describe('PowerBIEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIEmbedComponent],
+      imports: [PowerBIEmbedComponent],
     }).compileComponents();
 
     fixture = TestBed.createComponent(PowerBIEmbedComponent);

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

@@ -16,6 +16,7 @@ export type EventHandler = (event?: service.ICustomEvent<any>, embeddedEntity?:
 @Component({
   selector: 'powerbi-embed',
   template: '',
+  standalone: true,
 })
 export class PowerBIEmbedComponent implements OnInit {
   // Input() specify the properties that will be passed from the parent

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

@@ -12,7 +12,7 @@ describe('PowerBIPaginatedReportEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIPaginatedReportEmbedComponent],
+      imports: [PowerBIPaginatedReportEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { PowerBIEmbedComponent } from '../powerbi-embed/powerbi-embed.component'
 @Component({
   selector: 'powerbi-paginated-report[embedConfig]',
   template: '<div class={{cssClassName}} #paginatedReportContainer></div>',
+  standalone: true,
 })
 export class PowerBIPaginatedReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

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

@@ -12,7 +12,7 @@ describe('PowerBIQnaEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIQnaEmbedComponent],
+      imports: [PowerBIQnaEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-em
 @Component({
   selector: 'powerbi-qna[embedConfig]',
   template: '<div class={{cssClassName}} #qnaContainer></div>',
+  standalone: true,
 })
 export class PowerBIQnaEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

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

@@ -14,7 +14,7 @@ describe('PowerBIReportEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIReportEmbedComponent],
+      imports: [PowerBIReportEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-em
 @Component({
   selector: 'powerbi-report[embedConfig]',
   template: '<div class={{cssClassName}} #reportContainer></div>',
+  standalone: true,
 })
 export class PowerBIReportEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

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

@@ -12,7 +12,7 @@ describe('PowerBITileEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBITileEmbedComponent],
+      imports: [PowerBITileEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-em
 @Component({
   selector: 'powerbi-tile[embedConfig]',
   template: '<div class={{cssClassName}} #tileContainer></div>',
+  standalone: true,
 })
 export class PowerBITileEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

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

@@ -13,7 +13,7 @@ describe('PowerBIVisualEmbedComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [PowerBIVisualEmbedComponent],
+      imports: [PowerBIVisualEmbedComponent],
     }).compileComponents();
 
     // Arrange

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

@@ -11,6 +11,7 @@ import { EventHandler, PowerBIEmbedComponent } from '../powerbi-embed/powerbi-em
 @Component({
   selector: 'powerbi-visual[embedConfig]',
   template: '<div class={{cssClassName}} #visualContainer></div>',
+  standalone: true,
 })
 export class PowerBIVisualEmbedComponent extends PowerBIEmbedComponent implements OnInit, OnChanges, AfterViewInit {
   // Input() specify properties that will be passed from parent

Angular/powerbi-client-angular/src/powerbi-embed.module.ts

@@ -10,24 +10,18 @@ import { PowerBIReportEmbedComponent } from './components/powerbi-report-embed/p
 import { PowerBITileEmbedComponent } from './components/powerbi-tile-embed/powerbi-tile-embed.component';
 import { PowerBIVisualEmbedComponent } from './components/powerbi-visual-embed/powerbi-visual-embed.component';
 
+const components = [
+  PowerBIEmbedComponent,
+  PowerBIDashboardEmbedComponent,
+  PowerBIPaginatedReportEmbedComponent,
+  PowerBIQnaEmbedComponent,
+  PowerBIReportEmbedComponent,
+  PowerBITileEmbedComponent,
+  PowerBIVisualEmbedComponent,
+];
+
 @NgModule({
-  declarations: [
-    PowerBIEmbedComponent,
-    PowerBIDashboardEmbedComponent,
-    PowerBIPaginatedReportEmbedComponent,
-    PowerBIQnaEmbedComponent,
-    PowerBIReportEmbedComponent,
-    PowerBITileEmbedComponent,
-    PowerBIVisualEmbedComponent,
-  ],
-  imports: [],
-  exports: [
-    PowerBIDashboardEmbedComponent,
-    PowerBIPaginatedReportEmbedComponent,
-    PowerBIQnaEmbedComponent,
-    PowerBIReportEmbedComponent,
-    PowerBITileEmbedComponent,
-    PowerBIVisualEmbedComponent,
-  ],
+  imports: components,
+  exports: components,
 })
 export class PowerBIEmbedModule {}

Angular/powerbi-client-angular/src/private-api.ts

@@ -0,0 +1,6 @@
+// Re-export privately, as this needs to be accessible as a compile symbol.
+// Otherwise, the compiler would throw an error:
+// Unsupported private class PowerBIEmbedComponent. This class is visible to
+// consumers via PowerBIEmbedModule -> PowerBIEmbedComponent, but is not exported
+// from the top-level library entrypoint.
+export { PowerBIEmbedComponent as ɵPowerBIEmbedComponent } from './components/powerbi-embed/powerbi-embed.component';

Angular/powerbi-client-angular/src/public-api.ts

@@ -12,3 +12,5 @@ export * from './components/powerbi-paginated-report-embed/powerbi-paginated-rep
 export * from './components/powerbi-visual-embed/powerbi-visual-embed.component';
 export * from './components/powerbi-qna-embed/powerbi-qna-embed.component';
 export * from './powerbi-embed.module';
+
+export * from './private-api';

Angular/powerbi-client-angular/src/test.ts

@@ -8,24 +8,7 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: {
-  context(
-    path: string,
-    deep?: boolean,
-    filter?: RegExp
-  ): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
     teardown: { destroyAfterEach: false }
 });
-
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-
-// And load the modules.
-context.keys().map(context);

Angular/powerbi-client-angular/tsconfig.json

@@ -13,17 +13,21 @@
     "experimentalDecorators": true,
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2017",
+    "target": "ES2022",
     "module": "es2020",
     "lib": [
       "es2018",
       "dom"
-    ]
+    ],
+    "useDefineForClassFields": false
   },
   "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
+    "compilationMode": "partial",
+    "annotateForClosureCompiler": true,
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "enableResourceInlining": true
   }
 }