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.

Answer 2

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.

Answer 3

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.

Answer 4

For me creating a variable naming 'Office' worked.

declare const Office: any;
(async () => {
    await Office.onReady();
    if (!Office.context.requirements.isSetSupported('ExcelApi', '1.7')) {
        console.log("Sorry, this add-in only works with newer versions of Excel.");
    }
})();