Error embedding a visual in an Angular app using Power BI Embedded

NanthanW — Thu, 26 Sep 2024 14:44:28 GMT

Hi all,

I've built an application that embeds power bi reports in a custom web portal. The application is built on Angular 18, and I'm using the Power BI Angular module. I'm running into a very strange issue when attempting to embed a specific visual using the PowerBIVisualEmbed component. I'm able to embed a visual from the page of the report that I want, but no matter what visualName I provide in the visual config object, it only embeds one specific visual. For reference, here's my visual config object:

visualConfig:IVisualEmbedConfiguration = {

type: 'visual',

tokenType: models.TokenType.Aad,

pageName: 'Embedded',

accessToken: this.accessToken,

id: this.reportId,

visualName: this.visualId, <---- No matter what I set this value to, it always embeds the same visual.

embedUrl: this.embedUrl,

}

As I've mentioned, clearly the issue isn't with my access token, report id, or embed url, because I get no errors thrown, and it successfully embeds a visual, it's just always the wrong one. Even if I change the visualName to completely random characters, it doesn't throw an error, and still embeds the same wrong visual.

I tried using the powerbi-client js library instead of going through the angular library, and I ran into the same exact issue.

Is there something that I'm missing? I've had a very difficult time finding any information online about directly embedding a visual, hence why I'm coming here. Any help would be greatly appreciated!

Re: Error embedding a visual in an Angular app using Power BI Embedded

Anonymous — Fri, 27 Sep 2024 02:26:56 GMT

Hi @NanthanW ,

You can refer to the official documentation link below to double-check that your visual id provides a valid value, and if it's convenient you can consider changing the report or work space to try embedding a visual from another report, and clearing the cache to refresh the page to check if the same visual rendering still occurs

How to embed Power BI content in an Angular app | Microsoft Learn

Embed a visual in Power BI embedded analytics | Microsoft Learn

Best Regards,

Liu Yang

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

topic Re: Error embedding a visual in an Angular app using Power BI Embedded in Developer

Error embedding a visual in an Angular app using Power BI Embedded

Re: Error embedding a visual in an Angular app using Power BI Embedded