0

I am trying to add the example into angular2-quickstart project. In systemjs.config.js define a map ng2-nvd3

map: {
      // our app is within the app folder
      app: 'app',
     ...
      // other libraries
      'ng2-nvd3':                   'npm:ng2-nvd3/lib/ng2-nvd3'      
    },

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import {nvD3} from 'ng2-nvd3';

import { AppComponent }  from './app.component';
import { AppService }  from './app.service';

@NgModule({
  imports: [
    BrowserModule 
  ],
  declarations: [ 
    nvD3,
    AppComponent 
  ],
  bootstrap: [
    AppComponent 
  ]
})
export class AppModule { }

and app.component.ts:

import { Component, OnInit } from '@angular/core';
declare let d3: any;
import {nvD3} from 'ng2-nvd3';

@Component({
    selector: 'my-app',
    moduleId: module.id,
    templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
...
}

Add 3 lines to index.html: 

<script src="node_modules/d3/d3.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="node_modules/nvd3/build/nv.d3.min.css"/>
    <script src="node_modules/nvd3/build/nv.d3.min.js"></script>

The error from the browser:

enter image description here

Any idea pls?

beewest
  • 4,486
  • 7
  • 36
  • 63

2 Answers2

0

You are saying your System.js configuration that root script for NVD3 is hosted here :

'ng2-nvd3': 'npm:ng2-nvd3/lib/ng2-nvd3'

But as I see you are trying to get script from this path: href="node_modules/nvd3/build/nv.d3.min.js"/>

Try to change in system.config.js

This line : 'ng2-nvd3': 'npm:ng2-nvd3/lib/ng2-nvd3'

To this: 'ng2-nvd3': 'npm:ng2-nvd3/build/ng2-nvd3'

Kanso Code
  • 7,479
  • 5
  • 34
  • 49
0

The mapping in your systemjs.config.js is incorrect. You need to change it to the below:

'ng2-nvd3': 'npm:ng2-nvd3/build/lib/ng2-nvd3.js'
user1826413
  • 133
  • 1
  • 12