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, m
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.
@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
,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.
@angular/platform-browser and it is used for running your app in browser.
@angular/common and it is used for NgIf and NgFor directives.
@angular/forms and it is used for building templates driven forms.
@angular/forms and it is used for building reactive forms.
@angular/router and it is used for app routing.