Angular Tour of Heroes Error Importing HttpClientModule

Question

I'm trying the getting started on Angular tutorial. https://angular.io/tutorial/toh-pt6

When I import the HttpClientModule as per the instructions, I get the error below.

Please help. I'm using npm on mac.

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http
Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http
    at XMLHttpRequest.wrapFn (http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:39)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:425:31)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:499:34)
    at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17)
Error loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http as "@angular/common/http" from http://localhost:3000/app/app.module.js
    at XMLHttpRequest.wrapFn (http://localhost:3000/node_modules/zone.js/dist/zone.js:1166:39)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:425:31)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:47)
    at ZoneTask.invokeTask [as invoke] (http://localhost:3000/node_modules/zone.js/dist/zone.js:499:34)
    at invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:1540:14)
    at XMLHttpRequest.globalZoneAwareCallback (http://localhost:3000/node_modules/zone.js/dist/zone.js:1566:17)
Error loading http://localhost:3000/node_modules/@angular/common/bundles/common.umd.js/http as "@angular/common/http" from http://localhost:3000/app/app.module.js

yurzui · Accepted Answer · 2017-11-20 04:00:33Z

2

You should also change your systemjs config by adding:

 map: {
  ...
  '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
  'tslib': 'npm:tslib/tslib.js'

2 Comments

Shamal Karunarathne Over a year ago

But it's not in the tutorial. Since it's a getting started tutorial, Am I right to say that there should be an easy way to fix this? or I missed some instructions?

yurzui Over a year ago

Yeah, you're right it is not.Seems it's supposed that you're familar with systemjs configuration when working with http. You can ask this question on github

Collectives™ on Stack Overflow

Angular Tour of Heroes Error Importing HttpClientModule

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related