Cannot find name 'Office'

Question

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!

Answer 1

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.