J'utilise Angular 7 et j'appelle un service simple en utilisant observable
import { Injectable } from '@angular/core';
import { Http, Headers} from '@angular/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http:Http) { }
registerUser(user):Observable<any>{
let headers = new Headers();
headers.append('Content-Type','application/json');
return this.http.post('http://localhost:8888/users/register', user, {headers:headers});
}
}
lors de la compilation du code est ok, mais quand il frappe l'URL de registre et le composant, il donne une erreur
ERROR Error: "[object Object]"
resolvePromise http://localhost:4200/polyfills.js:3159:31
resolvePromise http://localhost:4200/polyfills.js:3116:17
scheduleResolveOrReject http://localhost:4200/polyfills.js:3218:17
invokeTask http://localhost:4200/polyfills.js:2766:17
onInvokeTask http://localhost:4200/vendor.js:72221:24
invokeTask http://localhost:4200/polyfills.js:2765:17
runTask http://localhost:4200/polyfills.js:2533:28
drainMicroTaskQueue http://localhost:4200/polyfills.js:2940:25
vendor.js:70671:5
defaultErrorLogger
http://localhost:4200/vendor.js:70671:5
./node_modules/@angular/core/fesm5/core.js/ErrorHandler.prototype.handleError
http://localhost:4200/vendor.js:70719:9
next
http://localhost:4200/vendor.js:72698:111
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<
http://localhost:4200/vendor.js:68245:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub
http://localhost:4200/vendor.js:141501:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next
http://localhost:4200/vendor.js:141439:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next
http://localhost:4200/vendor.js:141382:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next
http://localhost:4200/vendor.js:141359:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next
http://localhost:4200/vendor.js:141124:25
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit
http://localhost:4200/vendor.js:68229:54
onHandleError/<
http://localhost:4200/vendor.js:72252:57
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke
zone.js:388
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run
zone.js:138
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.runOutsideAngular
http://localhost:4200/vendor.js:72189:16
onHandleError
http://localhost:4200/vendor.js:72252:13
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.handleError
zone.js:392
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runGuarded
zone.js:154
_loop_1
zone.js:677
./node_modules/zone.js/dist/zone.js/</</api.microtaskDrainDone
zone.js:686
drainMicroTaskQueu
e
zone.js:602
si je supprime cette classe de service du composant //import {AuthService} from '../../services/auth.service';
puis le code s'exécute sans erreur. essayé de retourner simple return user
mais une erreur persiste. également essayé de revenir sans observable. Pouvez-vous aider là où je me trompe
L'utilisation de Http
est déconseillée depuis Angular 5. Il ne sera donc pas disponible dans Angular 7.
Vous devez utiliser HttpClient
et NON Http
. Également Content-Type
l'en-tête est ajouté par défaut. Vous n'avez donc pas besoin d'ajouter cela explicitement.
Finalement, http.post
renverrait déjà un observable. Vous n'avez donc pas besoin de l'envelopper dans un of
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) {}
registerUser(user): Observable <any> {
return this.http.post('http://localhost:8888/users/register', user);
}
}
Vous devrez également ajouter HttpClientModule
au tableau imports
de votre AppModule
:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...,
imports: [..., HttpClientModule, ...]
...
})
Et puis dans votre composant:
constructor(private authService: AuthService) {}
...
const user = ...
this.authService.registerUser(user)
.subscribe(response => console.log(response));
...