首页 文章

使用Angular 6的基于MS Office JS的Word加载项

提问于
浏览 次
1

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

为此，我发现办公室工具箱看起来像一个完美的开始：https://www.npmjs.com/package/office-toolbox . 然而，它的模板可以追溯到Angular 1.x.因此，我尝试将Angular 6 CLI新项目与工具箱中的模板合并进行试验，但没有运气 .

我尝试了两种方法 . 当然，两者都需要首先在全球范围内安装办公工具箱：

npm install -g office-toolbox

一旦加载项开始，我的理解是我们必须首先复制XML清单并在Word中打开它，即：

  • 将项目中的XML清单复制到为此目的创建的共享中（例如 C:\Sideloads ）;

  • 启动插件（ npm start 或 ng serve ）;

  • 打开一个新的Word文档;

  • 打开 Developer 功能区并单击 Add-ins ;

  • 转到 Shared folder ，选择您的插件，然后单击 Add . 功能区中将出现一个新按钮：单击它以显示其窗格 .

问题是，使用Angular 6和Office Addins的最新解决方案似乎并不存在，并且了解此环境中的引导过程并非如此简单 . 所以我尝试了2种hackish方法，但都没有效果 . 有人能建议更好的方法吗？以下是方法：

方法1

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

  • 运行 office-toolbox generate 并回答问题以基于Angular生成带有清单的新应用程序 .

  • 现在我想尝试升级项目 . 我尝试通过将其与 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"
      },
      "dependencies": {
        "core-js": "^2.4.1",
        "office-ui-fabric-js": "^1.3.0",
        "jquery": "^3.1.1",
        "angular": "^1.6.1",
        "office-addin-validator": "^1.0.1"
      },
      "devDependencies": {
        "concurrently": "^3.1.0",
        "cpx": "^1.5.0",
        "rimraf": "^2.5.4",
        "browser-sync": "^2.18.5",
        "typescript": "^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 ()

方法2

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

  • 创建一个新的角应用程序： ng new sample-addin

  • 进入其目录，然后启动office工具箱： office-toolbox . 生成清单（创建一个子文件夹：NO，创建一个新的插件：NO） . 这将覆盖一些文件，因此在继续之前复制需要合并的文件：

  • package.json ：覆盖前复制 .

  • tsconfig.json ：不要覆盖，它是完全相同的 .

  • index.html ：只是覆盖 .

在 index.html 中

  • ，在 head 结束标记之前添加：

  • in main.ts 替换此：

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

有：

declare const Office: any;

    Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
    };
  • 合并了已保存的package.json副本中的缺失内容，替换了旧的Angular包和Typescript引用，并添加了所有缺少的Angular相关包 . 样品：
{
      "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",

          "jquery": "^3.1.1",
        "office-addin-validator": "^1.0.1",
        "office-ui-fabric-js": "^1.5.0"
      },
      "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"
      }
    }
  • 如果您使用的是Windows，因为加载项平台使用Internet Explorer，请在 polyfills.ts 中取消注释这些行：
import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import 'core-js/es6/set';

这也会在加载时出现类似错误 .

angular typescript office-js

2 回答

  • 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 .

    其他参考：

    设置

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

    1.open Computer Management ; 2.goto 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 . 功能区中将出现一个新按钮：单击它以显示其窗格 .

    Addin

    创建加载项：

    • 确保您已全局安装Office添加的Yeoman生成器（ npm install -g yo generator-office ） .

    • 像往常一样创建Angular CLI应用程序（ ng new my-addin ） .

    • 导航到您的应用程序文件夹（ my-addin ）并启动生成器： yo office ：为项目创建子文件夹：否，创建新的加载项：否. Note ：如果提示您覆盖package.json，请回答否（不要覆盖） .

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

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

    • 运行以下命令以标识安装全局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运行：

    "start": "ng serve --ssl true --port 3000"
    • angular.json ：修改 serve 对象以指定证书文件的位置：
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "app:build",
            "ssl": true,
            "sslKey": "certs/server.key",
            "sslCert": "certs/server.crt"
        },
    • index.html ：在结束 head 标记之前立即添加以下 script 标记：
    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    • main.ts ：用以下代码替换 platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); ：
    declare const Office: any;

    Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
    };
    • polyfills.ts ：在所有其他现有导入语句之上添加以下代码行，并取消注释下面列出的IE导入：
    import 'core-js/client/shim';

    IE导入将被取消注释：

    import 'core-js/es6/symbol';
    import 'core-js/es6/object';
    import 'core-js/es6/function';
    import 'core-js/es6/parse-int';
    import 'core-js/es6/parse-float';
    import 'core-js/es6/number';
    import 'core-js/es6/math';
    import 'core-js/es6/string';
    import 'core-js/es6/date';
    import 'core-js/es6/array';
    import 'core-js/es6/regexp';
    import 'core-js/es6/map';
    import 'core-js/es6/weak-map';
    import '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仍可能继续表明该网站的证书不受信任;你可以忽略这个 .

    回复于
  • 2

    我认为方法2或其中的一些变体是您最好的策略 .

    当您打开加载项's home page in a browser instead of opening it in Word when you press it'的功能区按钮时，会出现错误"Office.js is loaded outside of Office client" . 这是预期的并且是设计的 . npm start 导致加载项在浏览器中自动打开吗？如果是这样，请关闭该浏览器窗口 . 按下它的功能区按钮启动加载项时是否会出现任何问题？

    回复于

相关问题