带有 Angular 6 的基于 MS Office JS 的 Word 插件答案

【问题标题】：MS Office JS-based Word add-in with Angular 6带有 Angular 6 的基于 MS Office JS 的 Word 插件
【发布时间】：2018-11-17 07:26:31
【问题描述】：

我是基于 JS 的 Office 插件的新手，我正在尝试使用 Angular 6 + Typescript 创建一个示例 Word 插件。

为此，我找到了一个看起来很完美的办公工具箱：https://www.npmjs.com/package/office-toolbox。然而，它的模板可以追溯到 Angular 1.x。因此，我尝试通过将 Angular 6 CLI 新项目与工具箱中的模板合并来进行实验，但没有成功。

我尝试了两种方法。当然，两者都需要先全局安装office工具箱：

  npm install -g office-toolbox

加载项启动后，我的理解是我们必须先复制XML清单并在Word中打开它，即：

将 XML 清单从您的项目复制到您为此目的创建的共享中（例如 C:\Sideloads）；
启动插件（npm start 或ng serve）；
打开一个新的 Word 文档；
打开Developer功能区并单击Add-ins；
转到Shared folder，选择您的插件，然后单击Add。功能区中会出现一个新按钮：单击它以显示其窗格。

问题在于，似乎不存在将 Angular 6 与 Office 插件结合使用的最新解决方案，并且了解此环境中的引导过程并非易事。所以我尝试了 2 种骇人听闻的方法，但都没有奏效。有人可以提出更好的方法吗？以下是方法：

方法 1

这遵循办公室工具箱网站的指示。

运行 office-toolbox generate 并回答问题以基于 Angular 生成带有清单的新应用程序。
现在我想尝试升级项目。我尝试通过将package.json 与ng new 的默认包合并来更改package.json，然后运行npm install。工具箱生成的包长这样：

合并后的文件是：

{
  "name": "sample-add-in",
  "description": "",
  "author": "",
  "version": "0.1.0",
  "scripts": {
    "tsc": "tsc -p tsconfig.json -w",
    "server": "browser-sync start --config bsconfig.json",
    "copy": "cpx \"src/**/!(*.ts)\" dist --watch",
    "start": "rimraf dist && concurrently \"npm run tsc\" \"npm run copy\" \"npm run server\"",
    "validate": "./node_modules/.bin/validate-office-addin",

      "ng": "ng",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26",

      "office-ui-fabric-js": "^1.3.0",
    "jquery": "^3.1.1",
    "office-addin-validator": "^1.0.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.0",
    "@angular-devkit/build-angular": "~0.6.0",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",

      "concurrently": "^3.1.0",
    "cpx": "^1.5.0",
    "rimraf": "^2.5.4",
    "browser-sync": "^2.18.5",
    "@types/office-js": "^0.0.37",
    "@types/jquery": "^2.0.39",
    "@types/angular": "^1.6.2"
  }
}

然而，当我运行 npm start 时，我从主页收到这些错误：

Refused to apply style from 'https://localhost:3000/node_modules/angular/angular-csp.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

angular.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Refused to execute script from 'https://localhost:3000/node_modules/angular/angular.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

app.ts:9 Uncaught ReferenceError: angular is not defined
    at app.ts:9
    at app.ts:43

o15apptofilemappingtable.debug.js:5530 Warning: Office.js is loaded outside of Office client
telemetryproxy.html:1 Failed to load resource: the server responded with a status of 404 ()
(index):1 Refused to apply style from 'https://localhost:3000/node_modules/angular/angular-csp.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

telemetryproxy.html:1 Failed to load resource: the server responded with a status of 404 ()

方法2

因此我尝试了相反的方法，恰好在https://github.com/Hongbo-Miao/office-addin-quick-start 上提出了建议（我不得不改变一些东西）。

创建一个新的 Angular 应用程序：ng new sample-addin
进入其目录，然后启动office工具箱：office-toolbox。生成清单（创建子文件夹：否，创建新插件：否）。这将覆盖一些文件，因此在继续之前复制需要合并的文件：
- package.json：覆盖前复制。
- tsconfig.json：不要覆盖，是一样的。
- index.html：直接覆盖。
在index.html中，在head结束标记之前添加：
在main.ts 中替换这个：

platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err));

与：

声明 const 办公室：任何； Office.initialize = () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); };

从已保存的 package.json 副本中合并缺失的内容，替换旧的 Angular 包和 Typescript 引用，并添加所有缺失的 Angular 相关包。示例：

