typescript - MS Office JS-baserad Word-tillägg med Angular 6

Jag är ny inom JS-baserade Office-tillägg och försöker skapa ett exempel på ett Word-tillägg med Angular 6 + Typescript.

För detta ändamål hittade jag kontorsverktygslådan som ser ut som en perfekt start: https://www.npmjs.com/package/office-toolbox. Men dess mallar går tillbaka till Angular 1.x. Så jag försökte experimentera genom att slå ihop ett nytt Angular 6 CLI-projekt med mallen från verktygslådan, utan framgång.

Jag försökte två tillvägagångssätt. Självklart kräver båda att man först installerar office-verktygslådan globalt:

  npm install -g office-toolbox

När tillägget har startats förstår jag det som att vi först måste kopiera XML-manifestet och öppna det i Word, det vill säga:

kopiera XML-manifestet från ditt projekt till en delning du skapade för detta ändamål (t.ex. C:\Sideloads);
starta tillägget (npm start eller ng serve);
öppna ett nytt Word-dokument;
öppna Utvecklare-fliken och klicka på Tillägg;
gå till Delad mapp, välj ditt tillägg och klicka på Lägg till. En ny knapp visas i menyfliksområdet: klicka på den för att visa dess panel.

Problemet är att en uppdaterad lösning för att använda Angular 6 med Office-tillägg inte verkar finnas, och att förstå bootstrap-processen i denna miljö är inte så trivialt. Så jag försökte med två hackiga tillvägagångssätt, men inget fungerade. Kan någon föreslå ett bättre sätt? Här är tillvägagångssätten:

Tillvägagångssätt 1

Detta följer instruktionerna från kontorsverktygssajtens webbplats.

kör office-toolbox generate och svara på frågorna för att generera en ny applikation med dess manifest, baserat på Angular.
nu skulle jag vilja försöka uppgradera projektet. Jag försökte ändra package.json genom att slå ihop det med standardpaketet från ng new, och sedan köra npm install. Paketet som genererades av verktygslådan ser ut så här:

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

Den sammanslagna filen är:

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

Ändå, när jag kör npm start får jag dessa fel från huvudsidan:

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 ()

Tillvägagångssätt 2

Så jag försökte det omvända tillvägagångssättet, vilket råkar föreslås på https://github.com/Hongbo-Miao/office-addin-quick-start (jag var tvungen att ändra något).

skapa en ny angular-app: ng new sample-addin
gå till dess katalog och starta kontorsverktygslådan: office-toolbox. Generera manifestet (skapa en undermapp: NEJ, skapa ett nytt tillägg: NEJ). Detta kommer att skriva över vissa filer, så innan du fortsätter, gör en kopia av de som behöver sammanslås:
- package.json: kopiera innan du skriver över.
- tsconfig.json: skriv inte över, det är identiskt.
- index.html: skriv bara över.
i index.html, lägg till före head-stängningstaggen:
i main.ts ersätt detta:

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

med :

    declare const Office: any;

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

slå ihop det saknade innehållet från den sparade kopian av package.json, ersätta gamla Angular-paket och Typescript-referenser och lägga till alla saknade Angular-relaterade paket. Exempel:

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

om du använder Windows, eftersom tilläggsplattformen använder Internet Explorer, avkommentera dessa rader i 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';

Detta misslyckas också vid laddning med liknande fel.

Svar #1

Slutligen fick jag provtillägget att visas i Word, här postar jag hela proceduren från https://learn.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular med några korrigeringar och integrationer. När tillägget startar i webbläsaren visas ingenting och detta kan vara missvisande. När det istället startas i Office-värden, visas standardapplikationskomponenten med Angular-logotypen och URL:erna. Så det kan finnas oro kring felsökningsupplevelsen, men jag kan lägga till den här länken om det: https://learn.microsoft.com/en-us/office/dev/add-ins/testing/attach-debugger-from-task-pane.

Andra referenser:

exempel: https://github.com/OfficeDev/Word-Add-in-Angular2-StyleChecker
Word-tillägg (doc från MS): https://learn.microsoft.com/en-us/office/dev/add-ins/word/word-add-ins-programming-overview

Installation

