title: TypeError: result is null when subscribing to a post request
body: <p>When I'm trying to subsrcibe to a post request, it always returns the TypeError: result is null </p>
  
  <p>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 </p>
  
  <p>This is the stacktrace: </p>
  
  <blockquote>
    <p>"LoginComponent.prototype.login/&lt;@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"</p>
  </blockquote>
  
  <p>This is my login.service.ts: </p>
  
  <pre><code>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&lt;any&gt; {
      return this.http.post(this.loginUrl, user, httpOptions);   }
  </code></pre>
  
  <p>And my login.components.ts: </p>
  
  <pre><code>export class LoginComponent implements OnInit {
  
    model: any = {};
  
    constructor(private loginService: LoginService, public router: Router) {
    }
  
    ngOnInit() {
    }
  
    login() {
      const user = &lt;User&gt;({
        email: this.model.email,
        password: this.model.password,
      });
  
      console.log('email: ' + user.email + '\npass: ' + user.password);
  
      this.loginService.login(user)
        .subscribe(
          result =&gt; {
            // Handle result
            localStorage.setItem('Authorization', result.headers.get('Authorization'));
            console.log(result);
          },
          error =&gt; {
            // Handle error
            console.log('Error');
          },
          () =&gt; {
            console.log('complete');
            // No errors, route to new page
          }
        );
    }
  }
  </code></pre>