Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Compete to become Power BI Data Viz World Champion! First round ends August 18th. Get started.

Reply
Atefb
New Member

Power bi with angular 4 on visual studio 2017

I'm using Visual studio 2017, i need to create an ASP Net Core Web Application, with the angular 4 template. I installed with npm the package powerbi-client (npm install -save powerbi-client). I added a component with the following code

 

 

import { Component, Inject, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import * as pbi from 'powerbi-client';

@Component({
selector: 'reporting',
templateUrl: './reporting.component.html'
})
export class ReportingComponent implements AfterViewInit {
@ViewChild('myId') myId: ElementRef;

constructor() {
}

ngAfterViewInit() {
console.log(this.myId.nativeElement);
this.showReport();
}

private showReport() {
var embedToken = 'my embed token';
var reportId = 'my report Id';
var embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=' + reportId;

var config = {
type: 'report',
accessToken: embedToken,
embedUrl: embedUrl,
id: reportId,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
// Grab the reference to the div HTML element that will host the report.
let reportContainer = this.myId.nativeElement;

// Embed the report and display it within the div container.

// 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);
let report = powerbi.embed(reportContainer, config);

// Report.off removes a given event handler if it exists.
report.off("loaded");

// Report.on will add an event handler which prints to Log window.
report.on("loaded", function () {
console.log("Loaded");
});
}
}

 

But when i execute my web application, i have the following error:

NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined

 

Is there anyone who tried to do the same thing.

 

Need Help

1 REPLY 1
Atefb
New Member

I'm using Visual studio 2017, i need to create an ASP Net Core Web Application, with the angular 4 template. I installed with npm the package powerbi-client (npm install -save powerbi-client). I added a component with the following code

 

 

import { Component, Inject, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import * as pbi from 'powerbi-client';

@Component({
selector: 'reporting',
templateUrl: './reporting.component.html'
})
export class ReportingComponent implements AfterViewInit {
@ViewChild('myId') myId: ElementRef;

constructor() {
}

ngAfterViewInit() {
console.log(this.myId.nativeElement);
this.showReport();
}

private showReport() {
var embedToken = 'my embed token';
var reportId = 'my report Id';
var embedUrl = 'https://embedded.powerbi.com/appTokenReportEmbed?reportId=' + reportId;

var config = {
type: 'report',
accessToken: embedToken,
embedUrl: embedUrl,
id: reportId,
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
}
};
// Grab the reference to the div HTML element that will host the report.
let reportContainer = this.myId.nativeElement;

// Embed the report and display it within the div container.

// 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);
let report = powerbi.embed(reportContainer, config);

// Report.off removes a given event handler if it exists.
report.off("loaded");

// Report.on will add an event handler which prints to Log window.
report.on("loaded", function () {
console.log("Loaded");
});
}
}

 

But when i execute my web application, i have the following error:

NodeInvocationException: Prerendering failed because of error: ReferenceError: window is not defined

 

Is there anyone who tried to do the same thing.

 

Need Help

Helpful resources

Announcements
August Power BI Update Carousel

Power BI Monthly Update - August 2025

Check out the August 2025 Power BI update to learn about new features.

August 2025 community update carousel

Fabric Community Update - August 2025

Find out what's new and trending in the Fabric community.