Question

我是基于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生成带有清单的新应用程序。
现在我想尝试升级项目。我尝试通过将其与package.json中的默认包合并来尝试更改ng new，然后运行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-toolbox。生成清单（创建一个子文件夹：NO，创建一个新的插件：NO）。这将覆盖一些文件，因此在继续之前，请复制需要合并的文件：
- package.json：覆盖前复制。
- tsconfig.json：不要覆盖，它是完全相同的。
- index.html：只是覆盖。

index.html

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

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';

加载时也会出现类似错误。

Answer 1

最后，我在Word中显示了示例加载项，这里我发布了https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular的完整过程，并进行了一些更正和集成。当加载项在浏览器中启动时，不会显示任何内容，这可能会产生误导。相反，它在Office主机内启动时，会显示带有Angular徽标和URL的stock app组件。因此可能会对调试体验感到担忧，但我可以添加以下链接：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.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。功能区中会出现一个新按钮：单击它以显示其窗格。

外接

路线：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，请回答否（不要覆盖）。

使用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：在结束script代码之前添加以下head代码：

    <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仍可能继续表明该网站的证书不受信任;你可以忽略这一点。

Answer 2

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

当您在浏览器中打开加载项主页而不是在按下其功能区按钮时在Word中打开时，会出现“Office.js加载到Office客户端之外”的错误。这是预期的并且是设计的。 npm start是否会导致加载项在浏览器中自动打开？如果是这样，请关闭该浏览器窗口。按下它的功能区按钮启动加载项时是否会出现任何问题？

使用Angular 6

方法1

方法2

2 个答案:

设置

外接