ReferenceError: nv is not defined

[cquillen2003]

After npm installing ng2-nvd3 and setting up an Angular 2 component per the 'Basic usage' example, I am getting the following error:

ReferenceError: nv is not defined at nvD3.clearElement (http://localhost:3000/main.bundle.js:892...)

I am using the official Webpack powered angular2-seed at: https://github.com/angular/angular2-seed

[JunusErgin]

This error usually occurs if d3 or nvd3 is not loaded or has the wrong version.

NVD3 is recommended to go with d3.js version 3.5.3 and later, but NOT d3 4.x yet. Source

Make sure, you have included these libraries in exactly this order:

1. d3.min.js
2. nv.d3.min.js
3. ng2-nvd3.ts

Also, you can try to add the first two libraries to your index.html to determine if you have an import error:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.4/nv.d3.min.js"></script>

Also make sure, you are using the RC4 version of Angular2, as this project does.

Best,

Junus

[amirma]

@JunusErgin solution worked for me. Thanks.

[imfarhad]

@JunusErgin @amirma Would you be kind enough to share a working folder with all relevant files?

Thanks & Best Regards, Farhad

[ghost]

can you create a plunkr for this solution please?

[sebmade]

answer there https://github.com/angular/angular-cli/issues/1856 need to use d3 as a module do

npm install --save d3@^3.4.4
npm install  --save-dev @types/d3@^3.4.4
npm install --save nvd3
npm install --save-dev @types/nvd3

NB: nvd3 is not compatible d3 v4 yet

and add this in your code

import * as d3 from 'd3';

maybe you must also add this in typings.d.ts

declare module 'd3' { let exportAs: any; export = exportAs; }
declare module 'nv' { let exportAs: any; export = exportAs; }

and must use nv and d3 somewhere in your code because if not webpack detect is unused and don't import the js file

[drnknmstrr]

@sebmade What file are you putting import * as d3 from 'd3' in? I'm getting weird errors if I include in every component that uses d3.

[sebmade]

angular-cli (webpack) take it in the node_modules directory d3.js is declared as the main file in the packages.json of d3 js npm module

[AKlaus]

If you're using Webpack, then you can leverage the ProvidePlugin, to resolve a reference to NVD3, where the nv is used. It also requires NVD3 and D3 installed as --save-dev, not as --save Example for angular2-webpack-starter:

plugins: [
  new ProvidePlugin({
        nv: 'nvd3'
  })
]

Links: see stakoverflow on how to use the ProvidePlugin and a sample for jQuery from the angular2-webpack-starter.

[bright-future]

this worked for me when i wrote it in my index.html but what to do next please explain it step by step.I dont want to write it in my index.html

[Toub]

The solution described here worked for me: https://github.com/krispo/ng2-nvd3/issues/27#issuecomment-236025744

Simply add the following import in your component:

 import 'nvd3';