Angular办公室Add-in："Cannot find name 'Office'"

Question

我使用 angular-cli 创建了一个新的 Angular 项目，然后通过 npm 安装了 Office TS 定义并将 Office JS API CDN 放在 header我的 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。在 header:

中添加此 CDN

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

然后去src/main.ts

并更改它，以便应用在初始化 Office 之前不会 bootstrap 模块：

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

更新

我能够在我的 main.ts 中使用：

declare const Office: any;

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

但是，这仅在 Office 应用程序中的 add-in 为 side-loaded 时有效。该模块似乎没有在浏览器中得到 bootstrapped，只是说 'Loading...'。有没有办法让它在浏览器中加载以进行调试？我担心这将如何影响调试以及使用量角器、业力和茉莉花进行的任何 E2E 或单元测试。

Answer 1

Office.js 库不会在浏览器中加载，因此 Office.initialize() 不会运行。但您可以在 C:\Windows\SysWOW64\F12\F12Chooser.exe

使用 F12 工具调试 Office 应用程序中的加载项

更新：您可以在此处找到该工具的帮助：https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide

Answer 2

我建议你看看Script Lab, a recently-announced tool and also open-source showcase sample, that uses Angular 4, and which you can use for inspiration. Some of the underlying technology is also discussed in a podcast about the project。

我们为 Script Lab 所做的是为 Office.js 初始化创建一个 Promise，然后乐观地等待它几秒钟。如果我们没有收到它，我们会显示一组按钮来帮助用户选择是在 Web 模式下启动还是像它仍在加载项中一样启动（并希望最好）。

另见

Angular办公室Add-in："Cannot find name 'Office'"

Angular Office Add-in: "Cannot find name 'Office'"

office-js

angular