Why do need to import HttpClientModule in app.module.ts when I've already imported in a separate module where it is used

user_13573371 0
Viewed 157

I have 2 modules (AppModule and BookModule), BookModule's component injected a service which uses HttpClient so I imported HttpClientModule in it. But application still needs to import HttpClientModule in AppModule.
As per my understanding, we need import module where it is needed instead in RootModule.

here is the CodeSanbox link

angular
3 Answers

If you import any module like HttpClientModule in AppModule then components, services, etc, of the imported module will be accessible from every component of your application.

BTW, may be you forgot to import BookModule in AppModule and for this reason you still need to import HttpClientModule in AppModule though you already imported HttpClientModule in BookModule. However, if BookModule is imported inside AppModule you don't have to import HttpClientModule in AppModule.

user_134406690

I checked your code, you haven't import your Book Module within App Module, Please modify your app.module.ts like below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { PageNotFoundComponent } from './not-found/not-found.component';
import { BookModule } from './book/book.module'; // Import Book Module

@NgModule({
  declarations: [AppComponent, PageNotFoundComponent],
  imports: [
    BrowserModule, 
    AppRoutingModule, 
    BookModule // Add your Module inside the imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now it will work fine without error

I also have attached the screenshot enter image description here

user_90095830

as per @Eliseo comment, i've clear my doubt about provider.

if the service provided in root scope than its dependency need to be imported in appmodule.

user_135733710
Related