Angular 4 Modules – NgModule


Notice: A non well formed numeric value encountered in /home/ghadeerr/public_html/ghadeer.io/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

If you are coming from the Angular 1 world the concept of a module is not new; a module helps bundle different services, controllers, directives into one cohesive block. Angular 4 has taken the module concept even further allowing us to write modules that can easily be distributed.

What is a module?

The angular team has answered this question very well:

“Angular Modules help to organize an application into cohesive blocks of functionalities and extend it with capabilities from external libraries.”

In Angular 4 we declare a module by using the NgModule decorator: @NgModule

I like to think of NgModule as a way to package related parts of our application.

The beauty of Angular 4 modules is the ability to package features of our applications together and expose specific features. We essentially choose the parts that consumers of our module may want to use and create a “public API”.

In other words, NgModule allows us wrap components, filters, pipes, etc into a module and only make “public” the parts we want consumers to use.  A module consists of different parts, let’s go through each part and try to make sense of them.

Let’s unpack this NgModule and understand what they different keywords mean.

declarations
These are components, pipes, and directives that belong to and are used by this module. All declarations are private by default. In other words, if this module is imported by another module, it will not have access to anything we put in the declarations array.

exports
Unlike declarations, anything in exports is publicly accessible. You can think of anything declared in exports as part of our public API and visible outside of our module.

imports
These are dependencies that this module relies on. Usually, imports will contain other modules that that our module relies on. Some common modules that most applications will import: BrowserModule, CommonModule, HttpModule, FormsModule.

Examples

A component can use the NgIf and NgFor directives only because its parent module imported the CommonModule

A component template can bind with [(ngModel)] only after importing the FormsModule.

providers
Providers are simply services or other injectables that belong to this module. They are usually where business logic, http requests, etc live.

entryComponents
An entry component is any component that Angular loads imperatively by type. This sounds much more complicated than it actually is. Let’s explain what we mean by “declaratively” and “imperatively”.

Declarative: We are explicit in our declaration. What Angular 4 is actually doing is looking for instances where we have used the declaration (like in a template) and then goes our and compiles and creates the necessary factories for us.

Imperative: Now let’s assume we are going to dynamically add a component to one of our pages. In that case, we don’t actually load the component or template until we get the page. We have to give angular a hint about these pages/components by putting it in the entryComponents block. This allows Angular 4 to do the compilation imperatively.

bootstrap

This is where we define the components that should be bootstrapped when this module is bootstrapped. This usually contains one component and it is the root component of our application. It’s important to note that a bootstrap component is automatically an entryComponent.

The NgModule declaration definitely does look intimidating, but hopefully after going through what each keyword means, building your own module will be easier. A video explaining some of these concepts can be found on youtube.

If you enjoyed this article, enter your email below to get free updates!