Angular2 404 nicht gefunden für URL: http: // localhost/WebApi2/api/held

Question

Ich habe versucht, das http Angular 2 und TypeScript Beispiel auf https://angular.io/docs/ts/latest/tutorial/toh-pt6.html es funktioniert. https://embed.plnkr.co/?show=preview

Aktualisiert Code

private headers = new Headers({'Content-Type': 'application/json'}); 
// private heroesUrl = 'api/heroes'; // URL to web api 
private heroesUrl = 'http://localhost/WebApi2/api/hero'; // URL to web api 

constructor(private http: Http) { } 

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

Jetzt externen Web-Api verwenden ich es aktualisieren möchten eine externe Web API2 zu verwenden und den Fehler unten zu bekommen.

AUSNAHME: Uncaught (in Versprechen): Antwort mit dem Status: 404 Nicht für URL gefunden: http://localhost/WebApi2/api/hero " ein Fehler Objekt aufgetreten {_body: Objekt, Status: 404, ok: false, status: "nicht gefunden" , headers: Object, Typ: null, uRL: "http://localhost/WebApi2/api/hero"}

ich habe an dieser Lösung gesucht, aber es für mich nicht funktioniert Angular2 http get request results into 404

Fehler beim Import

.

Http/Http/node_module/@ eckig/http/index "'hat kein exportiertes Mitglied' JSONP_PROVIDERS '.

Kann mir jemand in die richtige Richtung zeigen, Beispiel für den Aufruf von Web Api2 von Angular2?

Answer 1

I personnaly für mehr als zwei Wochen mit diesem gekämpft, bevor ich auf einem Beitrag von @ mp-loki gelandet - Angular 2 HTTP GET 404 Not Found for URL - hier auf Stackoverflow: Der Kredit ihn daher wirklich geht (oder ihnen, um sicher zu sein).

auf der Winkeleinstellungsseite (https://angular.io/docs/ts/latest/guide/setup.html), werden Sie mit diesem Satz begrüßt: „für schnellere und effizientere Entwicklung auf Ihrer Maschine die Winkelquick Samen Installieren.“

Sie folgte wahrscheinlich die Anweisungen auf, dass Setup-Seite und Ihr Projekt basiert daher auf der Angular QuickStart Seed.

Es gibt nichts einzuwenden, nur dass das von Angular gegeben Tutorial verwendet einen In-Memory-web api, und das fängt alle Anforderungen an einem anderen Web-api, ob Sie einen direkten Aufruf an den In-Memory-Web-api machen von Ihrem Projektcode oder nicht.

Um Anforderungen an eine andere Web-API zu stellen, müssen Sie daher die In-Memory-Web-API trennen. Wie? Folgen Sie einfach den nachstehenden Schritten:

1. in Ihrem Projekt Stammverzeichnis, erweitern node_modules und löschen Sie das Verzeichnis angular-in-memory-web-api
2. Noch in Ihrem Projekt Stammverzeichnis, öffnen Sie das Paket.json Datei und entfernen Sie die folgende Zeile aus der Liste der Abhängigkeiten: "angular-in-memory-web-api": "~0.2.4",
3. Im src/app Verzeichnis, wenn die folgenden Dateien beenden oder alle zu zugehörigen Dateien im Speicher, löschen Sie sie: in-memory-data.service.ts, in-memory-data.service.js und in-memory-data.service.js.map
4. öffnen src/app/app.module.ts und die folgende aus der Liste der Importe entfernen: import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; und import { InMemoryDataService } from './in-memory-data.service';
5. Noch in src/app/app.module.ts, entfernen Sie diese Zeile Code aus der Annotation @NgModule: InMemoryWebApiModule.forRoot(InMemoryDataService),
6. In diesem Stadium können Sie sollten Anfragen an Ihren Web-api machen, aber höchstwahrscheinlich das Objekt eine data Eigenschaft nicht haben zurückgegeben hat, so dass Sie es von Ihrem Service-Datei entfernen: Ersetzen:

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

mit

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

hoffe, dass ich diese Hilfe s.

Answer 2

Ich hatte das gleiche Problem, nachdem einige frustrierende Forschungen ich die 404-Fehler dank this gelöst. Die Reihenfolge der Importe ist wichtig.
Hoffe es hilft jemandem.