Я новичок в надстройках Office для JS и пытаюсь создать пример надстройки Word с помощью Angular 6 + Typescript.
С этой целью я нашел набор инструментов для офиса, который выглядит как идеальный.начало: https://www.npmjs.com/package/office-toolbox. Тем не менее, его шаблоны относятся к Angular 1.x.Итак, я попытался поэкспериментировать, объединив новый проект CLI Angular 6 с шаблоном из набора инструментов, но безуспешно.
Я попробовал два подхода.Конечно, оба требуют сначала установить набор инструментов 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 хакерскими подходами, но ни один не работал.Кто-нибудь может предложить лучший способ?Вот подходы:
Подход 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: office-toolbox.Создайте манифест (создайте подпапку: НЕТ, создайте новый плагин: НЕТ).Это перезапишет некоторые файлы, поэтому перед продолжением сделайте копию тех, которые требуют слияния:
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';
Это также не сработает при загрузке с похожими ошибками.