Angular Outlook Web加载项使用角度5随机错误“；Office.js尚未完全加载“；在第二次打开外接程序时

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

是的，上面的链接是excel的，但基本设置我可以找到类似的。 我已经初始化了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 { }

我在本地it works中测试了routes/#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版本的同一个加载项工作得很好，但在尝试将其迁移到angular 5时遇到了问题

我可以猜到我在办公室里遗漏了一些东西，但我不确定

---

迁移的原因是使用外接程序内部的路由，以便对于2个不同的外接程序，我不必创建2个项目。

注意：对于良好的测试和更好的错误解释，使用Internet explorer测试Microsoft Office外接程序总是很好的。对于上述内容，我在Internet explorer中找到了更好的错误描述，而不是在Fire Fox中问题

---

在做了一些练习之后，我发现当我打开同样的东西InternetExplorer时，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';

---

调试外接程序时，能否检查每次加载外接程序时是否调用“Office.initialize=…”语句？office.js javascript错误表明它未定义。在进行一些练习后，我发现在打开相同的Internet Explorer时，pollyfill.js也出现了一些错误。我在pollyfill.ts中取消了一些行的注释，添加了对浏览器的支持，一切都很好。