404 error - can't find /highcharts/highstock.src

[cduecker]

angular2-polyfills.js:332 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/highcharts/highstock.src(…)

The app is trying to load /highcharts/highstock.src

In, node_modules/angular2-highcharts/dist/Highcharts.js
I change the reference to: var Highcharts = require('/node_modules/highcharts/highstock.src.js');
Then it works

[gevgeny]

Which bundler do you use ?

[cduecker]

systemjs : 0.19.24
node : 5.5.0
npm : 3.8.2

[gevgeny]

I think it is better to map sources. Look at the example of loading via systemjs http://plnkr.co/edit/pnkc8Iw9cSrCYn9zr0VZ?p=preview. I am not a specialist in systemjs so would be great if you suggest how to manage this better.

[cduecker]

Thank you for your example. I agree it is best to map sources. To solve my problem I changed my map statement to include '.js' in the key. I thought that setting defaultExtension: 'js' in the packages object in System.config would make it unnecessary to have '.js' in the alias. Clearly, I don't understand systemjs well enough. The following config is what I'm now using in index.html:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'angular2-highcharts': {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
'angular2-highcharts': 'node_modules/angular2-highcharts',
'highcharts/highstock.src.js': 'node_modules/highcharts/highstock.js'
},
});

[cduecker]

Ok, I just looked again at 'node_modules/angular2-highcharts/dist/Highcharts.js' and I see that the '.js' extension is included in the reference (var Highcharts = require('highcharts/highstock.src.js');)
So my real problem was that the name of my alias in the map statement was not exactly the same as the name in the reference. I should have caught this. It looks like the current version of dist/Highcharts.js does not include the extension. I am using v. 0.0.5. In any case the problem is solved and I thank you very much for your help.

[gevgeny]

Good.

[devrockzz]

GET http://localhost:4200/node_modules/angular2-highcharts 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM729: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/angular2-highcharts
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/angular2-highcharts as "angular2-highcharts" from http://localhost:4200/app/app.component.js ; Zone: ; Task: Promise.then ; Value: Error: Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/angular2-highcharts(…)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/angular2-highcharts(…)
i am using angular cli