Uncaught ReferenceError: pbi is not defined

[stevensi1018]

I'm trying to put my report on my web application but I keep getting multiple errors. I found the following code online. I already have my accessToken in another variable in my web page but everytime I use an embededURL (https://embedded.powerbi.com/appTokenReportEmbed?reportId=02e45bd6-89fe-4ce6-8240-67ec73b178fc in this case) I get the following error: "Uncaught ReferenceError: pbi is not defined". Is there something I forgot to include?

I want to keep this as simple as possible. I want to execute this code in my web page in javascript

This line: let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory); was not there before but I added this due to forum posts. If i remove it, the error would be "powerbi is not defined"

var el = document.getElementById("bEmbedReportAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedReport, false);
    } else {
        el.attachEvent('onclick', updateEmbedReport);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded report if all fields were filled in.
    /*var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedReport();
    }*/
// update embed report
function updateEmbedReport() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    alert(embedUrl);
    if (embedUrl === "")
        return;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'report',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the report.
    var reportContainer = document.getElementById('reportContainer');

    // Embed the report and display it within the div container.
    let powerbi = new pbi.service.Service(pbi.factories.hpmFactory, pbi.factories.wpmpFactory, pbi.factories.routerFactory);
    var report = powerbi.embed(reportContainer, config);

    // report.on will add an event handler which prints to Log window.
    report.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });

Can someone helps me with this ? 

[Eric_Zhang]

@stevensi1018

I don't know about Typescript or Angular, however per my research, that error "Uncaught ReferenceError: pbi is not defined" is a common issue, which indicates the powerbi-client may not be correctly referenced in this case. As to the solution, you can the common solutions.

@MawashiKid may have more constructive advice.

[stevensi1018 · Accepted solution]

I fixed this by including <script type="text/javascript" src="(server name)/public/assets/js/powerbi.js""></script> this in my script.