PowerBI Client Angular

6.0.3 verified Sat Apr 25 auth: no javascript

Angular wrapper library for embedding Power BI reports, dashboards, tiles, visuals, Q&A, paginated reports, and creating reports directly in Angular applications. Current stable version is 6.0.3, released under MIT license. Maintained by Microsoft, with active development and regular releases aligned with Angular versions. Key differentiators: provides Angular-native components (e.g., powerbi-report, powerbi-dashboard) with property binding and event handling, supports phased embedding for performance optimization, and integrates with powerbi-client and powerbi-report-authoring libraries. Requires Angular 17+ and RxJS.

Common errors

error Error: Cannot find module 'powerbi-client-angular' ↓

cause Package not installed or incorrect import path.

fix

Run 'npm install powerbi-client-angular powerbi-client' and ensure import path is 'powerbi-client-angular'.

error TypeError: Cannot read properties of undefined (reading 'Embed') ↓

cause models not imported correctly or accessToken missing.

fix

Import models from 'powerbi-client-angular' and ensure embedConfig includes a valid accessToken.

error NG8001: 'powerbi-report' is not a known element ↓

cause PowerBIEmbedModule not imported in the module that declares the component.

fix

Add PowerBIEmbedModule to the imports array of the NgModule.

Warnings

breaking Upgraded to Angular 17 and powerbi-client 2.23.1 as of v5.0.0. Older Angular versions are not supported. ↓

fix Update Angular to 17+ and powerbi-client to 2.23.1+.

breaking In v4.0.0, the paginated report component interface was updated. Existing code using paginated reports may break. ↓

fix Update paginated report configuration to match new interface as per documentation.

deprecated PowerBIEmbedModule is still used, but Angular standalone components are becoming the norm. The library may transition away from NgModules in future versions. ↓

fix Watch for future releases that may support standalone components.

gotcha The component re-embeds on every configuration change. Ensure embedConfig is immutable or use OnPush change detection to avoid unnecessary re-embeds. ↓

fix Use immutable objects for embedConfig or implement ChangeDetectionStrategy.OnPush.

Install

npm install powerbi-client-angular

yarn add powerbi-client-angular

pnpm add powerbi-client-angular

Imports

PowerBIEmbedModule
```
import { PowerBIEmbedModule } from 'powerbi-client-angular';
```
Must be imported in the Angular module (NgModule) where embedding components are used.

PowerBIReportEmbedComponent

wrong

import { PowerBIReportEmbedComponent } from 'powerbi-client-angular/powerbi-report-embed.component';

correct

import { PowerBIReportEmbedComponent } from 'powerbi-client-angular';

Component is re-exported from the module; direct import from subpath is not supported.

PowerBIEmbed
wrong
```
import PowerBIEmbed from 'powerbi-client-angular';
```
correct
```
import { PowerBIEmbed } from 'powerbi-client-angular';
```
PowerBIEmbed is a named export (decorator), not a default export. Used for custom components with @PowerBIEmbed().
models
wrong
```
import { models } from 'powerbi-client';
```
correct
```
import { models } from 'powerbi-client-angular';
```
models is re-exported from powerbi-client for convenience, but importing directly from powerbi-client also works.

Quickstart

Imports PowerBIEmbedModule, defines a component with powerbi-report selector, configures embed properties and event handlers.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PowerBIEmbedModule } from 'powerbi-client-angular';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    PowerBIEmbedModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
import { Component } from '@angular/core';
import { models } from 'powerbi-client-angular';

@Component({
  selector: 'app-root',
  template: `
    <powerbi-report
      [embedConfig]="{
        type: 'report',
        id: 'reportId',
        embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=reportId',
        accessToken: accessToken,
        tokenType: models.TokenType.Embed
      }"
      [cssClassName]="'report-class'"
      [eventHandlers]="eventHandlers"
    ></powerbi-report>
  `
})
export class AppComponent {
  accessToken = 'YOUR_ACCESS_TOKEN';
  eventHandlers = new Map<string, (event?: any) => void>([
    ['loaded', () => console.log('Report loaded')],
    ['rendered', () => console.log('Report rendered')],
    ['error', (event) => console.log(event.detail)]
  ]);
}