What is the difference between declarations, providers, and import in NgModule?

Let us first discuss about these terms:

  • Declarations:
    • Declarations are used to declare components, directives, pipes that belongs to the current module. 
    • Everything inside declarations knows each other.
    • Declarations are used to make directives (including components and pipes) from the current module available to other directives in the current module.
    • Selectors of directives, components or pipes are only matched against the HTML if they are declared or imported.

    Example of declaration:

    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [AppComponent],
      )}
    
  • Providers:
    • Providers are used to make services and values known to dependency injection.
    • They are added to the root scope and they are injected to other services or directives that have them as dependency.

    Example of Provider:

    import { StateService } from './services/state.service';   
    
    @NgModule({
      providers: [ StateService ],
      )}
    
  • Imports:
    • Imports makes the exported declarations of other modules available in the current module.
    • It is used to import supporting modules likes FormsModule, RouterModule, CommonModule etc.

    Example of Import:

    import { BrowserModule } from '@angular/platform-browser';
    
    @NgModule({
      imports: [BrowserModule],
      )}
    

Differences:



Declarations

Providers

Imports

Declarations are used to make directives. Providers are used to make services. Imports makes the exported declarations of other modules available in the current module.i
Used to declare components, directives, pipes that belongs to the current module. Used to inject the services required by components, directives, pipes in our module. Used to import supporting modules likes FormsModule, RouterModule, etc.
Ex. AppComponent. Ex. StateService. Ex. BrowserModule.

Defined in Declarations array in @NgModule

@NgModule({

 declarations: [  ],

 )}

Defined in Providers array in @NgModule.



@NgModule({

providers: [ ],

)}

Defined in imports array in @NgModule.

@NgModule({

imports: [],

)}

An example in which all three declarations, imports and providers are used:

The providers used in this project is custom service named UserService.

ng g s User

user.service.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

import { Injectable } from '@angular/core';
  
@Injectable({
  providedIn: 'root'
})
export class UserService {
  
  constructor() { }
}

chevron_right


This UserService is used as provider in app.module.ts.

app.module.ts

filter_none

edit
close

play_arrow

link
brightness_4
code

// imports for the application
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
// declarations for the application
import { AppComponent } from './app.component';
// providers for the application
import { UserService } from './user.service';
  
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [UserService],
  bootstrap: [AppComponent]
})
export class AppModule { }

chevron_right


app.component.html

filter_none

edit
close

play_arrow

link
brightness_4
code

<h1>GeeksforGeeks</h1>
<ul>
    <li>imports in this app: BrowserModule, 
      AppRoutingModule, HttpClientModule, FormsModule</li>
    <li>declarations in this app: AppComponent</li>
    <li>providers in this app: UserService</li>
</ul>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.