Outlook Web Add-in using Angular 5 random error "Office.js has not fully loaded" on second time when Add-in opened

Question

I am working on Outlook Web Addin trying get it work using Angular 5, I have followed the official documentation provided by microsoft.

https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-angular

yes the above link is for excel but the basic setup i can find its similar. I have initialized the Office in main.ts like

main.ts

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

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

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


try{
Office.initialize = function () {
  platformBrowserDynamic().bootstrapModule(AppModule);
};
}catch(err){

}

i am using routes in this addin which is declared and setup in app.module.ts the code is

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { HttpModule } from '@angular/http';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { ArchiveComponent } from './archive/archive.component';
import { SearchComponent } from './search/search.component';


@NgModule({
  declarations: [
    AppComponent,
    ArchiveComponent,
    SearchComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
   RouterModule.forRoot([
      {
        path:'archive',
        component:ArchiveComponent

      },
      {
        path:'search_archive',
        component:SearchComponent
      }
    ])

  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
  ],


  bootstrap: [AppComponent]
})
export class AppModule { }

I have tested the routes /#archive in local it works and displays the html inside the ArchiveComponent template page. only when the bootstrap is not done in Office.initailize.

When i hosted the addin on my apache server and installed it in my outlook web it works for only first time. ArchiveComponent component code is below:

import { Component, OnInit } from '@angular/core';
declare const Office: any;


@Component({
  selector: 'app-archive',
  templateUrl: './archive.component.html',
  styleUrls: ['./archive.component.css']
})
export class ArchiveComponent implements OnInit {

  constructor(private zone: NgZone) { }

  ngOnInit() {
      console.log(Office.context.mailbox.item.itemId)


  }

}

Console inside the oninit method prints in browser from Outlook web when opened first time, after that when i reopen the addin next time on same Outlook web it throws the error

Office.js has not fully loaded. Your app must call "Office.onReady()" as part of it's loading sequence (or set the "Office.initialize" function). If your app has this functionality, try reloading this page.

below is the image from console having 2 errors and 1st one is unknown but its from addin routes and 2nd one is Print 1st time

Same addin which is build by default angular version works great but facing problem when trying to migrate this to Angular 5.

I can guess that there is some thing which i am missing at the Office.initialize but not sure.

Reason to migrate is to use route inside the add-in so that for 2 different addins i don have create 2 projects.

Answer 1

Note: For the good tests and getting better error explaination its always good for Microsoft Office Add-Ins to test with Internet explorer.I found the better error discription in Internet explorer instead in Fire Fox for above problem.

After doing some practices, I found that there is some error also throwing in pollyfill.js when i open the same thing Internet Explorer. I have uncommented some lines in pollyfill.ts to add supports for the browser and every thing worked fine.

Just uncomment these lines in pollyfill.ts

   /** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';