We wanted to embed a power BI report in our simple Angular app.
Microsoft provide an Angular module to do this which we plugged in.
Simple enough, it looked like it was all setup and should work but it simply would not display. Looking at a sample that does work we could see that an iFrame was not being generated by the directive.
In the console window was this error:
angular.js:13424 TypeError: Cannot read property ’embed’ of undefined at PowerBiService.embed (https://ptadminportal.local/node_modules/angular-powerbi/dist/angular-powerbi.js:338:40)
The included scripts were added in the wrong order. They needed to be this way around:
But the angular-powerbi script was first.
Everyone’s setup is different and so the fix will likely be different but essentially you need to ensure your scripts are added in the correct order.
In our case we had a kind of hybrid Angular and MVC app and so we were using the BundleConfig.cs to bundle up the scripts. By default it was adding files in a a folder in string order, these two scripts were in the same folder and so they were added in the wrong dependency order.
So we simply added each of these files explicitly, ensuring the order was correct:
bundles.Add(new ScriptBundle("~/app/powerbi") .Include("~/app/lib/js/powerbi-client/dist/powerbi.js") .Include("~/app/lib/js/angular-powerbi/dist/angular-powerbi.js"));
Shout out to Miguel Saldarriaga for solving this 🙂