Name nicht gefunden 'Büro'

Question

Ich verwende Angular 4 mit Office.js. Das Projekt wird von Angular CLI erstellt.

Der Code ist einfach:

// declare const Office: any; 
// With the line above, the app runs perfect 

Office.initialize = function() { 
    platformBrowserDynamic().bootstrapModule(AppModule); 
}; 

ich den Fehler bekam

Cannot find name 'Office'.

ich schon npm install --save-dev @types/office-js

Meine tsconfig.json Datei tat

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
    "outDir": "./dist/out-tsc", 
    "baseUrl": "src", 
    "sourceMap": true, 
    "declaration": false, 
    "moduleResolution": "node", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "target": "es5", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "lib": [ 
     "es2016", 
     "dom" 
    ] 
    } 
} 

---

UPDATE 1:

@MahmoodSajjadi Vorschlag, nach npm install --save @microsoft/office-js Nach und verwenden

import { Office } from '@microsoft/office-js'; 

diesen Fehler Got:

ERROR in /my-app/src/main.ts (3,24): File '/my-app/node_modules/@types/office-js/index.d.ts' is not a module.

ERROR in ./src/main.ts Module not found: Error: Can't resolve 'office-js' in '/my-app/src'

@ ./src/main.ts 3:0-35
@ multi webpack-dev-server/client? http://localhost:4200 ./src/main.ts

In package.json, es tatsächlich ist "@microsoft/office-js": "0.0.0", nicht sicher, das ist ein richtiges Paket.

---

UPDATE 2:

Basierend auf Michaels Antwort scheint NPM Version nicht bereit ist, habe ich zunächst mit CDN-Version bleiben. Danke für die Hilfe von allen!

Answer 1

Derzeit wird Office.js nicht als NPM-Paket, sondern als CDN-Referenz verwendet. Es ist typings/d.ts do kommen von @types, aber nicht seinen tatsächlichen Code.

Ich empfehle Ihnen einen Blick auf Script Lab, ein kürzlich angekündigtes Tool und auch Open-Source-Vitrine Probe, die Angular 4 verwendet, und die Sie zur Inspiration verwenden können. Ein Teil der zugrunde liegenden Technologie wird auch in einer podcast about the project diskutiert.

Answer 2

Die folgende funktioniert perfekt (die Paketnamen beachten)

npm install --save office-js @types/office-js 

verbrauchen sie dann als globale es erklärt.

Office.initialize(0); 

Beachten Sie, dass Büro-js kein Modul ist, ist es ein global. Deshalb importieren wir nicht daraus. Stattdessen wird das Paket verfügbar verfügbar.

Wenn wir Import als Mittel verwenden möchten Büro-js zur Laufzeit zu laden, können wir

import 'office-js'; 

In diesem Fall sind wir fügen auch nichts von ihm zu importieren, da es nichts zu importieren aber wir sagen eine Abhängigkeit von seiner Ausführung aus, ein Nebeneffekt davon ist, die globale Variable window.Office zu erzeugen.

Hinweis in Ihren Kommentaren erwähnen Sie eine @ Microsoft/Office-js Paket. Zum Zeitpunkt des Schreibens ist ein solches Paket vorhanden, aber es ist vollständig leer, sein Eingangspunkt gibt eine Datei an, die nicht einmal existiert, also bezweifle ich, dass es das Paket ist, das Sie verwenden wollen.

Beachten Sie in einem nicht verwandten Hinweis, das Modulformat explizit in Ihrem tsconfig anzugeben.JSON-Datei:

{ 
    "compilerOptions": { 
    "module": "commonjs" 
    } 
} 

Es ist eine sehr wichtige Einstellung.

Answer 3

Offenbar müssen Sie noch angeben, dass die Typen office-js verwendet werden sollen. Öffnen Sie src/tsconfig.app.json und fügen office-js auf die Typen Array, das dann wie folgt aussehen sollte, wenn es vorher ein leeres Array war:

"types": [ 
    "office-js" 
] 

Als nächstes müssen Sie den Befehl tsc -p tsconfig.json aus Ihrem Projektverzeichnis laufen, bevor Sie bauen das Projekt wieder.