What are declaration, imports, provider, exports and bootstrap in Angular Module

Why do we need a module

Let’s say a lot of developers working on a single angular application and creating a component or pipe which contains the same name. Let’s consider one developer created a component called SpinnerComponent and another developer created a component with the same name. By using the modules we can specify which SpinnerComponent need to use in which modules. It gives a clear separation of where need to use each component even though those 2 have the same name.

Every angular application has a single module called app.module. If we open that we can see declaration, imports, provider and bootstrap array. Those exist for different purposes

declaration array In module

declaration array contains the components, directives and pipes of the particular module. If you are creating a custom pipe, component or directive this is the array which you need to use to add those before using in the component.

declarations: [
        AppComponent,
        LandingComponent,
        DialogComponent,
        LoadingSpinnerComponent,
        DemoPipe
    ],

imports array in module

This content other modules which are required by the component. If we want to use Angular reactive form this is the place where you need to import those. Not only inbuild modules you can also import custom modules in here.

imports: [
        BrowserModule,
        HttpClientModule,
        AppRoutingModule,
        FontAwesomeModule,
        ReactiveFormsModule,
        FormsModule
    ],

providers array in module

This array contains the services which is required under that particular module. If we import service to a module it will be available to all the components under that module. But we can import service only just for a single component without importing to a module.

 providers: [ApiCallService]

bootstrap array in module

This contains the entry component of the application. This only exists in the root module. when we are creating an application it creates an app.module root module default.

bootstrap: [AppComponent]

exports array in module

This specifies declarations and modules which is available for a component in other modules. If you have a module to share a few components with other different modules you can use this array to export those before using them in the other modules.

exports: [ SelectDirective, DemoPipe, FormsModule ]