Help Angular by taking a 1 minute survey!Go to surveyHome

NgModule

Decorator that marks a class as an NgModule and supplies configuration metadata.

OptionDescription
providers

The set of injectable objects that are available in the injector of this module.

declarations

The set of components, directives, and pipes (declarables) that belong to this module.

imports

The set of NgModules whose exported declarables are available to templates in this module.

exports

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.

entryComponents

The set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view.

bootstrap

The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents.

schemas

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.

id

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

jit

If true, this module will be skipped by the AOT compiler and so will always be compiled using JIT.

Options

The set of injectable objects that are available in the injector of this module.

providers: Provider[]
      
      providers: Provider[]
    

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.

A lazy-loaded module has its own injector, typically a child of the app root injector. Lazy-loaded services are scoped to the lazy-loaded module's injector. If a lazy-loaded module also provides the UserService, any component created within that module's context (such as by router navigation) gets the local instance of the service, not the instance in the root injector. Components in external modules continue to receive the instance provided by their injectors.

Example

The following example defines a class that is injected in the HelloWorld NgModule:

class Greeter { greet(name:string) { return 'Hello ' + name + '!'; } } @NgModule({ providers: [ Greeter ] }) class HelloWorld { greeter:Greeter; constructor(greeter:Greeter) { this.greeter = greeter; } }
      
      
  1. class Greeter {
  2. greet(name:string) {
  3. return 'Hello ' + name + '!';
  4. }
  5. }
  6.  
  7. @NgModule({
  8. providers: [
  9. Greeter
  10. ]
  11. })
  12. class HelloWorld {
  13. greeter:Greeter;
  14.  
  15. constructor(greeter:Greeter) {
  16. this.greeter = greeter;
  17. }
  18. }

The set of components, directives, and pipes (declarables) that belong to this module.

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

The set of selectors that are available to a template include those declared here, and those that are exported from imported NgModules.

Declarables must belong to exactly one module. The compiler emits an error if you try to declare the same class in more than one module. Be careful not to declare a class that is imported from another module.

Example

The following example allows the CommonModule to use the NgFor directive.

@NgModule({ declarations: [NgFor] }) class CommonModule { }
      
      @NgModule({
  declarations: [NgFor]
})
class CommonModule {
}
    

The set of NgModules whose exported declarables are available to templates in this module.

imports: Array<Type<any> | ModuleWithProviders<{}> | any[]>
      
      imports: Array<Type<any> | ModuleWithProviders<{}> | any[]>
    

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 anything exported by CommonModule:

@NgModule({ imports: [CommonModule] }) class MainModule { }
      
      @NgModule({
  imports: [CommonModule]
})
class MainModule {
}
    

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.

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

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.

@NgModule({ exports: [NgFor] }) class CommonModule { }
      
      @NgModule({
  exports: [NgFor]
})
class CommonModule {
}
    

The set of components to compile when this NgModule is defined, so that they can be dynamically loaded into the view.

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

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().

The set of components that are bootstrapped when this module is bootstrapped. The components listed here are automatically added to entryComponents.

bootstrap: Array<Type<any> | any[]>
      
      bootstrap: Array<Type<any> | 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.

schemas: Array<SchemaMetadata | any[]>
      
      schemas: Array<SchemaMetadata | any[]>
    

Allowed value are NO_ERRORS_SCHEMA and CUSTOM_ELEMENTS_SCHEMA.

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

id: string
      
      id: string
    

If true, this module will be skipped by the AOT compiler and so will always be compiled using JIT.

jit: true
      
      jit: true
    

This exists to support future Ivy work and has no effect currently.