Fails when use systemjs.config.js

[vcernomschi]

I am getting error zone.js:1274 GET http://localhost:3000/traceur 404 (Not Found) when add d3-ng2-service in systemjs.config.js

Steps to reproduce:

1. Use https://angular.io/docs/ts/latest/quickstart.html example.
2. Install d3-ng-service.
3. Update AppModule and add TestD3Component.
4. Check result:
   Expected result: All components are displayed without errors;
   Actual result: Getting error 404.

I use the following systemjs.config.js:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(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',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      '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'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'd3-ng2-service': {
        main: './index.js',
        defaultExtension: 'js'
      },
    }
  });
})(this);

[tomwanzek]

I can't comment exhaustively right now. The service works with the
angular-cli webpack beta 15 setup without issues.

Angular-cli recently moved away from systemsjs to Webpack.

The original typescript source for this package is compiled to two
different target/module combinations. The one in the index file you are
referencing is es5/es6. The other is jsnext es6/es6.

I suspect that the angular seed project is not setup to import es6 modules.
So you might want to look into required config changes.

When I have a minute I will look into adding a rollupjs generated UMD
bundle to this package. This might aleviate the systemjs issue.

Sorry but I am currently only on cell...

On Sep 22, 2016 6:41 PM, "Vitali Cernomschi" notifications@github.com
wrote:

I am getting error zone.js:1274 GET http://localhost:3000/traceur 404
(Not Found) when add d3-ng2-service in systemjs.config.js

Steps to reproduce:

1. Use https://angular.io/docs/ts/latest/quickstart.html example.
2. Install d3-ng-service.
3. Update AppModule and add TestD3Component.
4. Check result:
   Expected result: All components are displayed without errors;
   Actual result: Getting error 404.

I use the following systemjs.config.js:

/**

• System configuration for Angular samples
• Adjust as necessary for your application needs.
  */
  (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',
  'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
  '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'
  },
  'angular2-in-memory-web-api': {
  main: './index.js',
  defaultExtension: 'js'
  },
  'd3-ng2-service': {
  main: './index.js',
  defaultExtension: 'js'
  },
  }
  });
  })(this);

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#11, or mute the
thread
https://github.com/notifications/unsubscribe-auth/APkVP2ut20iyKQ4ipNUFW50ot4UB5vg2ks5qswQxgaJpZM4KEcBS
.

[tomwanzek]

I have done some initial tests with Rollup, which would imply including a bundled version of the service and the related d3 modules in UMD format. It worked with an angular-seed clone I pulled down.

By work I mean, without any other changes to the project setup to support es2015 modules and simply adding a one-liner to the map section of the system.config.js I loads without errors and a simple functionality check worked. I.e. selecting the

element and attaching a mouseover event listener with D3, worked as expected.

I will do some additional testing, i.p. using the UMD bundled version with the angular-cli webpack setup to ensure there are no regressions.

If all works well, hope to publish a new release shortly.

[tomwanzek]

Require more testing, the UMD definitions work fine with angular-cli webpack in ng serve dev mode. However, there appears to be an issue in the interaction with Uglify in prod mode.

[tomwanzek]

After further review, the issue should be addressed on the side of the module loader configuration (i.e. systemjs), so that the loader imports ES6 modules. This is required to obtain live-bindings necessary or d3.event to work.

See d3.event documentation:

If you use Babel, Webpack, or another ES6-to-ES5 bundler, be aware that the value of d3.event changes during an event! An import of d3.event must be a live binding, so you may need to configure the bundler to import from D3’s ES6 modules rather than from the generated UMD bundle; not all bundlers observe jsnext:main.

Closing.