CODEWITHSUNDEEP
typescriptangular6angular-httpclientangular-module
VIVEK
VIVEK

Reputation: 107

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

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.

Upvotes: 4

Views: 2284

Answers (1)

Jake Neumann
Jake Neumann

Reputation: 380

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.

Upvotes: 3

Related Questions