Angular Office加載項：“找不到名稱'Office'”

Question

我使用angular-cli創建了一個新的Angular項目，然后通過npm安裝了Office TS定義，並將Office JS API CDN放在我的index.html的頭文件中。 但是，在我的main.ts中，當我調用Office.initialize = function（）{}時; 即使命名空間被TS識別，它也找不到名稱“Office”。 有人知道我做錯了什么嗎？ 謝謝！

我一直在關注提示頁面： https ： //dev.office.com/docs/add-ins/develop/add-ins-with-angular2

如果要重現我的方案並安裝Angular CLI：

ng new test
cd test
npm install –save-dev @types/office-js

然后打開項目目錄並轉到src / index.html。 在標題中添加此CDN：

<script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>

然后轉到src / main.ts

並更改它，以便應用程序在初始化Office之前不會引導模塊：

Office.initialize = function(){
  if (environment.production) {
    enableProdMode();
  }
  platformBrowserDynamic().bootstrapModule(AppModule);
};

UPDATE

通過使用以下方法，我能夠在我的main.ts中使用：

declare const Office: any;

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

但是，這僅在加載項在Office應用程序中側載時才有效。 該模塊似乎沒有在瀏覽器中進行自舉，只是說“正在加載......”。 有沒有辦法讓它在瀏覽器中加載以進行調試？ 我很擔心這將如何影響調試以及使用量角器，因果報應和茉莉花的任何E2E或單元測試。

Answer 1

Office.js庫不會在瀏覽器中加載，因此Office.initialize()不會運行。 但您可以使用C:\\Windows\\SysWOW64\\F12\\F12Chooser.exe的F12工具調試Office應用程序中的C:\\Windows\\SysWOW64\\F12\\F12Chooser.exe

更新：您可以在此處找到該工具的幫助： https ： //docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide

Answer 2

我建議你看看Script Lab ，這是最近宣布的工具，也是開源展示樣本，使用Angular 4，你可以用它來獲取靈感。 有關該項目的播客中也討論了一些基礎技術。

我們為Script Lab所做的是為Office.js初始化創建一個Promise，並樂觀地等待它幾秒鍾。 如果我們沒有收到它，我們會顯示一組按鈕，以幫助用戶選擇是以Web模式啟動還是啟動，就好像它仍然在加載項中（並希望最好）。

另請參閱如何正確檢查主機：Office，Office聯機和Web瀏覽器