Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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.
  • 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.
  • 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.

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.
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

javascript




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


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

app.module.ts

javascript




// 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 { }


app.component.html

html




<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>


Output:



Last Updated : 24 Sep, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads