Outlook Web 插件第二次打开时使用 Angular 5 个随机错误 "Office.js has not fully loaded"

Question

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

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

是的，上面的 link 适用于 excel，但我可以找到类似的基本设置。我已经在 main.ts 中初始化了办公室，例如

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。仅当 bootstrap 未在 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.

时遇到问题

我猜我在 Office.initialize 中遗漏了一些东西，但不确定。

迁移的原因是在加载项内使用路由，这样我就不必为 2 个不同的加载项创建 2 个项目。

Answer 1

注意：对于良好的测试和更好的错误解释，Microsoft Office 加载项在 Internet 上进行测试总是有好处的 explorer.I 对于上述问题，在 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';

Outlook Web 插件第二次打开时使用 Angular 5 个随机错误 "Office.js has not fully loaded"

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

office-addins

outlook-addin

outlook-web-addins

angular