Ich habe das Starter-Tutorial von angle2 "tour of heroes" erfolgreich abgeschlossen. Dann erstelle ich eine API, die auf symfony3, FosRestBundle und BazingaHateoasBundle als Backend basiert. Jetzt funktioniert fast alles, aber beim Erstellen neuer Elemente kann ich den Header "Location" nicht aus der Antwort abrufen, um das neu erstellte Element zu laden.

Hier ist mein Heldendienst:

import {Injectable} from "angular2/core";
import {Hero} from "./hero";
import {Http, Headers, RequestOptions, Response} from "angular2/http";
import {Observable} from "rxjs/Observable";
import "rxjs/Rx";

@Injectable()
export class HeroService {

    constructor(private _http:Http) {
    }

    private _apiUrl = 'http://tour-of-heros.loc/app_dev.php/api'; // Base URL
    private _heroesUrl = this._apiUrl + '/heroes';  // URL to the hero api


    getHeroes() {
        return this._http.get(this._heroesUrl)
            .map(res => <Hero[]> res.json()._embedded.items)
            .do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }

    addHero(name:string):Observable<Hero> {

        let body = JSON.stringify({name});

        let headers = new Headers({'Content-Type': 'application/json'});
        let options = new RequestOptions({headers: headers});

        return this._http.post(this._heroesUrl, body, options)
            // Hero is created, but unable to get URL from the Location header!
            .map((res:Response) => this._http.get(res.headers.get('Location')).map((res:Response) => res.json()))
            .catch(this.handleError)

    }

    private handleError(error:Response) {
        // in a real world app, we may send the error to some remote logging infrastructure
        // instead of just logging it to the console
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
    }

    getHero(id:number) {
        return this._http.get(this._heroesUrl + '/' + id)
            .map(res => {
                return res.json();
            })
            .do(data => console.log(data)) // eyeball results in the console
            .catch(this.handleError);
    }
}

Also, wenn ich die addHero-Methode aufrufe, wird ein neuer Hero erstellt und eine 201-Antwort ohne Text zurückgegeben, aber mit gesetztem Location-Header:

Cache-Control: no-cache
Connection: Keep-Alive
Content-Length: 0
Content-Type: application/json
Date: Tue, 29 Mar 2016 09:24:42 GMT
Keep-Alive: timeout=5, max=100
Location: http://tour-of-heros.loc/app_dev.php/api/heroes/3
Server: Apache/2.4.10 (Debian)
X-Debug-Token: 06323e
X-Debug-Token-Link: /app_dev.php/_profiler/06323e
access-control-allow-credentials: true
access-control-allow-origin: http://172.18.0.10:3000

Das Problem ist, dass dasres.headers.get('Location') hat den Location-Header nicht aus der Antwort erhalten. Nach einigem Debuggen scheint es, dass dasres.headers bietet nur zwei Überschriften Cache-Control und Content-Type. Aber keine Location.

Ich wusste, dass es auch möglich sein sollte, das Problem durch Hinzufügen der neu erstellten Daten zum Hauptteil der Antwort zu lösen, aber das ist nicht wirklich die Art und Weise, wie ich das lösen möchte.

Danke im Voraus