Question

我在发布我的应用时遇到了这个问题：

(SystemJS) XHR error (404 Not Found) loading http://localhost:3000/d3-ng2-service wrapF…

我在链接https://github.com/tomwanzek/d3-ng2-service之后安装了d3.js，如下所示：

pm install d3-ng2-service --save

并按照链接中包含的所有说明进行操作。

我错过了什么？

（我使用：npm 4.1.1和节点6.9.4）

[增订] 我的systemjs.config.js现在如下：

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'd3-ng2-service':            'npm:d3-ng2-service',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'd3-ng2-service': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

使用此更新的配置文件，我现在有以下错误：

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    wrapFn@http://loc…

我的文件夹：

Answer 1

错误来自类似于以下内容的行：

import { D3Service } from 'd3-ng2-service';

要使SystemJS能够解析此导入，您需要教它找到d3-ng2-service库的位置。

如果您使用的是官方Angular快速入门，则systemjs.config.js包含可以帮助您的代码。尝试在此文件中找到map rxjs，并以此为例。

您的配置中应该有一个额外的map，如下所示：

map : {
  'd3-ng2-service': 'npm:d3-ng2-service',
  // ...
}

您可能还需要定义包的入口点：

packages: {
  'd3-ng2-service': {
    main: './index.js'
  }
}

您可以更改原始systemjs.config.js，但快速入门还提供专门用于存储您的自定义项的systemjs.config.extras.js。

Answer 2

这一行：

'd3-ng2-service':            'npm:d3-ng2-service',

你的system.js配置中的

看起来不对。它需要指向JS模块的路径。

查看您的node_modules屏幕截图，请尝试：

'd3-ng2-service':  'npm:d3-ng2-service/esm/index.js',

在Angular2上运行D3.JS v4时出错

2 个答案: