在用于嵌入电源双报告的角度应用程序中<powerbi-report >标签出现错误

Question

我是 Power Bi 新手，正在尝试将 Power Bi 报告集成到我的 Angular 应用程序中。遵循 https://github.com/microsoft/powerbi-client-angular/tree/main/Angular/demo 中的代码。当我将演示应用程序作为新应用程序单独运行时，它工作正常。当我在自定义角度应用程序中集成相同的代码时，出现 html 文件错误。下面是错误 有帮助解决以下问题吗？

” 错误：src/app/modules/auth/components/dashboard/dashboard.component.html:133:7 - 错误 NG8001：“powerbi-report”不是已知元素：

1. 如果“powerbi-report”是 Angular 组件，则验证它是否是该模块的一部分。
2. 如果“powerbi-report”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。

133 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/modules/auth/components/dashboard/dashboard.component.ts:22:16 22 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 组件 DashboardComponent 的模板出现错误。

错误：src/app/modules/auth/components/dashboard/dashboard.component.html:133:23 - 错误 NG8002：无法绑定到“embedConfig”，因为它不是“powerbi-report”的已知属性.

1. 如果“powerbi-report”是 Angular 组件并且具有“embedConfig”输入，则验证它是否是该模块的一部分。
2. 如果“powerbi-report”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以抑制此消息。
3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。

133 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div class="controls">
    <ng-container *ngIf="isEmbedded; else embedReportFlow">
      <!-- <button (click)="changeVisualType()">Change visual type</button> -->
      <button (click)="hideFilterPane()">Hide filter pane</button>
      <button (click)="setDataSelectedEvent()">Set event</button>
      <label class="display-message">{{ displayMessage }}</label>
    </ng-container>
    <ng-template #embedReportFlow>
      <label class="display-message position">
        {{ displayMessage }}
      </label>
      <!-- <button (click)="embedReport()" class="embed-report">Embed Report</button> -->
    </ng-template>

   <ng-container *ngIf="isEmbedded">
      <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap">
      </powerbi-report>
    </ng-container> 

Answer 1

我从演示应用程序中发现了什么。

1. 您必须使用以下命令安装 PowerBI 的软件包：

   npm i powerbi-client-angular

   和

   npm i [email protected]

   
   然后您的

   packages.json

   应该包含这些条目。 查看演示应用程序package.json
2. 然后，您必须将

   PowerBIEmbedModule

   添加到

   app.module.ts

   下的

   imports

   文件中（另请参阅演示应用程序 app.module.ts）：

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PowerBIEmbedModule } from 'powerbi-client-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, PowerBIEmbedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Angular 依赖 package.json 来管理依赖项和项目配置。 Angular 模块导入用于组织和封装代码，从而能够在应用程序中使用组件和功能。