angular - 带有 Angular 6 的基于 MS Office JS 的 Word 插件

问题描述

我是基于 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 种骇人听闻的方法，但都没有奏效。有人可以提出更好的方法吗？以下是方法：

方法一

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

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

    {
      "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”
      },
      “依赖”：{
        "core-js": "^2.4.1",
        "office-ui-fabric-js": "^1.3.0",
        "jquery": "^3.1.1",
        “角度”：“^1.6.1”，
        “office-addin-validator”：“^1.0.1”
      },
      “开发依赖”：{
        "同时": "^3.1.0",
        "cpx": "^1.5.0",
        "rimraf": "^2.5.4",
        "浏览器同步": "^2.18.5",
        “打字稿”：“^2.1.4”，
        "@types/office-js": "^0.0.37",
        "@types/jquery": "^2.0.39",
        “@types/angular”：“^1.6.2”
      }
    }

合并后的文件是：

{
  "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 ()

方法二

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

创建一个新的角度应用程序：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'；

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

标签： angulartypescriptoffice-js

解决方案

最后，我在 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 -窗格。

其他参考：

示例：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

使用 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.htmlscript:在结束标签之前添加以下head标签：

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></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 导入：

    导入'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'；

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

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

angular - 带有 Angular 6 的基于 MS Office JS 的 Word 插件

问题描述

方法一

方法二

解决方案

设置

加入

推荐阅读