问题：

MS Office基于JS的Word加载项，带有Angular 6

侯池暝

2023-03-14

我是新的基于JS的Office addins，我试图创建一个示例Word addin与角6 Typecript。

为此，我找到了office工具箱，它看起来是一个完美的开始：https://www.npmjs.com/package/office-toolbox.然而，它的模板可以追溯到Angular 1。x、因此，我试图尝试将一个新项目与工具箱中的模板合并，但运气不佳。

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

  npm install -g office-toolbox

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

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

问题是，在Office Addins中使用Angular 6的最新解决方案似乎并不存在，而且了解这种环境中的引导过程并不是那么简单。所以我尝试了两种黑客方法，但都不管用。有谁能提出更好的办法吗？以下是方法：

这遵循office工具箱网站的说明。

运行office工具箱生成并回答问题以基于Angular生成包含其清单的新应用程序。

现在我想尝试升级这个项目。我试图更改包。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 ()

因此，我尝试了相反的方法，这恰好是在https://github.com/Hongbo-Miao/office-addin-quick-start（我不得不做些改变）。

创建一个新的angular应用程序：ng new sample addin

进入它的目录，并启动office工具箱：office-工具箱。生成清单（创建一个子文件夹： NO，创建一个新的addin： NO）。这将覆盖一些文件，所以在继续之前，复制需要合并的文件：

软件包。json：覆盖前复制
tsconfig。json：不要覆盖，它是相同的
索引。html：只需覆盖即可

在索引中。html，在标题结束标记前添加：

在main中。ts更换此：

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

与：

    declare const Office: any;

    Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
    };

    {
      "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"
      }
    }

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

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

共有2个答案

董俊

2023-03-14

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

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

闾丘英悟

2023-03-14

最后，我在Word中找到了示例加载项，我在这里发布了完整的程序https://docs.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular进行了一些修正和积分。当外接程序在浏览器中启动时，不会显示任何内容，这可能会产生误导。当它在Office主机内启动时，会出现带有角度徽标和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 addins（来自MS的文档）：https://docs.microsoft.com/en-us/office/dev/add-ins/word/word-add-ins-programming-overview

创建一个文件夹共享来在本地托管插件，例如C：\Sideloads。在这里您将为每个插件复制XML清单：

1.打开计算机管理；2.转到共享文件夹/共享；3.添加文件夹，例如，Sideloads指向C:\Sideloads。

构建并启动加载项并将其证书添加为受信任后，请确保已将其XML清单复制到sideloads共享中，并在Word中打开它：

将XML清单从项目复制到共享中（例如，C:\sideload）

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

创建外接程序：

确保您已在全球范围内安装了Yeoman generator for Office插件（npm安装-g yo generator Office）
像往常一样创建Angular CLI应用程序（ng new my addin）
导航到应用程序文件夹（my addin）并启动生成器：yo office：为project创建子文件夹：否，创建新加载项：否。注意：如果系统提示您覆盖软件包。json，回答否（不要覆盖）

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

对于这个快速入门，您可以使用Yeoman生成器for Office外接程序提供的证书。您已经全局安装了生成器，所以您只需要将证书从全局安装位置复制到您的应用文件夹中。

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

    "start": "ng serve --ssl true --port 3000"

    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "app:build",
            "ssl": true,
            "sslKey": "certs/server.key",
            "sslCert": "certs/server.crt"
        },

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

    declare const Office: any;

    Office.initialize = () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
        .catch(err => console.log(err));
    };

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

更改你的应用程序。组件符合应用程序的要求。

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

类似资料：

基于js文件加载优化(详解)

本文向大家介绍基于js文件加载优化(详解)，包括了基于js文件加载优化(详解)的使用技巧和注意事项，需要的朋友参考一下在js引擎部分，我们可以了解到，当渲染引擎解析到script标签时，会将控制权给JS引擎，如果script加载的是外部资源，则需要等待下载完后才能执行。所以，在这里，我们可以对其进行很多优化工作。放置在BODY底部为了让渲染引擎能够及早的将DOM树给渲染出来，我们需要将sc
详解基于angular路由的requireJs按需加载js

本文向大家介绍详解基于angular路由的requireJs按需加载js，包括了详解基于angular路由的requireJs按需加载js的使用技巧和注意事项，需要的朋友参考一下最近终于不忙了！！有时间沉淀一下之前学到的angular东东！！ angular路由想必大家已经不陌生了！（陌生的去看我之前那篇手把手教你配置angular路由！） angular路由作为单页面应用，切换页面的时候都是一
带加载项的PDF编辑器

我正在寻找一个PDF编辑器，它提供它的插件开发能力，像VSTO插件。我的目的是什么利用WPF技术开发了一个文档管理系统，允许用户将文档存储在其中。此外，我还开发了MS Word和MS Excel VSTO插件作为本产品的一部分，以编辑任何存储在我们应用程序中的Excel和Word文件。如果用户想要编辑任何不需要的word文件，只需双击它，系统就会将该word文件打开到MS word中，并使
带有延迟加载的MVC

问题内容：如果这是完全相同的内容，请纠正我，我知道这个话题经常被讨论，但是找不到确切的答案。问题：在MVC Web应用程序中处理Hibernate对象的最佳实用解决方案是什么？细节：我正在使用Hibernate，并希望在可能的情况下利用延迟加载。我正在使用MVC风格的webapp。我讨厌获得延迟加载初始化异常。我讨厌不得不在事务之间重新连接Hibernate对象。选项：渴望装载
带有用户控件的延迟加载选项卡

问题内容：我想在AJAX标签容器中使用标签的延迟加载。我已经实现了。但是我面临的问题是，当我单击按钮或触发该用户控件中的任何事件时，不会触发该事件。没发生什么事。代码背后：问题答案：您需要最迟在每个回发中重新创建动态创建的控件，其ID与以前相同。因此，您可以在中加载并将它们添加到面板中，但是您需要在下一次回发中重新创建它们。因此，您需要在某处存储要重新创建的内容（fe in ）。但是我假
基于已加载模板的CSS类

问题内容：我在_base.html模板中得到了这个引导导航，如下所示：使用Golang我想添加一个到相应的列表项。我读过的HTML /模板文档和文章一样thisone，但在我看来，我必须写一个golang功能，增加了到每个对应的对应列表项。但是我仍然可以通过某种方式添加一些类似的内容或类似的东西。我记得Rob Pike说过Golang应该为您做所有计算，但是为什么在html / te

MS Office基于JS的Word加载项，带有Angular 6

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档