Getting error for <powerbi-report > tag in the angular app for embedding power bi report

Question

I am new to Power Bi and trying to integrate the power bi report in my angular app.Follwing the code from https://github.com/microsoft/powerbi-client-angular/tree/main/Angular/demo. When i run the demo app separately as a new app its working fine. When i integrate the same code in my custom angular app , getting error for the html file . Below is the error Any help to fix the below issue ?

" Error: src/app/modules/auth/components/dashboard/dashboard.component.html:133:7 - error NG8001: 'powerbi-report' is not a known element:

1. If 'powerbi-report' is an Angular component, then verify that it is part of this module.
2. If 'powerbi-report' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

133 <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/app/modules/auth/components/dashboard/dashboard.component.ts:22:16 22 templateUrl: './dashboard.component.html', ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component DashboardComponent.

Error: src/app/modules/auth/components/dashboard/dashboard.component.html:133:23 - error NG8002: Can't bind to 'embedConfig' since it isn't a known property of 'powerbi-report'.

1. If 'powerbi-report' is an Angular component and it has 'embedConfig' input, then verify that it is part of this module.
2. If 'powerbi-report' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

133 <powerbi-report [embedConfig]="reportConfig" [cssClassName]="reportClass" [phasedEmbedding]="phasedEmbeddingFlag" [eventHandlers]="eventHandlersMap"> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<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

What I found out from the demo application.

1. You have to install the packages for the PowerBI with these commands: npm i powerbi-client-angular and npm i powerbi-report-authoring@1.1.1
   Your packages.json should then have these entries. See demo app package.json
2. You must then add the PowerBIEmbedModule to your app.module.ts file under imports (See also in demo app 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 relies on package.json for managing dependencies and project configuration. Angular Module imports are used to organize and encapsulate code, enabling the use of components and features within the application.