ng2-charts: Ng2 charts not found

Hello, I tired everything, but everytime I getting errors like below.

zone.js:101 GET http://localhost:4200/ng2-charts/ng2-charts 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM23751:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:461 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-charts/ng2-charts
        at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:4200/vendor/zone.js/dist/zone.js:769:30)
        at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)
        at Zone.runTask (http://localhost:4200/vendor/zone.js/dist/zone.js:256:48)
        at XMLHttpRequest.ZoneTask.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:423:34)
    Error loading http://localhost:4200/ng2-charts/ng2-charts as "ng2-charts/ng2-charts" from http://localhost:4200/app/dashboard/dashboard.component.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-charts/ng2-charts(…)consoleError @ zone.js:461_loop_1 @ zone.js:490drainMicroTaskQueue @ zone.js:494ZoneTask.invoke @ zone.js:426
zone.js:463 Error: Uncaught (in promise): Error: Error: XHR error (404 Not Found) loading http://localhost:4200/ng2-charts/ng2-charts(…)

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 19

Most upvoted comments

It is trieing to get it from http://localhost:4200/ng2-charts/ng2-charts.

In my project: http://127.0.0.1:8080/node_modules/ng2-charts/ng2-charts.js

Can you post your system.config.js and your index.html?

xLama on Jul 24, 2016

I solved this by adding

map object add: "ng2-charts": "vendor/ng2-charts"

You need to map it into your built project (/dist)!!!

packages object add: "ng2-charts": { main: 'ng2-charts.js' },

ulou on Aug 17, 2016

it’s work for me , i use angular cli , just
map object add:

"ng2-charts": "node_modules/ng2-charts" packages object add:

"ng2-charts": { main: 'ng2-charts.js' }, in the exterrnal system.config.js and in the /src/ folder 😃

samirthebti on Aug 2, 2016

Run your server and request to (in your browser) : http://localhost:4200/node_modules/ng2-charts/ng2-charts.js.

Can you see source code?

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var charts_1 = require('./components/charts/charts');
__export(require('./components/charts/charts'));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    directives: [
        charts_1.CHART_DIRECTIVES
    ]
};

xLama on Jul 24, 2016