{ "name": "示例插件", “描述”： ””， “作者”： ””， “版本”：“0.1.0”， “脚本”：{ "tsc": "tsc -p tsconfig.json -w", "server": "browser-sync start --config bsconfig.json", "copy": "cpx \"src/**/!(*.ts)\" dist --watch", "start": "rimraf dist && concurrently \"npm run tsc\" \"npm run copy\" \"npm run server\"", "验证": "./node_modules/.bin/validate-office-addin", “ng”：“ng”， “构建”：“ng构建”， “测试”：“ng测试”， “lint”：“ng lint”， “e2e”：“ng e2e” }, “依赖”：{ "@angular/animations": "^6.0.0", "@angular/common": "^6.0.0", "@angular/compiler": "^6.0.0", "@angular/core": "^6.0.0", "@angular/forms": "^6.0.0", "@angular/http": "^6.0.0", "@angular/platform-browser": "^6.0.0", "@angular/platform-browser-dynamic": "^6.0.0", "@angular/路由器": "^6.0.0", "core-js": "^2.5.4", "rxjs": "^6.0.0", "zone.js": "^0.8.26", "jquery": "^3.1.1", "office-addin-validator": "^1.0.1", “office-ui-fabric-js”：“^1.5.0” }, “开发依赖”：{ "@angular/compiler-cli": "^6.0.0", "@angular-devkit/build-angular": "~0.6.0", “打字稿”：“~2.7.2”， "@angular/cli": "~6.0.0", "@angular/language-service": "^6.0.0", "@types/jasmine": "~2.8.6", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", "codelyzer": "~4.2.1", “茉莉花核”：“~2.99.1”， “茉莉花规格报告者”：“〜4.2.1”， "业力": "~1.7.1", "karma-chrome-launcher": "~2.2.0", “karma-coverage-istanbul-reporter”：“~1.4.2”， “业力茉莉花”：“〜1.1.1”， “karma-jasmine-html-reporter”：“^0.2.2”， "量角器": "~5.3.0", "ts-node": "~5.0.1", "tslint": "~5.9.1", "同时": "^3.1.0", "cpx": "^1.5.0", "rimraf": "^2.5.4", "浏览器同步": "^2.18.5", "@types/office-js": "^0.0.37", "@types/jquery": "^2.0.39", “@types/angular”：“^1.6.2” } }

如果您使用的是 Windows，由于加载项平台使用 Internet Explorer，请在 polyfills.ts 中取消注释这些行：

导入'core-js/es6/symbol'；导入'core-js/es6/object'；导入'core-js/es6/function'；导入'core-js/es6/parse-int'；导入'core-js/es6/parse-float'；导入'core-js/es6/number'；导入'core-js/es6/math'；导入'core-js/es6/string'；导入'core-js/es6/date'；导入'core-js/es6/array'；导入'core-js/es6/regexp'；导入'core-js/es6/map'；导入'core-js/es6/weak-map'；导入'core-js/es6/set'；

这在加载时也会失败并出现类似错误。

【问题讨论】：

标签： angular typescript office-js

【解决方案1】：

最后，我在 Word 中显示了示例加载项，在这里我发布了来自 https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular 的完整过程，并进行了一些更正和集成。当加载项在浏览器中启动时，不会显示任何内容，这可能会产生误导。相反，当它在 Office 主机中启动时，会出现带有 Angular 徽标和 URL 的股票应用程序组件。所以可能对调试体验有顾虑，不过我可以加这个链接：https://docs.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane。

其他参考资料：

样品：https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker
Word 插件（来自 MS 的文档）：https://docs.microsoft.com/en-us/office/dev/add-ins/word/word-add-ins-programming-overview

设置

创建一个文件夹共享以在本地托管您的插件，例如C:\Sideloads。您将在此处复制每个插件的 XML 清单：

1.打开Computer Management; 2.转到Shared Folders/Shares； 3.添加文件夹，例如Sideloads 指向C:\Sideloads。

一旦您构建并启动了插件，并将其证书添加为受信任，请确保您已将其 XML 清单复制到您的 sideloads 共享中，并在 Word 中打开它：

将 XML 清单从您的项目复制到您的共享中（例如 C:\Sideloads）；
启动插件（npm run start 或ng serve）；
打开一个新的 Word 文档；
打开Developer功能区并单击Add-ins；
转到Shared folder，选择您的插件，然后单击Add。功能区中会出现一个新按钮：单击它以显示其窗格。

插件

方向：https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular

创建加载项：

确保您已在全球范围内安装了适用于 Office 插件的 Yeoman 生成器 (npm install -g yo generator-office)。
照常创建您的 Angular CLI 应用 (ng new my-addin)。
导航到您的应用程序文件夹 (my-addin) 并启动生成器：yo office：为项目创建子文件夹：否，创建新加载项：否。注意：如果您是提示覆盖 package.json，回答 No（不覆盖）。

使用 HTTPS 保护您的加载项。非 SSL 安全 (HTTPS) 的加载项在使用过程中会生成不安全的内容警告和错误。如果您计划在 Office Online 中运行加载项或将加载项发布到 AppSource，则它必须是 SSL 安全的。如果您的加载项访问外部数据和服务，则应使用 SSL 保护以保护传输中的数据。自签名证书可用于开发和测试，只要该证书在本地计算机上是受信任的。

对于此快速入门，您可以使用适用于 Office 加载项的 Yeoman 生成器提供的证书。您已经全局安装了生成器，因此您只需将证书从全局安装位置复制到您的应用文件夹中。

运行以下命令来识别安装全局 npm 库的文件夹：npm list -g。此命令生成的第一行输出指定了安装全局 npm 库的文件夹。在 Windows 10 中，我在 C:\Users\USERNAME\AppData\Roaming\npm\node_modules\generator-office\generators\app\templates\js\base 下找到了它。
从该位置，将certs 文件夹复制到加载项应用的根文件夹中。
package.json：修改启动脚本，指定服务器应使用 SSL 和 3000 端口运行：

"开始": "ng 服务 --ssl true --port 3000"

angular.json：修改serve对象指定证书文件的位置：

“服务”： { "builder": "@angular-devkit/build-angular:dev-server", “选项”： { "browserTarget": "app:build", “ssl”：是的， "sslKey": "certs/server.key", “sslCert”：“证书/server.crt” },

index.html：在结束 head 标签之前添加以下 script 标签：

main.ts：将platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err));替换为以下代码：

声明 const 办公室：任何； Office.initialize = () => { platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.log(err)); };

