HttpClient instance is undefined in Angular 6 service

Question

I have a service that wraps HttpClient. That service is called by a component. The problem is that when I inject the service in the component constructor it is undefined. Moreover, the service constructor seems to not execute at all as a console.log does not print anything. Any ideas?

@Injectable({
  providedIn: 'root'
})
export class MyHttpService {

  constructor(public httpx: HttpClient) {
        console.log("in the constructor - " + this.httpx) // <-- this is never printed
  }

  call () {
        let reqData = { act: 'R'};
        this.httpx.post('/myurl', reqData).subscribe(result => {
            console.log(result);
          }, error => console.log('There was an error: '));
    }
}

The related module is defined as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import { MyHttpService } from './http.service';

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule, 
    HttpClient
  ],
  declarations: [
    MyHttpService
  ],
  exports: [
    MyHttpService
  ]
})
export class CoreServiceModule {}

The component that calls the service:

@Component({
      selector: 'some-selector',
      templateUrl: 'some-url.html'
    })
export class MyComponent implements OnInit{ 

    constructor(public http:MyHttpService){
          console.log(http);  // <-- this prints undefined
    }

    ngOnInit() {
        let x = this.http.call();  // <-- this fails as http is undefined       
    }


}

And the component module:

@NgModule({
  declarations: [MyComponent],
  exports: [MyComponent],
  imports: [BrowserModule, CoreServiceModule],
  bootstrap: [MyComponent]
})
export class MyModule {}

Your class CoreServiceModule should contain a forRoot() method that returns an object with at least ngModule and providers property. — Florian
– Florian, Commented Jul 20, 2018 at 23:01
You need not add the service to "exports" & "declaration" arrays, instead, you should add it into the "providers" array. — Roger Jacob
– Roger Jacob, Commented Jul 21, 2018 at 4:17
I'm just starting with Angular 6, spent long hours trying to make this work and putting together the question. Also. nobody could give me the answer, so apparently is not that basic. — ps0604
– ps0604, Commented Jul 21, 2018 at 16:15

Thierry · Accepted Answer · 2018-07-21 03:11:00Z

2

Note that I'm new to Angular, but I've done something similar recently and looking at my own similar project, I've spotted a few differences:

1. When injecting the httpClient, it's a private rather than public

constructor(private http: HttpClient) { }

2. I think you need to include

import { HttpClient } from '@angular/common/http';

at the top of your MyHttpService module.

3. Note that you've got the same module define twice under a different name:

HttpClientModule, 
HttpClient

I'd remove one to tidiness sake.

Hope this helps.

UPDATE - 1:

This is what I have in my test app. Hopefully, you'll spot something different but it definitely works for me.

app.module.ts:

…
import { HttpClientModule } from '@angular/common/http';
import { HttpService } from './http.service';
…
@NgModule({
  declarations: [
  …
],
imports: [
    …
    HttpClientModule,
    …
  ],
}],
providers: [HttpService],
bootstrap: [AppComponent]
})
export class AppModule { }

I create a separate file for my http client service.

http.service.ts:

…
import { HttpClient } from '@angular/common/http';
…

@Injectable({
  providedIn: 'root'
})

export class HttpService {

  private _loginUrl = "http://...";

  …

  // inject http client in constructor. Make sure it is imported.

  constructor(private http: HttpService) { }

  // Sample function
  loginUser(user) {
    return this.http.post<any>(this._loginUrl, user);
  }
}

and from my view/component:

login.component.ts:

import { HttpService } from '../http.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  …
  constructor(private _http: HttpService) {
  }

  ngOnInit() {

  }

  loginUser() {
      this._http.loginUser(this.loginUserData).subscribe...
  }
}

edited Jul 21, 2018 at 3:11

answered Jul 20, 2018 at 23:34

Thierry

6,49614 gold badges78 silver badges136 bronze badges

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

8 Comments

ps0604 Over a year ago

Thanks, I didn't post all the imports, I'm already importing HttpClient. I tried with private and public, and get the same error. I also trying importing only the HttpClientModule, but still didn't help.

Thierry Over a year ago

I've added more details in my answer based on my solution. Maybe this will help.

Thierry Over a year ago

Note that I've had to edit my additional details a couple of times as I had missed something. One important part I had omitted was the providers. I added it but I've removed details that were required to deal with JWT so I'm not 100% sure whether or not this is how you define a single provider.

ps0604 Over a year ago

The only difference I could see with my code is that you have providers: [MyHttpService], I tried that and didn't work either, sorry :(

ps0604 Over a year ago

My bad, I meant import, BankModule in App module

|

Florian · Accepted Answer · 2018-07-20 23:09:10Z

1

You should try something like that, do not forget to importe ModuleWithProviders interface from @angular/core.

export class CoreServiceModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreServiceModule,
      providers: [MyHttpService]
    }
  }
}

Note that you need to import this "shared module" in your app.module.ts, and when you declare it in the app.module, you must call forRoot() method. You are then able to use this singleton anywhere in your application without any risk to be re-instanciated.

edited Jul 20, 2018 at 23:09

answered Jul 20, 2018 at 23:03

Florian

1,44811 silver badges16 bronze badges

4 Comments

ps0604 Over a year ago

Is this native Angular 6? I thought that @NgModule is used only as a decoration

ps0604 Over a year ago

I still get the http undefined, sorry :(

Florian Over a year ago

In your ngModule, do you have imports: CoreServiceModule.forRoot() ?

Florian Over a year ago

Maybe you could share code with floobits or something ? Angular DI fails to instanciate the service, but I don't see why

mpontsasa · Accepted Answer · 2021-02-16 07:32:48Z

1

I had a similar issue:

this.httpx is undefined

For my greatest surprise, changing the function in the service to arrow function solved the problem:

  call = () => {
        let reqData = { act: 'R'};
        this.httpx.post('/myurl', reqData).subscribe(result => {
            console.log(result);
          }, error => console.log('There was an error: '));
    }

Anytime something of this is undefined, first thing I check is if "arrowing" the function helps. More times than what I'm comfortable with, it does. I must assume that this is the doing of the good-old javascript this-fiasco.

edited Feb 16, 2021 at 7:32

answered Jan 29, 2021 at 12:39

mpontsasa

318 bronze badges

1 Comment

user2233949 Jan 22 at 18:02

This actually just worked for me too. I've been chasing an error in a service of mine for hours now and doubt I would have thought to change a method on a class into an arrow func. That's just not my code style. Gotta love javascript.

Collectives™ on Stack Overflow

HttpClient instance is undefined in Angular 6 service

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related