I am using Angular 7 and calling simple service using 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});
}
}
while compiling code is ok but when it hits register url and component then it gives error
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
if I remove this service class from component //import {AuthService} from '../../services/auth.service';
then code runs without error.
tried with returning simple return user
but still error comes.
also tried with returning without observable.
Can you help where I am doing wrong
The use of Http
was deprecated since Angular 5. So it won't be available in Angular 7.
You should be using HttpClient
and NOT Http
. Also, the Content-Type
header is added by default. So you don't need to add that explicitly.
Finally, http.post
would already return an Observable. So you don't need to wrap it in an 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);
}
}
You'll also have to add HttpClientModule
to the imports
array of your AppModule
:
import { HttpClientModule } from '@angular/common/http';
@NgModule({
...,
imports: [..., HttpClientModule, ...]
...
})
And then in your Component:
constructor(private authService: AuthService) {}
...
const user = ...
this.authService.registerUser(user)
.subscribe(response => console.log(response));
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With