Angular 6: Why does HttpClient work even without importing HttpClientModule?

Question

I installed a barebones angular 6 project by running ng new first-project and I got a default app module and component. Now I created a new module and a component within it by running ng generate module view and ng generate component view/view. Now my app.module.ts looks like this

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TestService } from './test.service';
import { ViewModule } from './view/view.module';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        FormsModule,
        HttpClientModule,
        ViewModule
    ],
    providers: [
        TestService
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

view.module.ts

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { ViewComponent } from './view/view.component';

@NgModule({
    declarations: [ViewComponent],
    imports: [
        CommonModule,
        FormsModule
    ],
    exports: [
        ViewComponent
    ]
})
export class ViewModule { }

view.component.ts

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

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {

    username: string = "";
    response: any;

    constructor (private http: HttpClient) { }

    search () {
        this.http.get('https://api.github.com/users/' + this.username)
        .subscribe((response) => {
            this.response = response;
            console.log(this.response);
        });
    }

}

So the thing is, I didn't import HttpClientModule inside view.module.ts but instead, did that inside app.module.ts and I directly imported HttpClient inside view.component.ts and I even got a response successfully. To test if this happens regularly, I removed the FormsModule import from view.module.ts to see if [(ngModel)] that I'm using inside view.component.html still works, as I already imported FormsModule inside app.module.ts, but it doesn't.

My question is why does HttpClientModule let me import it and use it inside different modules and why don't the other modules work that way? I tried to find a reason online but couldn't find it. Can anyone please tell me the reason? Thanks.

Additional Info: 1. HttpClient doesn't work if I don't import HttpClientModule anywhere. So the module needs to be imported somewhere within the project. 2. It's working the other way also i.e. by importing the module inside view.module.ts and using it inside app.component.ts. This means, I can use HttpClient all over the project by importing the module just once.

Prashant Pimpale · Accepted Answer · 2019-01-27 13:29:47Z

3

According to the official document of Angular, one is not required to import HttpClientModule in your view.module.ts, as long that you import it in your AppModule.ts.

Here is a quote from the site:

Before you can use the HttpClient, you need to import the Angular HttpClientModule. Most apps do so in the root AppModule. Having imported HttpClientModule into the AppModule, you can inject the HttpClient into an application class as shown in the following ConfigService example.

edited Jan 27, 2019 at 13:29

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Jan 27, 2019 at 13:25

Jake Neumann

3804 silver badges13 bronze badges

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

2 Comments

darko99 Over a year ago

What brought me here is this comment from http.d.s: To use the same instance of HttpInterceptors for the entire app, import the HttpClientModule only in your AppModule, and add the interceptors to the root application injector. If you import HttpClientModule multiple times across different modules (for example, in lazy loading modules), each import creates a new copy of the HttpClientModule, which overwrites the interceptors provided in the root module.

Gerros Over a year ago

What I am experiencing currently is, that without importing the HttpClientModule at all (not in the app module, not in any feature module) the injection of HttpClient in services works fine... no problems... is this valid? or something wrong if you do not import HttpClientModule and use HttpClient?

Collectives™ on Stack Overflow

Angular 6: Why does HttpClient work even without importing HttpClientModule?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related