What are the @NgModule Metadata Properties?

The @NgModule decorator identifies AppModule as a NgModule class.

The @NgModule takes a metadata object that tells Angular how to compile and launch the application.

The NgModule’s important metadata properties are as follows –

1.          providers

2.          declarations

3.          imports

4.          exports

5.          entryComponents

6.          bootstrap

7.          schemas

8.          id

The @NgModule class with the decorator and metadata properties -

@NgModule({

  providers?: Provider[]

  declarations?: Array<Type<any> | any[]>

  imports?: Array<Type<any> | ModuleWithProviders | any[]>

  exports?: Array<Type<any> | any[]>

  entryComponents?: Array<Type<any> | any[]>

  bootstrap?: Array<Type<any> | any[]>

  schemas?: Array<SchemaMetadata | any[]>

  id?: string

})

Let understand in detail about NgModule metadata is as follows-

Providers – A list of dependency injection (DI) providers and it defines the set of injectable objects that are available in the injector of this module.

Declarations - A list of declarable classes, components, directives, and pipes that belong to this module. The compiler throws an error if you try to declare the same class in multiple modules.

Imports - A list of modules and it used to import the supporting modules like FormsModule, RouterModule, CommonModule, or any other custom made feature module.

Exports - A list of declarable components, directives, pipes, and modules that an importing module can be used within a template of any component.

EntryComponents - A list of components that should be compiled when this module is defined. By default, an Angular app always has at least one entry component, the root component, AppComponent.

A bootstrapped component is an entry component that Angular loads into DOM during the application launch and other root components loaded dynamically into entry components.

Bootstrap – A list of components that are automatically bootstrapped and the listed components will be added automatically to entryComponents.

Schemas - Defines a schema that will allow any non-Angular elements and properties.

Id – The Id used to identify the modules in getModuleFactory. If left undefined, the NgModule will not be registered with getModuleFactory.