Angular Decorator @NgModule

@NgModule()

NgModule is a decorator present in the app.module.ts. And it is imported through the @Angular/core module. @NgModule is basically used for defining the purpose of import like It is used for basically 4 purposes:- 

1. Declarations

2. Imports

3. Providers

4. Bootstrap 

1. Declarations -

In NgModule decorator we pass an Object having declarations as a key through which we define the component as the part of App. Through this, we can declare the component which is used in the app. As an example, AppComponent is byDefault imported when we create an Angular Project by CLI. 

@NgModule({ 

declarations: [ 

AppComponent //App component is declared as the part of the Application 

]}) 

2. Imports -

In Ngmodule decorator, we pass Object having another key as imports. Which is used for importing the 3rd party features in our own project 

@NgModule(

{ 

imports: [ 

BrowserModule //By Default Angular project import browser module

]

}

) 

3. Providers-

It is used for declaring the service file which is used by the project to communicate with other components without using complex @Input and @Output Architecture of communication. 

@NgModule({ 

providers: [./app.service.ts]

}

)

4. Bootstrap -

It is used to let know the angular project that used that component to display the content. By Default AppComponent is included. 

@NgModule(

{ 

bootstrap: [AppComponent] }

)

Note - In Above Angular 6+ app, we can lazy load the service file by 

@Injectable({ 

providedIn: "root"

}

)

But we can also be able to stick with the previous Syntax and we can pass service file name in Providers array.