angular2 ng2-nvd3：无法加载模块

Question

我正在尝试将example添加到a​​ngular2-quickstart项目中。在systemjs.config.js中定义地图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 { }

和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 {
...
}

向index.html添加3行：

<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>

浏览器出错：

有什么想法吗？

Answer 1

您说的是System.js配置，NVD3的根脚本在此处托管：

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

但是当我看到你试图从这条路径中获取脚本时：href="node_modules/nvd3/build/nv.d3.min.js"/>

尝试更改system.config.js

这一行：'ng2-nvd3': 'npm:ng2-nvd3/lib/ng2-nvd3'

对此：'ng2-nvd3': 'npm:ng2-nvd3/build/ng2-nvd3'

Answer 2

systemjs.config.js中的映射不正确。您需要将其更改为以下内容：

'ng2-nvd3': 'npm:ng2-nvd3/build/lib/ng2-nvd3.js'