Angular2 http get request results into 404 - http

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 # zone.js#0.6.12?main=browser:327Zone.runGuarded # zone.js#0.6.12?main=browser:233_loop_1 # zone.js#0.6.12?main=browser:487drainMicroTaskQueue # zone.js#0.6.12?main=browser:494ZoneTask.invoke # zone.js#0.6.12?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 # zone.js#0.6.12?main=browser:327Zone.runGuarded # zone.js#0.6.12?main=browser:233_loop_1 # zone.js#0.6.12?main=browser:487drainMicroTaskQueue # zone.js#0.6.12?main=browser:494ZoneTask.invoke # zone.js#0.6.12?main=browser:426
platform-browser.umd.js:962 Error: Uncaught (in promise): [object Object]
at resolvePromise (zone.js#0.6.12?main=browser:538)
at resolvePromise (zone.js#0.6.12?main=browser:523)
at zone.js#0.6.12?main=browser:571
at ZoneDelegate.invokeTask (zone.js#0.6.12?main=browser:356)
at Object.onInvokeTask (core.umd.js:6066)
at ZoneDelegate.invokeTask (zone.js#0.6.12?main=browser:355)
at Zone.runTask (zone.js#0.6.12?main=browser:256)
at drainMicroTaskQueue (zone.js#0.6.12?main=browser:474)
at XMLHttpRequest.ZoneTask.invoke (zone.js#0.6.12?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 # zone.js#0.6.12?main=browser:327Zone.runGuarded # zone.js#0.6.12?main=browser:233_loop_1 # zone.js#0.6.12?main=browser:487drainMicroTaskQueue # zone.js#0.6.12?main=browser:494ZoneTask.invoke # zone.js#0.6.12?main=browser:426
zone.js#0.6.12?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 # zone.js#0.6.12?main=browser:461_loop_1 # zone.js#0.6.12?main=browser:490drainMicroTaskQueue # zone.js#0.6.12?main=browser:494ZoneTask.invoke # zone.js#0.6.12?main=browser:426
zone.js#0.6.12?main=browser:463 Error: Uncaught (in promise): [object Object](…)
Any help would be much appreciated.

Answer 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';