Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Error: [object Object] resolvePromise

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

like image 312
mahipal singh Avatar asked Oct 28 '18 10:10

mahipal singh


1 Answers

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));
...
like image 119
SiddAjmera Avatar answered Nov 18 '22 08:11

SiddAjmera