Office.js has not been fully loaded yet :Outlook Angular add-in

Question

I have working on Outlook Add-in using Angular. I am getting an error in Outlook for Windows that a component is not loading after loading index page. This is not happening with Outlook Web App using Chrome and Firefox.

Error message is:

SCRIPT5022: Office.js has not been fully loaded yet. Please try again 
later or make sure to add your initialization code on the Office.initialize function.
polyfills.bundle.js (2741,25)

this is my index.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import * as $ from 'jquery';

declare let Office:any;

function launch() {
  const platform = platformBrowserDynamic();
  platform.bootstrapModule(AppModule)
    .then((success: any) => {
      console.log('SampleAddin: bootstrap success', success);
    })
    .catch((error: any) => {
      console.log('SampleAddin: bootstrap error', error);
    });
}

Office.initialize = reason => {
   console.log('Office intialize.....');

  $(document).ready(function () {   

    if (environment.production) {
      enableProdMode();
    }

    launch();

   });

}

Answer 1

Answer for my own question: I couldn't loading component in outlook mac and windows. But after adding this to polyfills.ts:

import 'core-js/client/shim';

it's working in IE 11 also and it seems that this didn't break other browsers.

Answer 2

As per the docs,

you have to initialize a add-in using Office.onReady().

Please refer the docs

https://learn.microsoft.com/en-us/office/dev/add-ins/develop/initialize-add-in