title: HTTP request of 200 triggers "catch" operation in Angular 5
body: <p>I have a REST Login Operation that has been written in Java (for the server side). JWT is also used.</p>
  
  <p>The client side is using the HTTP client under Angular 5 to access / execute the REST API.</p>
  
  <p>What is taking place is that the Login REST functionality (using HTTP client) is executed. Afterwards, information is returned and the Return Code Status is 200 (meaning everything is OK).</p>
  
  <p>According to the Chrome Browser "Network" tab, the RC comes back with a 200.</p>
  
  <p>Even though this is the case, the "catch" statement (associated with the REST Login call) is <em>always</em> executed.</p>
  
  <p>The code is listed below.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>TIA</p>
  
  <p><strong>Info from browser</strong></p>
  
  <p><a href="https://i.stack.imgur.com/zmcQU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zmcQU.png" alt="enter image description here"></a></p>
  
  <p><strong>console log</strong></p>
  
  <pre><code>admin-services.service.ts:208 TypeError: Cannot read property 'json' of null
      at MapSubscriber.eval [as project] (admin-services.service.ts:176)
      at MapSubscriber._next (map.js:79)
      at MapSubscriber.Subscriber.next (Subscriber.js:91)
      at MapSubscriber._next (map.js:85)
      at MapSubscriber.Subscriber.next (Subscriber.js:91)
      at FilterSubscriber._next (filter.js:90)
      at FilterSubscriber.Subscriber.next (Subscriber.js:91)
      at MergeMapSubscriber.notifyNext (mergeMap.js:151)
      at InnerSubscriber._next (InnerSubscriber.js:25)
      at InnerSubscriber.Subscriber.next (Subscriber.js:91)
  (anonymous) @ admin-services.service.ts:208
  CatchSubscriber.error @ catchError.js:105
  MapSubscriber._next @ map.js:82
  Subscriber.next @ Subscriber.js:91
  MapSubscriber._next @ map.js:85
  Subscriber.next @ Subscriber.js:91
  FilterSubscriber._next @ filter.js:90
  Subscriber.next @ Subscriber.js:91
  MergeMapSubscriber.notifyNext @ mergeMap.js:151
  InnerSubscriber._next @ InnerSubscriber.js:25
  Subscriber.next @ Subscriber.js:91
  onLoad @ http.js:2270
  ZoneDelegate.invokeTask @ zone.js:425
  onInvokeTask @ core.js:4744
  ZoneDelegate.invokeTask @ zone.js:424
  Zone.runTask @ zone.js:192
  ZoneTask.invokeTask @ zone.js:499
  invokeTask @ zone.js:1540
  globalZoneAwareCallback @ zone.js:1566
  XMLHttpRequest.send (async)
  scheduleTask @ zone.js:2933
  ZoneDelegate.scheduleTask @ zone.js:411
  onScheduleTask @ zone.js:301
  ZoneDelegate.scheduleTask @ zone.js:405
  Zone.scheduleTask @ zone.js:236
  Zone.scheduleMacroTask @ zone.js:259
  (anonymous) @ zone.js:2966
  proto.(anonymous function) @ zone.js:1366
  (anonymous) @ http.js:2366
  Observable._trySubscribe @ Observable.js:172
  Observable.subscribe @ Observable.js:160
  subscribeToResult @ subscribeToResult.js:23
  MergeMapSubscriber._innerSub @ mergeMap.js:138
  MergeMapSubscriber._tryNext @ mergeMap.js:135
  MergeMapSubscriber._next @ mergeMap.js:118
  Subscriber.next @ Subscriber.js:91
  ScalarObservable._subscribe @ ScalarObservable.js:51
  Observable._trySubscribe @ Observable.js:172
  Observable.subscribe @ Observable.js:160
  MergeMapOperator.call @ mergeMap.js:92
  Observable.subscribe @ Observable.js:157
  FilterOperator.call @ filter.js:61
  Observable.subscribe @ Observable.js:157
  MapOperator.call @ map.js:57
  Observable.subscribe @ Observable.js:157
  MapOperator.call @ map.js:57
  Observable.subscribe @ Observable.js:157
  CatchOperator.call @ catchError.js:80
  Observable.subscribe @ Observable.js:157
  AdminLoginComponent.onSubmit @ admin-login.component.ts:80
  (anonymous) @ AdminLoginComponent.html:19
  handleEvent @ core.js:13581
  callWithDebugContext @ core.js:15090
  debugHandleEvent @ core.js:14677
  dispatchEvent @ core.js:9990
  (anonymous) @ core.js:12332
  schedulerFn @ core.js:4351
  SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
  SafeSubscriber.next @ Subscriber.js:186
  Subscriber._next @ Subscriber.js:127
  Subscriber.next @ Subscriber.js:91
  Subject.next @ Subject.js:56
  EventEmitter.emit @ core.js:4319
  NgForm.onSubmit @ forms.js:5751
  (anonymous) @ AdminLoginComponent.html:19
  handleEvent @ core.js:13581
  callWithDebugContext @ core.js:15090
  debugHandleEvent @ core.js:14677
  dispatchEvent @ core.js:9990
  (anonymous) @ core.js:10611
  (anonymous) @ platform-browser.js:2628
  ZoneDelegate.invokeTask @ zone.js:425
  onInvokeTask @ core.js:4744
  ZoneDelegate.invokeTask @ zone.js:424
  Zone.runTask @ zone.js:192
  ZoneTask.invokeTask @ zone.js:499
  invokeTask @ zone.js:1540
  globalZoneAwareCallback @ zone.js:1566
  core.js:1427 ERROR Error: Unexpected Error Code: undefined
      at CatchSubscriber.eval [as selector] (admin-services.service.ts:216)
      at CatchSubscriber.error (catchError.js:105)
      at MapSubscriber._next (map.js:82)
      at MapSubscriber.Subscriber.next (Subscriber.js:91)
      at MapSubscriber._next (map.js:85)
      at MapSubscriber.Subscriber.next (Subscriber.js:91)
      at FilterSubscriber._next (filter.js:90)
      at FilterSubscriber.Subscriber.next (Subscriber.js:91)
      at MergeMapSubscriber.notifyNext (mergeMap.js:151)
  at InnerSubscriber._next (InnerSubscriber.js:25)
  </code></pre>
  
  <p><strong>admin-services.service.ts</strong></p>
  
  <pre><code>[... snip ...]
  
    adminLogin(username, password): Observable&lt;boolean&gt; {
      let url = `${this._apiRoot}/login`;
      let tokenResp = {};
  
      return this.http.post(url, JSON.stringify({ username: username, password: password }))
        .map((response: Response) =&gt; {
  
          // login successful if there's a token in the response
          let token = response.json() &amp;&amp; response.json().token;
  
          if (token) {
  
            let t = JWT(token);
  
            console.log("-- what is in the token --");
            console.log(t);
  
            //initiialize
            let setUser: User = ANONYMOUS_USER;
  
            // need to set the value here
            this.userLoggedIn.next(setUser);
  
            // store username and jwt token in local storage to keep user logged in between page refreshes
            // =&gt; SET BACK: localStorage.setItem('currentUser', JSON.stringify(this.userLoggedIn));
            // =&gt; SET BACK: this.userLoggedIn = JSON.parse(localStorage.getItem('currentUser'));
  
            // return true to indicate successful login
            return true;
          } else {
            // throw an error that the token was "whack"
            return Observable.throw(
              new Error("APX: the token was not set properly"));
          }
          //return response.json();
        })
        .catch(e =&gt; {
          console.error(e);
  
          if (e.status === 401) {
            return Observable.throw(
              new Error("Error Code : 401 - Unauthorized Access To Server "));
          }
  
          return Observable.throw(
            new Error( "Unexpected Error Code: " + e.status ));
        });
    }
  [... snip ...]
  </code></pre>
  
  <p><strong>UPDATE</strong>
  There is no response.</p>
  
  <p>The login is using JWT. The information comes back as part of the header.</p>
  
  <pre><code>Authorization:Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0ZXJyZW5jZWRhcmJ5IiwiaWQiOjQ4LCJ0ZW5hbnRpZCI6MjU2LCJrZXlpZCI6MCwidXNlcm5hbWUiOiJ0ZXJyZW5jZWRhcmJ5IiwiZW1haWxhZGRyIjoidGVycmVuY2VAZGFyYnkuY29tIiwicm9sZSI6MSwiZmlyc3RuYW1lIjoidGVycmVuY2UgIiwibGFzdG5hbWUiOiJkYXJieSIsImV4cCI6MTUxODUwNTcwMX0.FNlvx-3WePXWEoqkDLfMw3GkkNcy_S-V3TcikBTfzOo
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong>code ran</strong></p>
  
  <pre><code>return this.http.post(url, JSON.stringify({ username: username, password: password }))
        .map((response: Response) =&gt; {
  
          console.log( "==&gt;  looking for the answer - begin ");
          console.log( response );
          console.log( "==&gt;  looking for the answer - end ");
  </code></pre>
  
  <p><strong>values produced</strong></p>
  
  <pre><code>NgForm {submitted: true, _directives: Array(2), ngSubmit: EventEmitter, form: FormGroup}control: (...)controls: (...)dirty: (...)disabled: (...)enabled: (...)errors: (...)form: FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: false, touched: true, …}formDirective: (...)invalid: (...)ngSubmit: EventEmitter {_isScalar: false, observers: Array(1), closed: false, isStopped: false, hasError: false, …}path: (...)pending: (...)pristine: (...)status: (...)statusChanges: (...)submitted: truetouched: (...)untouched: (...)valid: (...)value: (...)valueChanges: (...)_directives: (2) [NgModel, NgModel]__proto__: ControlContainer
  admin-login.component.ts:72  getting ready to go call the service 
  admin-login.component.ts:76  values for id and password terrencedarby ----- 3333333333
  admin-services.service.ts:175 ==&gt;  looking for the answer - begin 
  admin-services.service.ts:176 null
  admin-services.service.ts:177 ==&gt;  looking for the answer - end 
  </code></pre>