What are Angular modules (NgModules) and what is their purpose?
Learn what Angular NgModules are — declarations, imports, exports, and providers — their purpose, and how standalone components offer a modern alternative.
Expected Interview Answer
An NgModule is a class decorated with @NgModule that groups related components, directives, pipes, and services into a cohesive block and tells Angular how to compile and wire them together. It defines what the module declares, imports, exports, and provides.
The decorator's key metadata are declarations (components/directives/pipes owned by the module), imports (other modules whose exported features are needed), exports (what this module makes available to others), providers (services for dependency injection), and bootstrap (the root component, in the root module). Historically every Angular app was built from NgModules, but modern Angular favors standalone components that skip NgModules entirely — though understanding NgModules remains essential for existing codebases and libraries.
- Organizes an app into cohesive, reusable feature blocks
- Controls visibility via declarations and exports
- Centralizes dependency-injection providers
- Enables lazy loading at the module boundary
- Clarifies dependencies through the imports list
AI Mentor Explanation
An NgModule is like a cricket squad sheet that lists which players belong to the team (declarations), which support staff are brought in from outside (imports), which players can be loaned to other teams (exports), and the shared equipment kit everyone uses (providers) — one document defining the whole unit.
Step-by-Step Explanation
Step 1
Declare the class
Create a class and decorate it with @NgModule({ ... }) to mark it as an Angular module.
Step 2
List declarations
Add the components, directives, and pipes this module owns to the declarations array (each declared in exactly one module).
Step 3
Add imports
Import other modules (like CommonModule or FormsModule) whose exported features your declarations need.
Step 4
Set exports
Export any declarables you want other modules to be able to use after importing this module.
Step 5
Register providers
Add services to providers for dependency injection, or prefer providedIn: 'root' for tree-shakable singletons.
What Interviewer Expects
- Knowledge of the @NgModule metadata fields and their roles
- Understanding that a declarable belongs to exactly one module
- Difference between imports, exports, declarations, and providers
- Awareness that standalone components are the modern alternative
- How NgModules relate to lazy loading and bootstrapping
Common Mistakes
- Declaring the same component in more than one module
- Forgetting to export a component that other modules need to use
- Confusing imports (of modules) with declarations (of components)
- Providing a service in multiple lazy modules and getting duplicate instances
- Assuming NgModules are still required when standalone components exist
Best Answer (HR Friendly)
“An NgModule is a container that groups related parts of an Angular app — like screens, reusable UI pieces, and services — so the framework knows how they fit together. It keeps large apps organized, though newer Angular can also work without them using standalone components.”
Code Example
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list.component';
import { UserCardComponent } from './user-card.component';
@NgModule({
declarations: [UserListComponent, UserCardComponent],
imports: [CommonModule], // brings in *ngIf, *ngFor, etc.
exports: [UserListComponent], // usable by modules that import this one
providers: [], // prefer providedIn: 'root' for services
})
export class UsersModule {}Follow-up Questions
- What is the difference between declarations and imports?
- How do standalone components change the need for NgModules?
- Why can a component be declared in only one NgModule?
- What is the role of the bootstrap array in the root module?
- How do providers in a lazy-loaded module affect service instances?
MCQ Practice
1. Which @NgModule array lists the components a module owns?
declarations holds the components, directives, and pipes that belong to that module.
2. How many NgModules can a given component be declared in?
A declarable must belong to exactly one NgModule; declaring it in more than one throws an error.
3. What is the modern Angular alternative to organizing code with NgModules?
Standalone components declare their own imports and can be used without belonging to an NgModule.
Flash Cards
What does the declarations array hold? — The components, directives, and pipes owned by that module — each in exactly one module.
What does exports do? — Makes declarables available to other modules that import this module.
What is the modern alternative to NgModules? — Standalone components, which declare their own dependencies and skip NgModules.
What goes in providers? — Services for dependency injection, though providedIn: 'root' is often preferred for singletons.