Angular Modules
In Angular, an NgModule is a class marked by the
@NgModule decorator. It organizes related components, directives, pipes, and services into a cohesive unit. Every Angular app has at least one module – the root module (AppModule).Basic NgModule structure:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent], // components, directives, pipes belonging to this module
imports: [BrowserModule], // other modules this module needs
providers: [], // services (made available via DI)
bootstrap: [AppComponent] // root component to bootstrap (only in root module)
})
export class AppModule { }
Types of modules:
- Root Module – AppModule, bootstraps the app.
- Feature Modules – Group functionality around a feature (e.g., UserModule, ProductModule).
- Shared Modules – Hold common components/pipes used across features.
- Core Modules – Singleton services, app-wide providers.
Modules help with organization, lazy loading, and reusability.
Two Minute Drill
- @NgModule declares a module.
- declarations: components, directives, pipes owned by this module.
- imports: other modules needed.
- providers: services available in this module.
- bootstrap: only in root module, specifies root component.
- Use feature modules to organize code.
Need more clarification?
Drop us an email at career@quipoinfotech.com