title: Angular 7 - How to capture 500 server error on http.post when returning a new Promise?
body: <p>I'm getting a 500 server error (which I expect) but my current implementation does not capture the error. Instead of capturing the error in the component and handling it, the app produces a 500 server error in the browser console and the execution gets halted and the loading spinner remains. I'm having a hard time figuring this out. I've restructured the promise a few different ways with no luck. </p>
  
  <p>** Update **</p>
  
  <p>I updated the service to use reject in the promise but that still did not work. </p>
  
  <p>Component code</p>
  
  <pre><code>save() {
      this.loading = true;  this.itemService.updateItems(this.updatedItems, this.activeCompanyId).then(() =&gt; {
         this.loading = false;
       }).catch((err) =&gt; {
         console.log("Error updating items", err);
       });
    }
  </code></pre>
  
  <p>Service code</p>
  
  <pre><code>updateItems(items:Item[], companyId) {
      let headers = new HttpHeaders()
        .set("Content-Type", "application/json")
        .set("CompanyId", companyId);
  
      return new Promise((resolve, reject) =&gt; {
        this.http.post(`${this._config.API_URL}`, items, { headers }).subscribe(
          data =&gt; {
            resolve(data);
          },
          err =&gt; {
            console.log('Error updating items', err);
            reject(err);
          }
        );
      });
    }
  </code></pre>