Angular2-Seed + Typings + D3: Import error, 'Cannot find module 'd3''

Question

I'm trying to import D3 so that I can use it in an Angular2 module.

Some background info:

• I'm writing Angular2 in TypeScript.
• I am using Angular2-seed

What I did:

1. I installed the NPM D3 package:

   npm install d3 --save
   

2. I installed the D3 type descriptions using Typings, as that is what Angular2-Seed uses for the libraries it already has installed.

   typings install d3 --save
   

3. Then, in my Angular2 module file, I added the import statement

   import * as d3 from 'd3';
   

The result is that TSC is giving me the error message "Cannot find module 'd3'". What am I missing or doing wrong?

Answer 1

So if in package.json you already have a dependency for like:

"dependencies": {
   ...
   "d3": "^3.5.17",
   ...
}

you then can go in /tools/config/seed.config.ts and add 'd3': '${this.NPM_BASE}d3/d3.min.js' in SYSTEM_CONFIG_DEV object, like:

protected SYSTEM_CONFIG_DEV: any = {
    defaultJSExtensions: true,
    packageConfigPaths: [
      `${this.NPM_BASE}*/package.json`,
      `${this.NPM_BASE}**/package.json`,
      `${this.NPM_BASE}@angular/*/package.json`
    ],
    paths: {
      [this.BOOTSTRAP_MODULE]: `${this.APP_BASE}${this.BOOTSTRAP_MODULE}`,
      '@angular/core': `${this.NPM_BASE}@angular/core/bundles/core.umd.js`,
      '@angular/common': `${this.NPM_BASE}@angular/common/bundles/common.umd.js`,
      '@angular/compiler': `${this.NPM_BASE}@angular/compiler/bundles/compiler.umd.js`,
      '@angular/forms': `${this.NPM_BASE}@angular/forms/bundles/forms.umd.js`,
      '@angular/http': `${this.NPM_BASE}@angular/http/bundles/http.umd.js`,
      '@angular/router': `${this.NPM_BASE}@angular/router/index.js`,
      '@angular/platform-browser': `${this.NPM_BASE}@angular/platform-browser/bundles/platform-browser.umd.js`,
      '@angular/platform-browser-dynamic': `${this.NPM_BASE}@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js`,
      'rxjs/*': `${this.NPM_BASE}rxjs/*`,
      'd3': '${this.NPM_BASE}d3/d3.min.js',
      'app/*': `/app/*`,
      '*': `${this.NPM_BASE}*`
    },
    packages: {
      rxjs: { defaultExtension: false }
    }

Let me know if it help. Thanks!

Answer 2

I had the same issue, and the above answer helped for debugging my soltution - in that it identified it was a config issue, however using [email protected] i had to update {root}/e2e/tscconfig.json (by adding:

     "types": [
       "d3"
     ]

as follows:

{
    "compileOnSave": false,
    "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "../dist/out-tsc-e2e",
    "sourceMap": true,
    "target": "es5",
    "typeRoots": [
      "../node_modules/@types"
    ],
    "types": [
      "d3"
     ]
   }
}

Keep in mind that there is a tscconfig.json in {root}/src/ as well. I updated in this and I still had a dependency issue with:

import * as D3 from 'd3';

in my component that through the error. Hope this helps at least one person!