NgModules and Components

Go back to Tutorial

NgModules provide a compilation context for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.

A component and its template together define a view. A component can contain a view hierarchy, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.

When you create a component, it is associated directly with a single view, called the host view. The host view can be the root of a view hierarchy, which can contain embedded views, which are in turn the host views of other components. Those components can be in the same NgModule, or can be imported from other NgModules. Views in the tree can be nested to any depth.

The hierarchical structure of views is a key factor in the way Angular detects and responds to changes in the DOM and app data.

NgModules

NgModules help organize an application into cohesive blocks of functionality.

An NgModule is a class adorned with the @NgModule decorator function. @NgModule takes a metadata object that tells Angular how to compile and run module code. It identifies the module’s own components, directives, and pipes, making some of them public so external components can use them. @NgModule may add service providers to the application dependency injectors. And there are many more options covered here.

Many Angular libraries are modules (such as FormsModule, HttpModule, and RouterModule). Many third-party libraries are available as NgModules (such as Material Design, Ionic, AngularFire2).

NgModules consolidate components, directives, and pipes into cohesive blocks of functionality, each focused on a feature area, application business domain, workflow, or common collection of utilities.

Modules can also add services to the application. Such services might be internally developed, such as the application logger. Services can come from outside sources, such as the Angular router and Http client.

Modules can be loaded eagerly when the application starts. They can also be lazy loaded asynchronously by the router.

An NgModule is a class decorated with @NgModule metadata. The metadata do the following:

• Declare which components, directives, and pipes belong to the module.
• Make some of those classes public so that other component templates can use them.
• Import other modules with the components, directives, and pipes needed by the components in this module.
• Provide services at the application level that any application component can use.

Every Angular app has at least one module class, the root module. You bootstrap that module to launch the application.

The root module is all you need in a simple application with a few components. As the app grows, you refactor the root module into feature modules that represent collections of related functionality. You then import these modules into the root module.

The root AppModule

Every Angular app has a root module class. By convention, the root module class is called AppModule and it exists in a file named app.module.ts.

The AppModule from the QuickStart seed on the Setup page is as minimal as possible:

src/app/app.module.ts (minimal)

import { NgModule }      from ‘@angular/core’;

import { BrowserModule } from ‘@angular/platform-browser’;

import { AppComponent }  from ‘./app.component’;

@NgModule({

imports:      [ BrowserModule ],

declarations: [ AppComponent ],

bootstrap:    [ AppComponent ]

})

export class AppModule { }

The @NgModule decorator defines the metadata for the module. This page takes an intuitive approach to understanding the metadata and fills in details as it progresses.

The metadata imports a single helper module, BrowserModule, which every browser app must import.

BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor, which become immediately visible and usable in any of this module’s component templates.

The declarations list identifies the application’s only component, the root component, the top of the app’s rather bare component tree. The example AppComponent simply displays a data-bound title:

src/app/app.component.ts (minimal)

import { Component } from ‘@angular/core’;

@Component({

selector: ‘my-app’,

template: ‘<h1>{{title}}</h1>’,

})

export class AppComponent {

title = ‘Minimal NgModule’;

}

Lastly, the @NgModule.bootstrap property identifies this AppComponent as the bootstrap component. When Angular launches the app, it places the HTML rendering of AppComponent in the DOM, inside the <my-app> element tags of the index.html.

Go back to Tutorial