title: Angular 6 HttpClient.get Observable does not assign value
body: <p>I suppose that the answer will be very obvious, but still it evades me. I'm new on working with observables, and now I'm facing issues assigning a value from one. I had success if I define it (this._apps) as an Observable and asking from the view to the service using subscribe (But for my taste is was way convoluted (three levels inside a map just to return another observable with the array and then another function to subscribe the previous to assign the variable and another subscription in the view to finally show the information), inefficient and on top of that I could not get it "right" again). The task is very simple. Given the class Application</p>
  
  <pre><code>export class Application {
    name: string;
    baseUrl: string;
    deprecated: boolean;
  }
  </code></pre>
  
  <p>And the service (just the relevant code)</p>
  
  <pre><code>private _apps: Application[] = [];
  
  constructor(private _http: HttpClient) {
    this.getAllApplications().subscribe(apps =&gt; {
      console.log('Apps subscriber');
      this._apps = apps;
      console.log('Apps subscriber Ends ' + apps);
    },
    err =&gt; {
      console.log(err.status); // 401
      console.log(err.error.error); // undefined
      console.log(JSON.parse(err.error).error); // unauthorized
    });
  }
  
  private getAllApplications() {
    return this._http.get&lt;Application[]&gt;('http://development:4300/api/v1/apps');
  }
  </code></pre>
  
  <p>From the constructor the function which gets the information from WebAPI is triggered, and the remote call is successful, but the variable this._apps is an empty array if I try to call it from anywhere in the code. I could not determine the type of the parameter "apps" in the subscribe function, but for some reason it cannot be assigned and the best answer given is that it is a function (See my first update) in one of my tries. Currently it returns in the console "[object Object]", but apps[0] gives undefined, so it is an empty Array.</p>
  
  <p>This is the console output, just starting the application:</p>
  
  <p>Angular is running in the development mode. Call enableProdMode() to enable the production mode.
  Refreshing apps cache calling <a href="http://development:4300/api/v1/atbc-apps" rel="nofollow noreferrer">http://development:4300/api/v1/atbc-apps</a> 
  Apps subscriber
  Apps subscriber Ends [object Object]</p>
  
  <p>I was trying <a href="https://stackoverflow.com/questions/44940695/how-to-convert-observableany-to-array#44940857">this solution</a> among many others that I forget (to use the more modern HttpClient instead the Http I used before), so what I'm doing wrong? </p>
  
  <p><strong>Update 1</strong></p>
  
  <p>I changed the constructor to this:</p>
  
  <pre><code>constructor(private _http: HttpClient) {
    this.getAllApplications().subscribe(apps =&gt; {
      console.log('apps length ' + apps.length);
      this._apps = apps;  // Remember private _apps: Application[] = [];
      console.log('Apps subscriber Ends ' + apps.toString);
    },
      err =&gt; {
        console.log(err.status); // 401
        console.log(err.error.error); // undefined
        console.log(JSON.parse(err.error).error); // unauthorized
      });
  }
  </code></pre>
  
  <p>and the declaration of the function called into this:</p>
  
  <pre><code>private getAllApplications(): Observable&lt;Application[]&gt; {
     // the exactly the same as before
  }
  </code></pre>
  
  <p>And now I got from the console this:</p>
  
  <p><em>apps length undefined</em></p>
  
  <p><em>Apps subscriber Ends 
      <code>function () {
          if (this instanceof Promise) {
              return PROMISE_OBJECT_TO_STRING;
          }
          return originalObjectToString.apply(this, arguments);
      }</code></em></p>
  
  <p>That is the function I was talking about. Any ideas about why even though there is no errors (nor at compile time, neither at runtime), the returning object is not a real Application array?</p>