Modules in Angular

Module

An Angular module is one of the building blocks of Angular applications. A module consists of one or more components and helps organize related things together. In Angular 21, NgModules are still fully supported but are no longer required for new applications - standalone components are now the default. Modules configure the injector and the compiler and allow us to extend applications with capabilities from external libraries. A module can be created using the @NgModule() decorator, which holds the following properties:-

declarations: [ ]

This is the place where we declares components, directives, and pipes belong to the module followed by import.

imports: [ ]

It will imports other modules with the components, directives, and pipes in the current module.

exports: [ ]

It will exports the list of components, directives, and pipes visible to modules, so that other module can import.

providers: [ ]

It provides the List of dependency injection providers visible both to the contents of this module and to importers of this module that the other application components can use.

entryComponents: [ ]

List of components not referenced in any reachable template, such as dynamically created from code.

bootstrap: [ ]

List of all components to bootstrap when this module is bootstrapped.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

NgModule vs Standalone (Angular 21)

In Angular 21, NgModules are still fully supported but are no longer required for new applications. The modern approach uses standalone components with bootstrapApplication() and ApplicationConfig instead of AppModule. NgModules remain useful for organizing large codebases and for library authors.

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';

bootstrapApplication(AppComponent, appConfig)
  .catch(err => console.error(err));

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAnimationsAsync()
  ]
};

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  template: `<router-outlet />`
})
export class AppComponent { }