Angular Unable to Init Service (HttpClient) in a Class

Question

I want to isolate http interactions by creating data access objects from a class so that in a component I might simply get data like this:

// dashboard.component
import { AppUser } from './appuser.service'

export class DashboardComponent implements OnInit {
  user: AppUser = new AppUser();

  constructor() { }

  ngOnInit() {
    let id = JSON.parse(window.localStorage.getItem('session')).userId;
    this.user.find(id) // 'find' is from base class
      .subscribe(
        // handle user data
      );
  }
}

I have defined a base class and a sub class like this:

// base-resource.service
import { HttpClient } from '@angular/common/http';
...
export class BaseResource {
  private fullpath: string;
  protected http: HttpClient;

  constructor (path: string) {
    this.fullpath = path;
  }

  find (id): Observable<Object> {
    return this.http.get(this.fullpath + '/' + id); // this line throws Error!
  }
}

// app-user.service
...
export class AppUser extends BaseResource {
  constructor(data?) {
    super('api/appusers');
  }
}

However this generates an error: ERROR TypeError: Cannot read property 'get' of undefined from within the base class function.

My 'AppUser' instance is clearly inheriting find from 'BaseResource', but find is picking up the 'AppUser' instance as the value of this and http is not available. I have tried declaring http as public and private as well as protected, but that had no effect. I imagine I'm missing some bigger picture of how to extend classes.

As specifically as possible, i think my question is in how to abstract functions to a base class when they need access to the base class's context.

(using Angular 6.0.4)

EDIT I updated the title as it became clear that this is a problem of instantiating the HttpClient service in a class.

Answer 1

The error is because nothing is instantiating HttpClient, so it is undefined when you come to use it.

You should inject HttpClient into AppUser, and pass it into BaseResource via the constructor

export class AppUser extends BaseResource {
  constructor(HttpClient http) {
    super(http, 'api/appusers');
  }
}

And in base-resource.service

import { HttpClient } from '@angular/common/http';
...
export class BaseResource {
  private fullpath: string;
  protected http: HttpClient;

  constructor (httpClient: HttpClient, path: string) {
    this.fullpath = path;
    this.http = httpClient;
  }

  find (id): Observable<Object> {
    return this.http.get(this.fullpath + '/' + id); // this line throws Error!
  }
}