Outlook Web 加载项在第二次打开加载项时使用 Angular 5 随机错误“Office.js 尚未完全加载”

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 网络中时，它仅第一次工作。 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 版本构建的相同插件效果很好，但在尝试将其迁移到 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';