What is the difference between declarations, providers, and import in NgModule?
Last Updated :
24 Sep, 2020
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
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' ;
import { AppComponent } from './app.component' ;
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...