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

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.
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.
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.
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
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 applicationimport { 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 applicationimport { AppComponent } from './app.component';// providers for the applicationimport { 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:
bunnyram19
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
Angular PrimeNG Calendar Component
What is AOT and JIT Compiler in Angular ?
How to bundle an Angular app for production?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills