title: Http subscribe not working on Service Angular
body: <p>i'm working on a project and i need to retrieve data from a custom server. I made an httpclient service for handle requests and i encountered this problem: when i try to make the subscription for pass data to the component, nothing happens, but if i do the subscription in the component, evetything works fine. I reassume the code below:</p>
  <p>The component:</p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Component, OnInit } from '@angular/core';
  import { BehaviorSubject, catchError, map, Observable, of} from 'rxjs';
  import { Food } from '../api/api-models';
  import { ApiService } from '../api/api.service';
  
  @Component({
    selector: 'app-in-home-list',
    templateUrl: './in-home-list.component.html',
    styleUrls: ['./in-home-list.component.css']
  })
  export class InHomeListComponent implements OnInit {
  
    res: Food[];
    error: string;
  
    constructor( private api: ApiService, private http: HttpClient){
    }
  
    ngOnInit() {
      //this.http.get&lt;Food[]&gt;('https://localhost:5001/').pipe(catchError(this.api.handleError)).subscribe({next: r =&gt; this.res = r, error: e =&gt; this.error = e});
      [this.res, this.error] = this.api.getInHomeList();
    }
  }
  </code></pre>
  <p>The commented line is the one that works here, but not in the service, the one not commented is what i want to properly work.</p>
  <p>The service:</p>
  <pre><code>import { Injectable} from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  import { Food } from './api-models';
  import { catchError, throwError } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  
  export class ApiService {
  
    private result: Food[];
    private error: string;
  
    constructor( private http: HttpClient) {
  
    }
  
    getInHomeList(): [Food[], string] {
  
      this.http.get&lt;Food[]&gt;('https://localhost:5001/').pipe(catchError(this.handleError)).subscribe({next: r =&gt; this.result = r, error: e =&gt; this.error = e});
  
      return [this.result, this.error];
    }
  
    handleError(error: any) {
      let errorMessage = &quot;&quot;;
      if (error.error instanceof ErrorEvent) {
          // client-side error
          errorMessage = `Error: ${error.error.message}`;
      } else {
          // server-side error
          errorMessage = `Error Code: ${error.status}\nMessage: ${error.message}`;
      }
      console.log(errorMessage);
      return throwError(() =&gt; new Error(errorMessage))
    }
  }
  </code></pre>
  <p>The @NgModule in app.module.ts:</p>
  <pre><code>@NgModule({
    declarations: [
      AppComponent,
      InHomeListComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
    ],
    providers: [
      ApiService
    ],
    bootstrap: [AppComponent]
  })
  </code></pre>
  <p>I'm kinda new to Angular so maybe i'm missing something, or i didn't understand well how really Observable works.</p>