Is support for Final Release 2.0.0 on the map?

[carmenbranje]

I could really use this!! :)

Thanks, Carmen

[vcernomschi]

+1

[alanpurple]

I think Krispo has had a long vacation, we miss you Krispo!!

[timfogarty1549]

This package is really just the one file ng2-nvd3.ts, transcribed and built into a node_module. I'm not sure what is all required to create a node module, but until this package is updated it is possible to just include the code within your own source code. I created my own folder under app, copy ng2-nvd3.ts to it, then add a new ngModule file.

import {NgModule} from '@angular/core';
import {nvD3} from './ng2-nvd3';

@NgModule({
    declarations: [
        nvD3
    ],
    exports: [
        nvD3
    ]
})
export class nvD3Module {}

Then I import this nvD3Module into the module where I want to use the nvd3 directive.

Since the .ts file is now with the rest of the code, AoT seems to work too. However, now it is not a node module, but part of your own source code. OK until this package gets updated.

[carmenbranje]

Where did you copy ng2-nvd3.ts from?

[martinmanzo]

@carmenbranje just create the file somewhere in your app structure and then import it in your app.module.ts.

import { nvD3Module } from './ng2-nvd3';
@NgModule({
    imports: [
        ...
        nvD3Module,
        ...
    ], ...

@timfogarty1549 thanks for this!

[cquillen2003]

I'm trying the work around above, but I'm still getting a template error: nv is not defined.

For an angular2-seed (Webpack) powered project, do I need to do anything else in addition to the above?

[NablaT]

Hello, I have exactly the same issue... I created the nvD3Module in which I declare nvD3 component and then I add the module into a module in my project but I still have the "nv is not defined". I create a test repository to reproduce the error: Click here Has someone solved the issue?

[martinmanzo]

Hi @NablaT

Your problem is that you are not including NVD3 into the app. Check the scripts section at your angular-cli.json, it's like this

"scripts": [
    "../node_modules/d3/d3.js",
    "../node_modules/ng2-nvd3/build/lib/ng2-nvd3.js"
],

When it should be like this:

"scripts": [
    "../node_modules/d3/d3.js",
    "../node_modules/nvd3/build/nv.d3.min.js",
    "../node_modules/ng2-nvd3/build/lib/ng2-nvd3.js"
],

That should do it.

[NablaT]

Oh sorry, yeah it's working better with the import .. Thank you very much @martinmanzo!

[brian15co]

How would I include the files

"../node_modules/d3/d3.js",
"../node_modules/nvd3/build/nv.d3.min.js",
"../node_modules/ng2-nvd3/build/lib/ng2-nvd3.js"

If I am not using angular-cli.json?

[NablaT]

In the same file where you add your javascript dependencies, what are you using to run your app?

[brian15co]

I am managing my dependencies with webpack. I tried adding them to my package.json, and everything seems to install correctly, although i am unable to get d3 recognized unless I include the scripts the traditional way in index.html. This way, it works, although its not ideal as I would like more compartmentalization.

[expy]

@martinmanzo I'm getting a "Uncaught ReferenceError: require is not defined" when importing the ng2-nvd3.js file within angular-cli.json .

This may be an issue isolated with Angular v.2.2.1 which I am using though. Any ideas on a resolution for this?

[martinmanzo]

Hi @expy, I haven't seen that issue before. I'm migrating to angular-cli also and solved the problems with ng2-nvd3 by creating a file inside the app folder (for example app/utils/ng2-nvd3.ts) and copying all the content from the file in node_modules/ng2-nvd3/lib/ng2-nvd3.ts into it. This way it compiles as any other ts file in your project and works without any problem.

Then import it on your app.module.ts and include it in the declarations array.

It may not be the best solution but it works.

[expy]

@martinmanzo Alright, thanks, I'll give that a shot.

[surfercoder]

Hey @martinmanzo and @timfogarty1549 thanks a lot for your great help and workaround for this issue. It is working right now, I followed your steps, creating a custom module and exporting nvd3 there, and nvd3 being taken from a copy of the ng2-nvd3.ts file, I placed both files at same level and everything worked like a charm, even when I must confess this is not as neat as I would like you both have saved me a lot of time and headaches! Thanks again!

[Rahulkupadhyay]

Thank you @martinmanzo . It worked .

[dio09]

@brian15co Adding:

new ProvidePlugin({ nv: 'nvd3' }),

to my config worked for me. I got the idea from: https://github.com/krispo/ng2-nvd3/issues/33