我是基于JS的Office插件的新手，并且尝试使用Angular 6 + Typescript创建示例Word插件。
为此，我找到了看起来像一个完美起点的办公工具箱：https : //www.npmjs.com/package/office-toolbox。但是，其模板可追溯到Angular1.x。因此，我尝试通过将Angular 6 CLI新项目与工具箱中的模板合并来进行试验，但是没有运气。
我尝试了两种方法。当然，两者都需要先全局安装Office工具箱：
npm install -g office-toolbox
加载项启动后，我的理解是，我们必须首先复制XML清单并在Word中打开它，即：
C:\Sideloads）；npm start或ng serve）；Developer功能区并单击Add-ins;Shared folder，选择您的插件，然后单击确定Add。功能区中将出现一个新按钮：单击它以显示其窗格。问题在于，似乎不存在将Angular 6与Office Addins结合使用的最新解决方案，并且在这种环境下理解引导过程并不是一件容易的事。因此，我尝试了2种骇人听闻的方法，但均无效果。有人可以提出更好的方法吗？这里是方法：
这遵循来自Office工具箱网站的指示。
运行office-toolbox generate并回答问题，以基于Angular生成带有清单的新应用程序。
现在我想尝试升级项目。我试图package.json通过将其与默认软件包合并来进行更改ng new，然后运行npm install。工具箱生成的包如下所示：
{
“名称”：“样本插件”，
“描述”：“”，
“作者”：“”，
“版本”：“ 0.1.0”，
“脚本”：{
“ tsc”：“ tsc -p tsconfig.json -w“，
”服务器“：”浏览器同步启动--config bsconfig.json“，
”复制“：” cpx \“ src / ** /！（*。ts）\” dist --watch“ ，
“开始”：“ rimraf dist &&并发\“ npm run tsc \” \“ npm run copy \” \“ npm run server \”“，
” validate“：” ./node_modules/.bin/validate-office-addin “
}，
”依赖项”：{
“ core-js”：“ ^ 2.4.1”，
“ office-ui-fabric-js”：“ ^ 1.3.0”，
“ jquery”：“ ^ 3.1.1”，
“ angular”：“ ^ 1.6.1“，
“ office-addin-验证程序”：“ ^ 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上建议了这种方法（我必须进行一些更改）。
创建一个新的角度应用程序： 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：任何；
Office.initialize =（）=> {
platformBrowserDynamic（）。bootstrapModule（AppModule）
.catch（err => console.log（err））;
};
{
“名称”：“样本插件”，
“描述”：“”，
“作者”：“”，
“版本”：“ 0.1.0”，
“脚本”：{
“ tsc”：“ tsc -p tsconfig.json -w“，
”服务器“：”浏览器同步启动--config bsconfig.json“，
”复制“：” cpx \“ src / ** /！（*。ts）\” dist --watch“ ，
“开始”：“ rimraf dist &&并发\“ 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”，
“ karma-jasmine-html -reporter“：“ ^ 0.2.2”，
“ @ 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“，
” tslint“：”〜5.9.1“，
“量角器”：“〜5.3.0”，
“ ts-node”：
“〜5.0.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”
}
}
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';
这在加载时也会失败，并显示类似错误。
最后，我在Word中显示了示例加载项，在这里，我从https://docs.microsoft.com/zh-cn/office/dev/add/ins/excel/excel-add-发布了完整过程ins-get-started-angular具有一些更正和集成。当加载项在浏览器中启动时，不显示任何内容，这可能会引起误解。相反，当它在Office主机中启动时，将显示带有Angular徽标和URL的常规应用程序组件。因此，可能会有关于调试体验的担忧，但是我可以添加有关此链接的链接：https : //docs.microsoft.com/zh-cn/office/dev/add/ins/testing/attach-debugger-from-task -窗格。
其他参考：
创建一个文件夹共享以在本地托管您的插件，例如C:\Sideloads。在这里，您将为每个插件复制XML清单：
1.open Computer Management; 2.goto Shared Folders/Shares; 3.添加文件夹，例如Sideloads指向C:\Sideloads。
构建并启动加载项，并将其证书添加为受信任的证书之后，请确保已将其XML清单复制到侧载共享中，然后在Word中打开它：
C:\Sideloads）；npm run start或ng serve）；Developer功能区并单击Add-ins;Shared folder，选择您的插件，然后单击确定Add。功能区中将出现一个新按钮：单击它以显示其窗格。创建加载项：
npm install -g yo generator-office）。ng new my-addin）创建Angular CLI应用。my-addin）并启动生成器：：yo office为项目创建子文件夹：否，创建新的加载项：否。注意：如果系统提示您覆盖package.json，请回答否（不覆盖）。使用HTTPS保护您的加载项。非SSL保护（HTTPS）的加载项在使用过程中会生成不安全的内容警告和错误。如果您打算在Office Online中运行外接程序或将外接程序发布到AppSource，则该外接程序必须经过SSL保护。如果您的加载项访问外部数据和服务，则应该对其进行SSL保护，以保护传输中的数据。自签名证书可以用于开发和测试，只要该证书在本地计算机上受信任即可。
对于此快速入门，您可以使用Office加载项的Yeoman生成器提供的证书。您已经在全球范围内安装了生成器，因此只需要将证书从全局安装位置复制到您的应用程序文件夹中即可。
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));为以下代码： 声明const Office：任何；
Office.initialize =（）=> {
platformBrowserDynamic（）。bootstrapModule（AppModule）
.catch（err => console.log（err））;
};
polyfills.ts：在所有其他现有import语句之上添加以下代码行，并取消注释下面列出的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仍会继续表明该站点的证书不受信任；您可以忽略这一点。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句