Git Product home page Git Product logo

Comments (4)

tomwanzek avatar tomwanzek commented on August 18, 2024

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" [email protected]
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
.

from d3-ng2-service.

tomwanzek avatar tomwanzek commented on August 18, 2024

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.

from d3-ng2-service.

tomwanzek avatar tomwanzek commented on August 18, 2024

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.

from d3-ng2-service.

tomwanzek avatar tomwanzek commented on August 18, 2024

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.

from d3-ng2-service.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.