polyfills.ts：在所有其他现有导入语句上方添加以下代码行，并取消注释下面列出的 IE 导入：

导入'core-js/client/shim'；

要取消注释的 IE 导入：

根据您的应用需要更改您的app.component。

准备就绪后，使用npm run start 启动服务器并导航到http://localhost:3000。如果您的浏览器显示该站点的证书不受信任，则需要将该证书添加为受信任证书：https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md。请注意，Chrome 可能会继续指示该站点的证书不受信任，即使您已完成该过程；你可以忽略这个。

【讨论】：

感谢您的详细说明！使用yo office 确实让我得到了一个工作插件。但是生成器在打字时会做一些奇怪的事情。当我向组件添加变量并指定其类型时，它会给出一个意外令牌的错误（我认为是 babel 导致它）。此外，当我添加一个构造函数（私有 http:HttpClient）{} 时，它说它需要一个，但找到了 http。也是打字问题。你知道怎么解决吗？我正在绞尽脑汁想办法给这个项目添加类型。
@kjoetools 我遇到了同样的问题，您是否设法解决/修复它？
如果安装npm install --save @types/office-js，可以避免使用declare const Office: any;，直接使用office类型。请确保将"types": ["office-js"] 添加到tsconfig.app.json。我遇到了 VS2017 会选择办公室类型的问题，因为它在 tsconfig.json 中被引用，但 angular 无法编译，因为 tsconfig.app.json 中缺少的类型。

【解决方案2】：

我认为方法 2，或者它的一些变体，是你最好的策略。

当您在浏览器中打开加载项主页而不是在 Word 中按功能区按钮时打开加载项主页时，会出现错误“Office.js 已在 Office 客户端之外加载”。这是意料之中的，也是设计使然。 npm start 是否会导致加载项在浏览器中自动打开？如果是这样，只需关闭该浏览器窗口。通过按下功能区按钮启动加载项时是否遇到任何问题？

【讨论】：

谢谢，您对进一步探索#2 的建议使我找到了正确的页面（有很多过时的东西）：docs.microsoft.com/en-us/office/dev/add-ins/excel/… >。我必须做一些小的改动才能让它与 Angular 6 一起工作，所以我在这里发布一个回复给自己以帮助其他新人。