Using Power BI Embedded with Angular and Node Application

After searching on the internet I couldn’t find a proper tutorial that shows how to embed a power bi report in an angular and node application. So in this tutorial, I will show you guys how you can embed a power bi report in an angular and node application.

How power bi embedding works:

This is a simple flow chart of the main components of power bi and how they interact with each other. For simplicity, you could think of Power BI Client as the frontend angular app and the Power BI REST API as the backend node app.

PowerBI Embedded Flow Diagram

1. To embed the report on the frontend we first need an Embed Token, so we send a request for it to the backend.
2. After getting the request we first authenticate ourselves by using Power BI user name and password or by using Service Principal.
3. In return, AAD sends the backend an access token to our backend.
4. Then we can use this access to get embed token in return from the Power BI Service, this token prevents unauthorized access to different reports which are present in the same workspace.
5. We get this embed token and return it to the frontend app.
6. Then we use the Power BI Client and the embed token to display the power bi report on the frontend app.

Setting up Power BI Client:

1. First, we need to install Power bi client on Angular

$ npm install powerbi-client

2. Then we create in the environment file you can add all the important API links, you will get group ID and report ID from the Power BI Service after publishing your report

powerBI: {
    reportBaseURL: 'https://app.powerbi.com/reportEmbed',
    qnaBaseURL: 'https://app.powerbi.com/qnaEmbed',
    tileBaseURL: 'https://app.powerbi.com/embed',
    groupID: '<group-id>',
    reportID: '<report-id>'
}

3. We need to create a container in the component.html, where the embedded iframe will be displayed

<section id="report">
  <div style="width: 100%…