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!

Gennagennaro

you need to declare Office or Import it (as your code comment) – Carlow

@MahmoodSajjadi How can I import correctly? I tried import { Office } from 'office-js'; but does not work. – Gennagennaro

the package @type/office-js is just type package and not an actual office.js, you need npm i @microsoft/office-js – Carlow

@MahmoodSajjadi hmm, I did, now it is a different error, see my question UPDATE part. – Gennagennaro

It's not a module so you can import from it. Can still import it though, with import 'office-js'; although the types should be picked up automatically without doing so – Josiah

Also, you should specify your module format explicitly in tsconfig.json – Josiah

@AluanHaddad my typo, still same error. In package.json, actually it is "@microsoft/office-js": "0.0.0", not sure it is correct package. – Gennagennaro

I don't know what the relationship between those packages. The important thing is that you must only import from the module specifier matching the location of the JS – Josiah

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.

Gildea

thank you for this, worked ! Don't forget to install the package: npm install @type/office-js – Endopeptidase

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.

Josiah

I did npm install --save office-js @types/office-js, but still same error Cannot find name 'Office'. And tried to add "module": "commonjs", but still same. – Gennagennaro

Make sure your TypeScript is up to date (>=2.2.2). I tried it in an empty project. Works fine. – Josiah

I needed this "typeRoots": [ "node_modules/@types" ] added to my tsconfig.js to make it work. – Peppie

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.

Dorladorlisa

So, I'm curious is the npm:office-js package deprecated? – Josiah

It's more of the opposite: it's not yet fully-started. We are thinking about moving to having NPM drops of our CDN, but there is some process involved to make this happen. | And (at least for now), the Store requires CDN references for any Store-bound add-ins. If you have feedback for why you'd rather host the files yourself via an NPM package rather than reference the official CDN, please consider adding your reasonings to officespdev.uservoice.com/forums/224641/suggestions/573756, so that it can be routed to the appropriate team. – Dorladorlisa

Thank you very much for your response. It makes the situation very clear. Actually, I'm concerned with the accuracy of my answer to this question. I don't want to be giving bad advice but it's the general advice that I would give for anyone trying to consume a package. That said, if I were to use this API I would like to install it directly. – Josiah

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.");
    }
})();

Apologize