title: Angular 'values is undefined' subscribing to mapped http response (request not being made?)
body: <p>I have a simple login form component (<code>LoginComponent</code>) that calls the <code>submitLogin</code> method.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { FormControl } from '@angular/forms';
  import { Router, ActivatedRoute } from '@angular/router';
  import { first }  from 'rxjs/operators';
  
  import { AuthenticationService } from '../../services';
  
  @Component({
      selector: 'login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.scss']
  })
  export class LoginComponent implements OnInit {
      returnURL: string;
  
      u = new FormControl('');
      p = new FormControl('');
  
      constructor(private route: ActivatedRoute, private router: Router, private auth: AuthenticationService) { }
  
      ngOnInit() {
          this.returnURL = this.route.snapshot.queryParams['returnUrl'] || '/';
      }
  
      submitLogin(): void {
          this.auth.login(this.u.value, this.p.value).pipe(first()).subscribe(
              r =&gt; {
                  if (r) {
                      console.log("LoginComponent: r:", r);
                      this.router.navigate([this.returnURL]);
                  }
              },
              error =&gt; {
                  console.error("LoginComponent: Error:", error);
              }
          );
      }
  
  }
  </code></pre>
  
  <p>The error I'm getting is getting printed as <code>LoginComponent: Error: TypeError: 'values' is undefined</code>, and it's getting printed in that error lambda.</p>
  
  <p>The <code>AuthenticationService</code> looks (roughly) like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpResponse } from '@angular/common/http';
  import { BehaviorSubject, Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  import { User } from '../models/user';
  import { APIService } from './api.service';
  
  @Injectable({ providedIn: 'root' })
  export class AuthenticationService {
      private currentUserSubject: BehaviorSubject&lt;User&gt;;
      public currentUser: Observable&lt;User&gt;;
  
      constructor(private http: HttpClient, private api: APIService) {
          this.currentUserSubject = new BehaviorSubject&lt;User&gt;(null);
          this.currentUser = this.currentUserSubject.asObservable();
      }
      login(u: string, p: string): Observable&lt;boolean&gt; {
          return this.api.login(u, p).pipe(map(
              r =&gt; {
                  if (r &amp;&amp; r.status === 200) {
                      this.updateCurrentUser();
                      console.log("returning true");
                      return true;
                  }
                  console.log("returning false");
                  return false;
              }
          ));
      }
  }
  </code></pre>
  
  <p>Notice that all code paths in the map lambda return a boolean value. So this map should never spit out <code>undefined</code> values. Those console logs never happen, by the way.</p>
  
  <p>And my API service is responsible for making calls to a versioned API I have running. It's got a lot of unrelated stuff in it, but the relevant bits are:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
  import { BehaviorSubject, Observable } from 'rxjs';
  import { map, first } from 'rxjs/operators';
  
  @Injectable({ providedIn: 'root' })
  export class APIService {
      public API_VERSION = '1.5';
  
      private cookies: string;
  
      constructor(private http: HttpClient) {}
  
      private do(method: string, path: string, data?: Object): Observable&lt;HttpResponse&lt;any&gt;&gt; {
          const options = {headers: new HttpHeaders({'Content-Type': 'application/json',
                                                     'Cookie': this.cookies}),
                           observe: 'response' as 'response',
                           body: data};
          return this.http.request(method, path, options).pipe(map(r =&gt; {
              //TODO pass alerts to the alert service
              let resp = r as HttpResponse&lt;any&gt;;
              if ('Cookie' in resp.headers) {
                  this.cookies = resp.headers['Cookie']
              }
              console.log("returning resp");
              return resp;
          }));
      }
  
      public login(u, p): Observable&lt;HttpResponse&lt;any&gt;&gt; {
          const path = '/api/'+this.API_VERSION+'/user/login';
          return this.do('post', path, {u, p});
      }
  }
  </code></pre>
  
  <p>Note that again, every code path in the map lambda returns a value. Also note that <code>"returning resp"</code> never appears in the console. I also never see an HTTP request being made in the network panel. What gives? Why isn't it doing the request, and/or what could possibly be causing this error?</p>