CODEWITHSUNDEEP
node.jsangulartsconfig
Sledge
Sledge

Reputation: 1345

@types module not found with Angular 2

I've spent more time than I care to admit on this so I'm throwing my hands up.

I have a module that I'm trying to include in my angular 2 project: 

import * as d3ScaleChromatic from 'd3-scale-chromatic';

This gives an error: 

Cannot find module 'd3-scale-chromatic'.

I have installed via npm npm install --save @types/d3-scale-chromatic. I can tell that it lives in node_modules/@types/d3-scale-chromatic.

My tsconfig.json looks like this:

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"   <-- should look here, right?
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

So I can see that it will look in node_modules/@types.

It seems similar to this issue but as far as I can tell I already followed the suggestions in the thread: https://github.com/Microsoft/TypeScript/issues/9725.

Can anyone tell me what I'm missing to correctly reference this package in my module?

EDIT: Upon closer inspection, there are actually 4 tsconfig.* files in my app. I suspect this is the source of the problem. The question now is, which of them to I need to keep?

tsconfig.app.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": ["@types/d3-scale-chromatic"]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.spec.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

tsconfig.e2e.json :

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
    "module": "commonjs",
    "target": "es5",
    "types": [
      "jasmine",
      "jasminewd2",
      "node"
    ]
  }
}

Upvotes: 0

Views: 652

Answers (1)

Saptarshi Basu
Saptarshi Basu

Reputation: 9283

You also need to install:

npm install --save d3-scale-chromatic

along with:

npm install --save @types/d3-scale-chromatic

Upvotes: 3

Related Questions