Angular http Post Versprechen nicht funktionieren, aber Ajax ist

Question

Ich versuche, einen Beitrag zu machen mit dem folgenden Code, aber ich bekomme diese Fehlermeldung:

Kurz form.component.ts

this.shortFormService.update(formModel) 
    .then(res => {   
     this.router.navigate(['/goHere']) 
    } 
); 

kurz- form.service

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

update(formModel): Promise<ShortFormModel> { 
    return this.http 
    .post(this.preCheckUrl, JSON.stringify(formModel), {headers: this.headers}) 
    .toPromise() 
    .then(res => { 
    res.json().data as ShortFormModel;  
    }) 
    .catch(
    (error: any): Promise<any>=> {   
     this.router.navigate(['/error', error]); 
     return Promise.reject(error.message || error); 
    } 
) 

}

Error: core.es5.js:1020 ERROR Error: Uncaught (in promise): Response with status: 404 Not Found for URL: http://localhost:8080/endpoint 

Allerdings, wenn ich es nur ajax funktioniert:

$.ajax({ 
    type: "POST", 
    url: 'http://localhost:8080/endpoint', 
    data: JSON.stringify(formModel), 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function (response) { 
    console.log("success"); 
    }, 
    error: function (response) { 
    console.log("failed"); 
    } 
}); 

Irgendwelche Ideen auf, was hier geschieht? Ich habe mir andere Beiträge angeschaut und der Inhaltstyp scheint ein Problem mit anderen zu sein. Allerdings setze ich (vielleicht fälschlicherweise) 'Content-Type': 'application/json;' mit neuen Kopfzeilen(). Oder ist das ein Problem, wie vielversprechend aufgebaut ist?

Answer 1

diese

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

 
update(formModel): Promise<ShortFormModel> { 
 
    let options: RequestOptions = new RequestOptions(); 
 
    options.headers = this.headers; 
 
    return this.http 
 
    .post(this.preCheckUrl, JSON.stringify(formModel), options) 
 
    .toPromise() 
 
    .then(res => { 
 
    res.json().data as ShortFormModel;  
 
    }) 
 
    .catch(
 
    (error: any): Promise<any>=> {   
 
     this.router.navigate(['/error', error]); 
 
     return Promise.reject(error.message || error); 
 
    } 
 
)

Die Headers Notwendigkeit Versuchen im Rahmen der RequestOptions Richtlinie hinzugefügt werden.

Answer 2

Ich fühle mich sehr albern, aber die Ursache war, weil ich nicht

InMemoryWebApiModule.forRoot(InMemoryDataService) 

deaktiviert hat, dass ich für Entwickler wurde mit, bevor die Dienste bereit waren.

Die Lösung, die ich mit gegangen ist so ziemlich aus tutorial eckigen:

Kurz form.component

onSubmit(shortForm: any) { 
if (!shortForm) { return; } 
const formModel = this.shortForm.value; 

this.shortFormService.create(formModel) 
    .subscribe(res => { 
      this.router.navigate(['/apply']) 
     })  
} 

Kurz form.service

create(shortForm: any): Observable<ShortFormModel> { 
let headers = new Headers({'Content-Type': 'application/json'}); 
let options = new RequestOptions({headers: headers}); 

return this.http.post(this.preCheckUrl, shortForm, options) 
    .map(this.extractData) 
    .catch(this.handleError); 
}