打开外接程序时，第二次使用Angular 5随机错误“ Office.js尚未完全加载”的Outlook Web外接程序

Question

我正在使用Outlook Web Addin尝试使用Angular 5使其工作，我遵循了Microsoft提供的官方文档。

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

是的，上面的链接是针对excel的，但是基本设置我可以找到它的相似之处。 我已经在main.ts中初始化了Office，例如

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){

}

我在此插件中使用路由，该插件在app.module.ts中声明并设置，代码为

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 { }

我已经在本地测试了路由/＃archive，并且在ArchiveComponent模板页面中显示了html。仅当未在Office.initailize中完成引导时。

当我将加载项托管在apache服务器上并将其安装在我的Outlook Web中时，它仅可首次使用。 ArchiveComponent组件代码如下：

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)


  }

}

oninit方法中的控制台在第一次打开时从Outlook Web浏览器中打印，此后，当我下次在同一Outlook Web上再次打开加载项时，它将引发错误

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.

下面是来自控制台的图像，该图像有2个错误，第一个错误是未知的，但是来自插件路由，第二个是打印第一次。

默认情况下，Angular版本构建的相同addin效果很好，但是在尝试将其迁移到Angular 5时遇到问题。

我可以猜到在Office.initialize中我缺少一些东西，但不确定。

要迁移的原因是在插件中使用路由，因此我没有为2个不同的插件创建2个项目。

Answer 1

注意：为了获得良好的测试并获得更好的错误说明，它始终很适合Microsoft Office加载项与Internet Explorer一起测试。我发现上述问题在Internet Explorer中而不是Fire Fox中具有更好的错误说明。

做完一些练习后，我发现当我打开相同的Internet Explorer时，pollyfill.js中也会引发一些错误。我已经在pollyfill.ts中取消了一些注释，以添加对浏览器的支持，并且一切正常。

只需在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';