Skapa en mappdelning för att lagra dina plugins lokalt, t.ex. C:\Sideloads. Här kommer du att kopiera XML-manifestet för varje tillägg:

1. öppna Datorhantering; 2. gå till Delade mappar/Delningar; 3. lägg till mappen, t.ex. Sideloads som pekar på C:\Sideloads.

När du har byggt och startat ditt tillägg, och lagt till dess certifikat som betrott, se till att du har kopierat dess XML-manifest till din sideloads-delning och öppnar det i Word:

kopiera XML-manifestet från ditt projekt till din delning (t.ex. C:\Sideloads);
starta tillägget (npm run start eller ng serve);
öppna ett nytt Word-dokument;
öppna Utvecklare-fliken och klicka på Tillägg;
gå till Delad mapp, välj ditt tillägg och klicka på Lägg till. En ny knapp visas i menyfliksområdet: klicka på den för att visa dess panel.

Tillägg

anvisningar: https://learn.microsoft.com/en-us/office/dev/add-ins/excel/excel-add-ins-get-started-angular

Skapa tillägget:

se till att du har installerat Yeoman-generatorn för Office-tillägg globalt (npm install -g yo generator-office).
skapa din Angular CLI-app som vanligt (ng new my-addin).
navigera till din app-mapp (my-addin) och starta generatorn: yo office: skapa undermapp för projekt: Nej, skapa nytt tillägg: Nej. Observera: om du uppmanas att skriva över package.json, svara Nej (skriv inte över).

Säkra ditt tillägg med HTTPS. Tillägg som inte är SSL-säkra (HTTPS) genererar varningar om osäkert innehåll och fel under användning. Om du planerar att köra ditt tillägg i Office Online eller publicera ditt tillägg på AppSource måste det vara SSL-säkert. Om ditt tillägg får åtkomst till externa data och tjänster bör det vara SSL-säkert för att skydda data under överföring. Självsignerade certifikat kan användas för utveckling och testning, så länge certifikatet är betrott på den lokala datorn.

För denna snabbinstart kan du använda de certifikat som Yeoman-generatorn för Office-tillägg tillhandahåller. Du har redan installerat generatorn globalt, så du behöver bara kopiera certifikaten från den globala installationsplatsen till din app-mapp.

Kör följande kommando för att identifiera mappen där globala npm-bibliotek är installerade: npm list -g. Den första raden i den utdata som genereras av detta kommando anger mappen där globala npm-bibliotek är installerade. I Windows 10 hittade jag det under C:\Users\ANVÄNDARNAMN\AppData\Roaming\npm\node_modules\generator-office\generators\app\templates\js\base.
från den platsen, kopiera certs-mappen till rotmappen för tilläggsappen.
package.json: ändra startskriptet för att ange att servern ska köras med SSL och port 3000:

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

angular.json: ändra serve-objektet för att specificera platsen för certifikatfilerna:

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

index.html: lägg till följande script-tagg precis före den avslutande head-taggen:

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

main.ts: ersätt platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.log(err)); med följande kod:

    declare const Office: any;

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

polyfills.ts: lägg till följande kodrad ovanför alla andra befintliga importuttryck och ta bort kommentaren från IE-importerna som listas nedan:

    import 'core-js/client/shim';

IE-importer att avkommentera:

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

Ändra din app.component enligt vad som krävs för din app.

När du är klar, starta servern med npm run start och navigera till http://localhost:3000. Om din webbläsare visar att webbplatsens certifikat inte är betrott, måste du lägga till certifikatet som ett betrott certifikat: https://github.com/OfficeDev/generator-office/blob/master/src/docs/ssl.md. Observera att Chrome kan fortsätta att visa att webbplatsens certifikat inte är betrott även efter att du har slutfört processen; du kan ignorera detta.

Svar #2

Jag tror att metod 2, eller en variant av den, är din bästa strategi.

Felet "Office.js is loaded outside of Office client" är vad du får när du öppnar tilläggets startsida i en webbläsare istället för att öppna det i Word när du trycker på dess bandknapp. Detta är förväntat och enligt design. Orsakar npm start att tillägget automatiskt öppnas i en webbläsare? Om så är fallet, stäng bara det webbläsarfönstret. Får du några problem när du startar tillägget genom att trycka på dess bandknapp?