I am using Angular 4 with Office.js. The project is created by Angular CLI.
The code is simple:
// declare const Office: any;
// With the line above, the app runs perfect
Office.initialize = function () {
platformBrowserDynamic().bootstrapModule(AppModule);
};
I got the error
Cannot find name 'Office'.
I already did npm install --save-dev @types/office-js
My tsconfig.json file:
{
"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:
Following @MahmoodSajjadi suggestion, after npm install --save @microsoft/office-js, and use
import { Office } from '@microsoft/office-js';
Got this error:
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, actually it is "@microsoft/office-js": "0.0.0", not sure this is a correct package.
UPDATE 2:
Based on Michael's answer, seems NPM version is not ready, I will stay with CDN version first. Thanks for everyone's help!
It looks like you still need to specify that the office-js types should be used. Open up src/tsconfig.app.json and add office-js to the types array, which should then look like this if it was previously an empty array:
"types": [
"office-js"
]
Next, you need to run the command tsc -p tsconfig.json from within your project directory before attempting to build the project again.
The following works perfectly (note the package names)
npm install --save office-js @types/office-js
Then consume it as the global it declares.
Office.initialize(0);
Note that office-js is not a module, it is a global. Therefore we do not import from it. Rather the package becomes available ambiently.
If we wish to use import as a means to load office-js at runtime, we can add
import 'office-js';
In which case we are also not importing anything from it since there is nothing to import but we are stating a dependency on its execution, a side-effect of which is to create the global variable window.Office.
Note in your comments you mention an @microsoft/office-js package. At the time of this writing such a package exists but is completely empty, its entry point specifying a file that does not even exist, so I doubt that is the package you intend to use.
On an unrelated note, consider specifying your module format explicitly in your tsconfig.json file:
{
"compilerOptions": {
"module": "commonjs"
}
}
It is a most important setting.
For now, Office.js is consumed not as an NPM package, but as a CDN reference. It's typings/d.ts do come from @types, but not its actual code.
I recommend you take a look at Script Lab, a recently-announced tool and also open-source showcase sample, that uses Angular 4, and which you can use for inspiration. Some of the underlying technology is also discussed in a podcast about the project.