Angular2 http get request results into 404

Question

Trying to run a simple http get call in Angular 2 + TypeScript given on https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

here: https://angular.io/resources/live-examples/toh-6/ts/plnkr.html

private heroesUrl = 'http://www.mocky.io/v2/575ed63f1100004f1b2992f4';  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Promise<Hero[]> {
    this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data)
               .catch(this.handleError);
  }

I also tried my local server url such as http://localhost:5000/api

But nothing works and the console shows

VM2510 hero.service.ts!transpiled:66 An error occurred Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}

complete exception

EXCEPTION: Error: Uncaught (in promise): [object Object] platform-browser.umd.js:962 EXCEPTION: Error: Uncaught (in promise): [object Object]BrowserDomAdapter.logError @ platform-browser.umd.js:962BrowserDomAdapter.logGroup @ platform-browser.umd.js:972ExceptionHandler.call @ core.umd.js:3696(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ [email protected]?main=browser:327Zone.runGuarded @ [email protected]?main=browser:233_loop_1 @ [email protected]?main=browser:487drainMicroTaskQueue @ [email protected]?main=browser:494ZoneTask.invoke @ [email protected]?main=browser:426 platform-browser.umd.js:962 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3698(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ [email protected]?main=browser:327Zone.runGuarded @ [email protected]?main=browser:233_loop_1 @ [email protected]?main=browser:487drainMicroTaskQueue @ [email protected]?main=browser:494ZoneTask.invoke @ [email protected]?main=browser:426 platform-browser.umd.js:962 Error: Uncaught (in promise): [object Object] at resolvePromise ([email protected]?main=browser:538) at resolvePromise ([email protected]?main=browser:523) at [email protected]?main=browser:571 at ZoneDelegate.invokeTask ([email protected]?main=browser:356) at Object.onInvokeTask (core.umd.js:6066) at ZoneDelegate.invokeTask ([email protected]?main=browser:355) at Zone.runTask ([email protected]?main=browser:256) at drainMicroTaskQueue ([email protected]?main=browser:474) at XMLHttpRequest.ZoneTask.invoke ([email protected]?main=browser:426)BrowserDomAdapter.logError @ platform-browser.umd.js:962ExceptionHandler.call @ core.umd.js:3699(anonymous function) @ core.umd.js:8951schedulerFn @ core.umd.js:6007SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:5996onError @ core.umd.js:6227onHandleError @ core.umd.js:6096ZoneDelegate.handleError @ [email protected]?main=browser:327Zone.runGuarded @ [email protected]?main=browser:233_loop_1 @ [email protected]?main=browser:487drainMicroTaskQueue @ [email protected]?main=browser:494ZoneTask.invoke @ [email protected]?main=browser:426 [email protected]?main=browser:461 Unhandled Promise rejection: Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…} ; Zone: angular ; Task: Promise.then ; Value: Response {_body: Object, status: 404, ok: false, statusText: "Not Found", headers: Headers…}consoleError @ [email protected]?main=browser:461_loop_1 @ [email protected]?main=browser:490drainMicroTaskQueue @ [email protected]?main=browser:494ZoneTask.invoke @ [email protected]?main=browser:426 [email protected]?main=browser:463 Error: Uncaught (in promise): [object Object](…)

Any help would be much appreciated.

I simply tried this on angular.io/resources/live-examples/toh-6/ts/plnkr.html — Yogesh Manware
– Yogesh Manware, Commented Jun 13, 2016 at 15:57

Yogesh Manware · Accepted Answer · 2016-06-13 20:15:13Z

1

I just got to know from other forums and examples that we should use jsonp to access crossdomain rests. e.g. http://plnkr.co/edit/0dFCzRdmBwcT99WR5Lbd?p=preview

@Component

import {JSONP_PROVIDERS}  from 'angular2/http';
...
..
 providers:[JSONP_PROVIDERS]

In Service:

import {Jsonp, URLSearchParams} from 'angular2/http';

answered Jun 13, 2016 at 20:15

Yogesh Manware

1,8432 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodney Over a year ago

What if you don't want to use jsonp? It is perhaps a CORS issue?

Collectives™ on Stack Overflow

Angular2 http get request results into 404

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related