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

Issue

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> 

Solution

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.

Answered By - oksd