TypeError: result is null when subscribing to a post request

Question

When I'm trying to subsrcibe to a post request, it always returns the TypeError: result is null

I'm using a Angular CLI that connects with a Spring boot application, with a simple login page. Where I want to save the header of my response in local storage

This is the stacktrace:

"LoginComponent.prototype.login/<@webpack-internal:///../../../../../src/app/components/login/login.component.ts:32:13\nSafeSubscriber.prototype.__tryOrUnsub@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:245:13\nSafeSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:192:17\nSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:133:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMapSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/operators/map.js:88:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nFilterSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/operators/filter.js:92:13\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nMergeMapSubscriber.prototype.notifyNext@webpack-internal:///../../../../rxjs/_esm5/operators/mergeMap.js:156:13\nInnerSubscriber.prototype._next@webpack-internal:///../../../../rxjs/_esm5/InnerSubscriber.js:27:9\nSubscriber.prototype.next@webpack-internal:///../../../../rxjs/_esm5/Subscriber.js:97:13\nonLoad@webpack-internal:///../../../common/esm5/http.js:2310:21\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17\nonInvokeTask@webpack-internal:///../../../core/esm5/core.js:4939:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28\nZoneTask.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:496:24\ninvokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17\n"

This is my login.service.ts:

const httpOptions = {   headers: new HttpHeaders({'Content-type': 'application/json'}) };

@Injectable() export class LoginService {

  private loginUrl = 'https://music-makers.herokuapp.com/login';

  constructor(private http: HttpClient) { }

  public login(user: User): Observable<any> {
    return this.http.post(this.loginUrl, user, httpOptions);   }

And my login.components.ts:

export class LoginComponent implements OnInit {

  model: any = {};

  constructor(private loginService: LoginService, public router: Router) {
  }

  ngOnInit() {
  }

  login() {
    const user = <User>({
      email: this.model.email,
      password: this.model.password,
    });

    console.log('email: ' + user.email + '\npass: ' + user.password);

    this.loginService.login(user)
      .subscribe(
        result => {
          // Handle result
          localStorage.setItem('Authorization', result.headers.get('Authorization'));
          console.log(result);
        },
        error => {
          // Handle error
          console.log('Error');
        },
        () => {
          console.log('complete');
          // No errors, route to new page
        }
      );
  }
}

have u checked your browser network tab? what are you getting? — Paritosh, Feb 09 '18 at 13:25

score 0 · Accepted Answer · answered Feb 09 '18 at 13:35

0

Your service should be use map() to return as an observable collection

public login(user: User): Observable<any> {
   return this.http.post(this.loginUrl, user, httpOptions)
             .map(responce => <any>responce)
             .catch(error => {
                return Observable.throw(error);
             });
 }

answered Feb 09 '18 at 13:35

Ramesh Rajendran

37,412
45
153
234

What you are getting in result? – Ramesh Rajendran Feb 09 '18 at 13:43
Just null, or if you mean the status code is a 200 with an empty body – Souf Feb 09 '18 at 13:44
1

@sofboy : https://stackoverflow.com/questions/27921537/returning-http-200-ok-with-error-within-response-body – Ramesh Rajendran Feb 09 '18 at 13:46
@sofboy But your service should be like what i answered. it is the proper way to use observable in service . – Ramesh Rajendran Feb 09 '18 at 13:50
If we inspect the element, we can see the our header & authorisation with the post. But if we ask for it in our code, the response is null – Souf Feb 09 '18 at 13:56

TypeError: result is null when subscribing to a post request

1 Answers1