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

9
votes

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

Some background info:

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?

3
d3.jstypescriptangulartypescript-typings
could you try to download package from here – Pankaj Parkar
I installed it, set up the discreteBarChart demo, but it doesn't show up at all in the browser, despite there being no browser errors, no compiler errors. But before I'm going to invest much more time into getting NG2-NVD3 to work I'd better stop: NVD3 is not going to be much use for me as I need to build a highly custom visualization. – DavidDuwaer

3 Answers

3
votes

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!

1
votes

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!

0
votes

For Angular 5+

you can just do:

npm i -g typings

npm i [email protected] --save

typings install d3=github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts#6e2f2280ef16ef277049d0ce8583af167d586c59 --global --save