8

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

3
  • Why are you wrapping an observable inside another observable?
    – user184994
    Commented Oct 28, 2018 at 10:28
  • this.http.post('http://localhost:8888/users/register', user, {headers:headers}) is already Observable why are you returning it's with of Commented Oct 28, 2018 at 10:28
  • i tried with simplest way import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class AuthService { user="hi"; constructor() { } registerUser(user){ return this.user; } } still same error coming Commented Oct 28, 2018 at 10:37

1 Answer 1

8

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));
...
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.