Angular 10 References/ Core
References
Oleksa Novyk | GitHub

@NgModule

NgModule configures the injector and the compiler and help organize related things together.

Example

The CLI generates the following basic app module when creating a new app.

@NgModule({
  declarations: [
    AppComponent,
    ItemDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Options

bootstrap#

bootstrap?: Array<Type<any>|any[]>
The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to `entryComponents`.

declarations#

declarations?: Array<Type<any>|any[]>
The set of components, directives, and pipes (declarables) that belong to this module.The set of selectors that are available to a template include those declared here, and those that are exported from imported NgModules. #### Example The following example allows the CommonModule to use the `NgFor` directive. ```typescript @NgModule({ declarations: [NgFor] }) class CommonModule { } ```

entryComponents#

entryComponents?: Array<Type<any>|any[]>
The set of components to compile when this `NgModule` is defined, so that they can be dynamically loaded into the view.For each component listed here, Angular creates a `ComponentFactory` and stores it in the `ComponentFactoryResolver`. Angular automatically adds components in the module's bootstrap and route definitions into the `entryComponents` list. Use this option to add components that are bootstrapped using one of the imperative techniques, such as `ViewContainerRef.createComponent()` or with `ngComponentOutlet` directive.

exports#

exports?: Array<Type<any>|any[]>
The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API.A declarable belongs to one and only one `NgModule`. A module can list another module among its exports, in which case all of that module's public declaration are exported. Declarations are private by default. If this `ModuleA` does not export `UserComponent`, then only the components within this `ModuleA` can use `UserComponent`. `ModuleA` can import `ModuleB` and also export it, making exports from `ModuleB` available to an `NgModule` that imports `ModuleA`. #### Example The following example exports the `NgFor` directive from `CommonModule`. ```javascript @NgModule({ exports: [NgFor] }) class CommonModule { } ```

id#

id?: string
A name or path that uniquely identifies this `NgModule` in `getModuleFactory`. If left `undefined`, the `NgModule` is not registered with `getModuleFactory`.

imports#

imports?: Array<Type<any>|ModuleWithProviders<{}>|any[]>
The set of NgModules whose exported declarables are available to templates in this module.A template can use exported declarables from any imported module, including those from modules that are imported indirectly and re-exported. For example, `ModuleA` imports `ModuleB`, and also exports it, which makes the declarables from `ModuleB` available wherever `ModuleA` is imported. #### Example The following example allows MainModule to use anthing exported by `CommonModule`: ```typescript @NgModule({ imports: [CommonModule] }) class MainModule { } ```

jit#

jit?: true
If `true`, this module will be skipped by the AOT compiler and so will always be compiled using JIT.This exists to support future Ivy work and has no effect currently.

providers#

providers?: Provider[]
The set of injectable objects that are available in the injector of this module.Dependencies whose providers are listed here become available for injection into any component, directive, pipe or service that is a child of this injector. The `NgModule` used for bootstrapping uses the root injector, and can provide dependencies to any part of the app. #### Example The following example defines a class that is injected in the `HelloWorld` `NgModule`: ```typescript class Greeter { greet(name:string) { return 'Hello ' + name + '!'; } } @NgModule({ providers: [ Greeter ] }) class HelloWorld { greeter:Greeter; constructor(greeter:Greeter) { this.greeter = greeter; } } ```

schemas#

schemas?: Array<SchemaMetadata|any[]>
The set of schemas that declare elements to be allowed in the `NgModule`. Elements and properties that are neither Angular components nor directives must be declared in a schema.Allowed value are `NO_ERRORS_SCHEMA` and `CUSTOM_ELEMENTS_SCHEMA`. When using one of `NO_ERRORS_SCHEMA` or `CUSTOM_ELEMENTS_SCHEMA` you must ensure that allowed elements and properties securely escape inputs.