Unable to embed reports of type 'create'.

Hello,

We are currently porting our application from AngularJS to Angular 12. In our AngularJS application, the users were be able to create Power BI reports directly from the UI. We want to be able to do this as well in the new Angular app.

The config we were using to allow this in our old app is:

var pbiCreateConfig = {
        type: 'create',
        tokenType: models.TokenType.Embed,
        accessToken: accessToken, //We are getting this from our API
        embedUrl: embedUrl, 
        datasetId: embedDatasetId
 };

var reportCreateContainer = angular.element(document.querySelector("#embedPBICreateContainer"))[0];
var reportCreate = powerbi.createReport(reportCreateContainer, pbiCreateConfig);

When trying to do the same thing in our new Angular app, with the below config, there is an error in the console. Config: Component.ts file:

this.createConfig = <IEmbedConfigurationBase><any>{
            type: 'create',
            tokenType: models.TokenType.Embed,
            accessToken: tokenData.token, //We are getting this from our API
            embedUrl: 'https://app.powerbi.com/reportEmbed?groupId=' + this.selectedDatasetDetails.WorkspaceID,
            datasetId: this.selectedDatasetDetails.DatasetID,
};

Component.html file:

<powerbi-report #create *ngIf="showCreateReport"
                    [embedConfig]="createConfig"
                    [cssClassName]="createReportClass"
                    [phasedEmbedding]="false"
                    [eventHandlers]="eventHandlers">
</powerbi-report>

The embedUrl and datasetId are the same in both cases.

The error that we facing is:

Uncaught Error: Attempted to embed component of type: create but did not find any matching component.  Please verify the type you specified is intended.
    at Service../src/service.ts.Service.embedNew (powerbi.js:10634:1)
    at Service../src/service.ts.Service.embedInternal (powerbi.js:10601:1)
    at Service../src/service.ts.Service.bootstrap (powerbi.js:10587:1)
    at PowerBIReportEmbedComponent.push../node_modules/powerbi-client-angular/__ivy_ngcc__/bundles/powerbi-client-angular.umd.js.PowerBIReportEmbedComponent.ngAfterViewInit (powerbi-client-angular.umd.js:476:1)
    at callHook (core.umd.js:2817:1)
    at callHooks (core.umd.js:2786:1)
    at executeInitAndCheckHooks (core.umd.js:2737:1)
    at refreshView (core.umd.js:10037:1)
    at refreshEmbeddedViews (core.umd.js:11093:1)
    at refreshView (core.umd.js:9990:1)

Could you please help us out with this issue as soon as possible?

microsoft / powerbi-client-angular

Unable to embed reports of type 'create'. #17