d3.js - angular2 ng2-nvd3：无法加载模块

Question

我正在尝试将示例添加到 angular2-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 {
...
}

将 3 行添加到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>

来自浏览器的错误：

有什么想法吗？

Answer 1

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

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

Answer 2

你是说你的 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'