Ng2-charts: Ng2 charts not found

[ulou]

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(…)

[xLama]

Are you using SystemJS? If so, add following code to system.config.js
map object add:

"ng2-charts": "node_modules/ng2-charts"

packages object add:

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

[ulou]

Yes, but it looks like system-config.ts doesnt see "node_modules" folder

[xLama]

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?

[ulou]

Yes its trying to get it from http://localhost:4200/node_modules/ng2-charts/ng2-charts.js.

Here you have index and system-config:
https://plnkr.co/edit/fWAQOqPsuhAfxZE92Vyp?p=catalogue

[xLama]

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
    ]
};

[ulou]

I did it and I got same error:
GET: http://localhost:4200/node_modules/ng2-charts/ng2-charts.js 404 (Not Found)

[xLama]

So, you have a server issue.
I use live-server.

npm i -g live-server

Go to your peoject folder via console and type:

live-server --entry-file=index.html

[ulou]

Ok, I trying, but one more. In chrome development console I can see sources:
node_modules/ng2-charts/ng2-charts.js, but in this file I have my index.html file.

BTW. I using angular-cli

[ulou]

Ok, live-server doesn't work, but I handle it with angular-cli. Now I don't have any errors, but see only labels without chart. I feel like I am close to make this!

EDIT. I made this, thanks for help!

[samirthebti]

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 :)

[ThomasSchoenbeck]

@samirthebti but how are you making sure the files get copied into dist folder upon build? when i am trying to have this done by angular-cli-build.js I end up with different folders and get all kinds of 404 not found errors (e.g. http://localhost:4200/vendor/ng2-charts/components/charts/charts.js 404 (Not Found))

[devrockzz]

I am facing the same problem
zone.js:101 GET http://localhost:4200/node_modules/ng2-charts/ng2-charts.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM17295: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/node_modules/ng2-charts/ng2-charts.js
at XMLHttpRequest.wrapFn as _onreadystatechange
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/node_modules/ng2-charts/ng2-charts.js as "ng2-charts/ng2-charts" from http://localhost:4200/app/adminpanel/adminpanel.component.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/ng2-charts/ng2-charts.js(…)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/node_modules/ng2-charts/ng2-charts.js(…)

-----> i am using angular cli ............

[ulou]

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' },

[devrockzz]

zone.js:101 GET http://localhost:4200/vendor/ng2-charts/ng2-charts.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM1650: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/vendor/ng2-charts/ng2-charts.js
at XMLHttpRequest.wrapFn as _onreadystatechange
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/vendor/ng2-charts/ng2-charts.js as "ng2-charts/ng2-charts" from http://localhost:4200/app/adminpanel/adminpanel.component.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/vendor/ng2-charts/ng2-charts.js(…)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/vendor/ng2-charts/ng2-charts.js(…)

same thing bro ---------------- need help

[ulou]

Do you at least have ng2-charts directory in /dist? I can't help you if you will send me just
404 (Not Found) All possible issues were solved in this topic.

[devrockzz]

ya i have, can you share your system-config.ts,index.html and angular-cli-build.js?
i have followed the installation steps from here http://valor-software.com/ng2-charts/
Can you say me how you did the steps to integrate charts ??

In node_modules i have charts.js inside that i have dist and inside that i have all files they are as follows: -
chart.js
chart.bundle.js
chart.bundle.min.js
chart.min.js

[devrockzz]

i am sharing my codes
this is system-config.ts
"use strict";

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/*******************************

• User Configuration.
  *******************************_/
  /_* Map relative paths to URLs. */
  const map: any = {
  '@angular2-material': 'vendor/@angular2-material',
  "ng2-charts": "vendor/ng2-charts"

};

/** User packages configuration. */

const packages: any = {
"ng2-charts": { main: "ng2-charts.js", defaultExtension: "js" },

'@angular2-material/core': {
format: 'cjs',
defaultExtension: 'js',
main: 'core.js'
},
'@angular2-material/toolbar': {
format: 'cjs',
defaultExtension: 'js',
main: 'toolbar.js'
},
'@angular2-material/sidenav': {
format: 'cjs',
defaultExtension: 'js',
main: 'sidenav.js'
},
'@angular2-material/card': {
format: 'cjs',
defaultExtension: 'js',
main: 'card.js'
},
'@angular2-material/button': {
format: 'cjs',
defaultExtension: 'js',
main: 'button.js'
},
'@angular2-material/list': {
format: 'cjs',
defaultExtension: 'js',
main: 'list.js'
},
'@angular2-material/progress-bar': {
format: 'cjs',
defaultExtension: 'js',
main: 'progress-bar.js'
},
};

////////////////////////////////////////////////////////////////////////////////////////////////
/*******************************

• Everything underneath this line is managed by the CLI.
  ******************************/
  const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/forms',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',

// Thirdparty barrels.
'rxjs',

// App specific barrels.
'app',
'app/shared',
'app/adminpanel',
'app/list',
/** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

[devrockzz]

at index.html i have use-----
< script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js">< /script>
< script src="../node_modules/chart.js/dist/Chart.bundle.min.js">< /script>

[devrockzz]

angular-cli-build.js---------
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist//.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata//_.+(ts|js|js.map)',
'rxjs/__/_.+(js|js.map)',
'@angular//.+(js|js.map)',
'@angular2-material//_.js',
'angular2-jwt/__/_.js',
'chart.js/dist/Chart.min.js',
'ng2-charts/*/.js'
]
});
};