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

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

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

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

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

taran910

Follow

Improve

Article Tags :

• Web Technologies
• AngularJS
• AngularJS-Misc