Me acabo de mudar de php a Angular 2, sin mucha experiencia en javascript o mecanografía. Por lo tanto, necesito tu ayuda para llenar un vacío.

Estoy trabajando en una aplicación bastante grande, donde necesito usar D3.js. Mi aplicación de desarrollo se basa en el inicio rápido oficial (https://github.com/angular/quickstart)

Estoy tratando de importar d3-ng2-service (https://www.npmjs.com/package/d3-ng2-service) y hasta donde leí en SO y github, el código es correcto. Sin embargo no funciona. Aquí hay un código a continuación, editado por brevedad.

src / app / app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule, JsonpModule }    from '@angular/http';

import { FileUploadModule } from 'ng2-file-upload';
import { D3Service } from 'd3-ng2-service';

*...*

@NgModule({
  imports: [ 
    BrowserModule, 
    FormsModule,
    HttpModule,
    JsonpModule,
    FileUploadModule,
    *...*
  ],
  declarations: [ 
    *...*
  ],
  providers: [  
    D3Service,
  ],
  bootstrap: [ 
    *...*
  ]
})

export class AppModule { }

src / systemjs.config.js

(function (global) {
  System.config({
    paths: {
      'npm:': 'node_modules/'
    },
    map: {
      'app': 'app',
      '@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',

      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',

      'ng2-file-upload' : 'npm:ng2-file-upload',
      'd3-ng2-service' : 'npm:d3-ng2-service', 
    },
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      },
      /** Configuration for ng2-file-upload */
      'ng2-file-upload' : { 
        main: './ng2-file-upload.js',
        defaultExtension: 'js'
      },
      'd3-ng2-service' : { 
        main: './index.js',
        defaultExtension: 'js'
      },
    }
  });
})(this);

El error que obtengo en la consola es este:

GET http://localhost:3000/traceur 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur
    Error: XHR error (404 Not Found) loading http://localhost:3000/traceur
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1075:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:498:34)
        at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1370:14)
        at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1388:17)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/d3-ng2-service/index.js
    Error loading http://localhost:3000/node_modules/d3-ng2-service/index.js as "d3-ng2-service" from http://localhost:3000/app/app.module.js
        at XMLHttpRequest.wrapFn [as __zone_symbol___onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:1075:39)
        at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:424:31)
        at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:191:47)
        at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:498:34)
        at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1370:14)
        at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1388:17)
    Error loading http://localhost:3000/traceur
    Unable to load transpiler to transpile http://localhost:3000/node_modules/d3-ng2-service/index.js
    Error loading http://localhost:3000/node_modules/d3-ng2-service/index.js as "d3-ng2-service" from http://localhost:3000/app/app.module.js

Puedo confirmar que todas las rutas son correctas. En node_modules / d3-ng2-service / index.js hay una sola declaración:

export * from './src/d3.service';

¿Necesito algunas dependencias adicionales para leer esta declaración? No estoy usando webpack y d3-ng2-service no prueba un punto de entrada .umd.