angular2 ng2-nvd3：无法加载模块答案

【问题标题】：angular2 ng2-nvd3: could not load the moduleangular2 ng2-nvd3：无法加载模块
【发布时间】：2016-09-06 07:26:23
【问题描述】：

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

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

来自浏览器的错误：

有什么想法吗？

【问题讨论】：

标签： d3.js angular ng2-nvd3

【解决方案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'

【讨论】：

【解决方案2】：

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

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

【讨论】：