Cannot read property 'get' of undefined when use http in service in Angular 6

Question

I have two services. One is core service and one specific service. In core service I make http request. In Angular 6 it is does not work. (In Angular 7 works perfect).

In Angular 6 I get Cannot read property 'get' of undefined on http.

Here is my code:

query-service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class QueryService {
  protected apiUrl: string = 'http://localhost:4200';

  constructor(private http: HttpClient) {}

  public query(uri: string): Observable<any> {
    const url = this.apiUrl + '/' + uri;

    return this.http.get(url, {responseType: 'json', withCredentials: true});
  }
}

client-search.service.ts

import {Injectable} from '@angular/core';
import {Client} from '../models/client';
import {Observable} from 'rxjs';
import {QueryService} from '../services/query.service';
import {map} from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ClientSearchService extends QueryService {

  public list(uri: string): Observable<any> {
    const clientResponse = this.query(uri);

    return clientResponse.pipe(
      map(data => data.collection),
      map((records: Client[]) => records.map((client: Client) => Client.factory(client)))
    );
  }

}

client-search.component.ts

import {Component, OnInit} from '@angular/core';
import {Client} from '../models/client';
import {ClientSearchService} from './client-search.service';
import {ClientsShareService} from '../services/clients-share.service';

@Component({
  selector: 'app-crm-client-search',
  templateUrl: './client-search.component.html',
  styleUrls: ['./client-search.component.css']
})

export class ClientSearchComponent implements OnInit {
  public client: Client = new Client();
  public clientList: Client[];

  constructor(public clientSearchService: ClientSearchService, public clientsShareService: ClientsShareService) {
  }

  ngOnInit() {

    const clientsList = this.clientSearchService.list('assets/files/clients.json');

    clientsList.subscribe((clients: Client[]) => {
      this.clientList = clients;
      this.clientsShareService.setData(clients);
    });

  }

}

Have you imported the HttpClientModule into your app.module.ts? — Shane
– Shane, Commented Mar 4, 2019 at 11:35
@Shane if he doesn't import it, will get the StaticInjectorError not this error. — Lia
– Lia, Commented Mar 4, 2019 at 11:43
I have imported HttpClientModule. Problem is that the same application works on Angular 7 but do not work on Angular 6 — Daniel Częstki
– Daniel Częstki, Commented Mar 4, 2019 at 11:46

Jota.Toledo · Accepted Answer · 2019-03-04 12:47:35Z

1

Your child class only has the default constructor, but the parent does not have one. So angular is creating an instance of ClientSearchService without injecting the HttpClient service.

As it is, you currently have this:

ClientSearchService extends QueryService {
  constructor(){
    super();
  }
}

You need to add a non-default constructor to the child class as follows:

export class ClientSearchService extends QueryService{
 constructor(http: HttpClient){
   super(http)
 }
 ...
}

edited Mar 4, 2019 at 12:47

answered Mar 4, 2019 at 11:59

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Daniel Częstki Over a year ago

But Why constructor from parent is not exists in child like in PHP :) ?

Jota.Toledo Over a year ago

Most likely the behavior was changed as this is a common pitfall

Jota.Toledo Over a year ago

Cant tell, I havent used php. But in any OOP language, if you extend a class without default constructor, then the child class has to explicitly call the non-default parent constructor.

Daniel Częstki Over a year ago

In Angular 7 it works without create constructor in child class

Jota.Toledo Over a year ago

@DanielCzęstki Most likely the result of github.com/angular/angular/pull/24014

Collectives™ on Stack Overflow

Cannot read property 'get' of undefined when use http in service in Angular 6

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related