How to use chrome-app.d.ts type in angular-cli 1.0.1 app?

Question

I've installed @types/chrome and add it in tsconfig.app.json

"types": [
  "chrome"
]

But when i use chrome.app in component, it show an error:

Property 'app' does not exist on type 'typeof chrome'

@types/chrome folder contains chrome-app.d.ts is a file which i need, how can I refer to this

Source https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/chrome

Ferretti

Answer 1

Since the creators of this typings definition module have chosen not to include the chrome.app.* definitions in the index.d.ts file of the @types/chrome module but instead separate them out into chrome-app.d.ts, you'll need to explicitly reference it in the file that uses those APIs:

/// <reference types="chrome/chrome-app"/>

Note that this must be at the top of the file, per the documentation for triple-slash directives in TypeScript:

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

Also note that it should not be necessary to add a "types": ["chrome"] reference in your tsconfig.json file, as the latest version of the TypeScript compiler should automatically import all typings definition modules found in node_modules/@types. By adding this to your config, you are telling it to only import that one module. For more on this, you can refer to the config docs:

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Hwahwan

Answer 2

Just an update for Angular CLI nowadays (June 2018) (Angular 6) you can simply do:
npm i @types/chrome
and the error will go away.

Erhart

Sometimes when cloning a repo, npm i doesn't do the trick. For some reason, I had to run npm i @types/chrome again, and then TS liked it. – Burstone

Answer 3

This is what worked for me. This happened to me when I created a new angular project and then manually added content for the extension infrastructure. What resolved the issue was adding the following to tsconfig.json

...
"angularCompilerOptions": {
  "types": [ 'chrome'],
  ...

Cayuse