fix(component): initialize component in AfterViewInit instead of OnInit

[miguskar]

Some backstory to this PR:

We're using this component inside a mat-tab-group from angular material as such:

<mat-tab-group *ngIf="embedUrl && org._id === selectedAccount?._id">
    <mat-tab label="Some label">
          <div class="power-bi-wrapper">
            <powerbi-component [embedUrl]="url"
                               [accessToken]="token"
                               type="report"
                               [id]="reportId"
            ></powerbi-component>
          </div>
    </mat-tab>

    <mat-tab label="Some other label" *ngIf="otherReportId && otherUrl">
          <div class="power-bi-wrapper">
            <powerbi-component [embedUrl]="otherUrl"
                               [accessToken]="otherToken"
                               type="report"
                               [id]="otherReportId"
            ></powerbi-component>
          </div>
    </mat-tab>
  </mat-tab-group>

However, when the page is loaded and the power BI library tries to add stuff to the iframe, it seems as though the iframe has not been added to the page yet. You can see in the screenshot below that the contentWindow of the iframe is undefined, which means that it hasn't beeen added to the DOM yet.

And the following error is thrown: By waiting until AfterViewInit we should be able to be sure that the iframe has been added to the page before loading data.

This only happens on page load, so if we open a sidepane or something, the iframe is loaded properly.

I haven't been able to test if this PR actually works, as I can't seem to get my fork up and running with our project. Any advice on this is welcome.

[miguskar]

I thought i was being smart but i was just being an idiot. This does not seem to be the root cause. Will return with updates :)

[diego-d5000]

Haha. Don't worry my friend :) and thank you.