Tutorial

Anatomy of an Angular Module

Published on August 5, 2017
Default avatar

By Alligator.io

Anatomy of an Angular Module

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In Angular, we get modules, known as NgModules, to act as the unit that glues together an app or features within an app. All Angular apps have one root module, the app module, that deals with unifying the whole app together. It’s also a best practice to breakdown individual features of an app into their own module. This practice enables things such as lazy loading or preloading certain features.

This post covers NgModules in Angular 2+

Angular modules are not to be confused with ES6 modules. They are two distinct things.

Here’s what a barebones NgModule looks like:

// ...ES6 module imports

@NgModule({
  declarations: [ ... ],
  imports: [ ... ],
  providers: [ ... ],
  bootstrap: [ ... ],
  entryComponents: [ ... ],
  exports: [ ... ]
})
export class MyModule { }

And here’s an example of what it can look like with actual members:

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { VideoPlayerComponent } from './video-player/video-player.component';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { VideoService } from './services/video.service';

Breaking It Down

Let’s briefly explain each entry in the @NgModule decorator:

declarations

This is to specify the components, pipes and directives that should be part of the module.

imports

This is to import other modules that have exported members to be used in templates of components that are part of the NgModule. For example, BrowserModule re-exports CommonModule, which makes available the built-in NgIf and NgFor directives.

RouterModule, BrowserModule, FormsModule, HttpModule and BrowserAnimationsModule are examples of commonly imported modules.

exports

If you want to export members of the module so that they can be used in component templates of other modules, these members would go in the exports array.

In the case of the CommonModule, for example, COMMON_DIRECTIVES and COMMON_PIPES are exported, which is what is made available to component templates when you import BrowserModule or CommonModule into your own NgModules.

bootstrap

This is to define the root component, which is often called AppComponent. This means that bootstrap should contain only one member, and that it should be defined only in the main app module.

providers

This is where injectables go. Things like services, route guards and http interceptors are example of injectables that should be part of the providers array. They will be made available everywhere in the app once they have been provided. This is why services are often provided in the root app module.

entryComponents

This is for components that can’t be found by the Angular compiler during compilation time because they are not referenced anywhere in component templates. It’s common for routed components not to be referenced at all in templates, but Angular takes care of adding those to entryComponents automatically, so there’s no need to add those yourself.

Components that should go into entryComponents are not that common. A good example would be Angular Material dialogs, because they are created dynamically, and the Angular compiler wouldn’t know about them otherwise.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Alligator.io

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel