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。在 header 中添加这个 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);
};

更新

我可以通过以下方式在我的 main.ts 中使用：

declare const Office: any;

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

但是，这仅适用于将加载项侧加载到 Office 应用程序中的情况。该模块似乎没有在浏览器中启动，只是说“正在加载...”。有没有办法让它在浏览器中加载以进行调试？我担心这将如何影响调试以及使用量角器、业力和茉莉花进行的任何 E2E 或单元测试。

Answer 1

我建议您查看 Script Lab，这是一个最近发布的工具，也是开源展示示例，它使用 Angular 4，您可以从中获得灵感。一些底层技术也在podcast about the project中讨论。

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

另见How to correctly check the host: Office, Office online and web browser

Answer 2

Office.js 库不会在浏览器中加载，因此Office.initialize() 不会运行。但是您可以在C:\Windows\SysWOW64\F12\F12Chooser.exeC:\Windows\SysWOW64\F12\F12Chooser.exe使用 F12 工具在 Office 应用程序中调试加载项

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