Understanding Angular Modules and Its Types
Photo: Google

Understanding Angular Modules and Its Types

Angular is a platform and framework for building client applications in HTML and TypeScript. Understanding the different types of Angular modules is a key factor for architecting or refactoring an application. Furthermore, modules are a great way to organize an application and extend it with capabilities from external libraries.

Angular Module: NgModule

NgModule is a core building block of the Angular framework. Modules are a great way to organize an application and extend it with capabilities from external libraries. Angular apps are also modular in nature. Each app must have a root module, which is an AppModule in any Angular app.

This AppModule exists in app.module.ts file of your Angular app. In short, this is the entry point of bootstrapping an angular app. Besides AppModule, there are other NgModules, such as FormsModule, HttpClientModule, and RouterModule.

An NgModule is defined by a class decorated with @NgModule(). Furthermore, the @NgModule() decorator is a function that takes a single metadata object, whose properties describe the module.

NgModule Metadata

@NgModule identifies the module’s own components, directive, and pipes. In addition to this, you can import other modules in your app, and export yours to other modules. Lastly, you can add services to the providers, so that app components can use it.

So, @NgModule metadata has the following properties. Let’s have a look at these properties one by one.

  • imports –– you can import other modules here required by your app.
  • providers –– you can add all your services in providers, which can be globally accessible across your app.
  • declarations –– declare your components, directives, pipes of your app.
  • exports –– you can export your module by adding them here.
  • bootstrap –– here we inject the main root component, which is AppComponent, to bootstrap the app.

For instance, let’s take a look at below code.

Types of NgModules

  • Routes –– particularly used for managing routes. You can not use it for anything else.
  • Service –– this only contains services/providers.
  • Feature –– contains custom features. Especially used for lazy loading of modules.
  • Shared –– contains shared features used by multiple modules/components.

How to create module with Angular CLI

You can create any module using below command.

ng generate module <module-name>

Commonly used modules in Angular app

Let’s have a look at commonly used modules in any angular app.

BrowserModule

Import BrowserModule from@angular/platform-browser and it is used for running your app in browser.

CommonModule

Import CommonModule from @angular/common and it is used for NgIf and NgFor directives.

FormsModule

Import FormsModule from @angular/forms and it is used for building templates driven forms.

ReactiveFormsModule

Import ReactiveFormsModule from @angular/forms and it is used for building reactive forms.

RouterModule

Import RouterModule from @angular/router and it is used for app routing.

HttpClientModule

Import HttpClientModule from @angular/common/http and it is used for server interactions.

Read More

Create Your Blog Site With Gatsby.js Static Site Generator

Sharing Files Anonymously Online Via OnionShare

Array.Prototype.Flat() or ES2019 Array Flat() function

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: