LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 3615 min read

NgModules (Legacy Module System)

Understand NgModules, the classic way Angular organized applications, so you can read and maintain existing codebases.

What Is an NgModule?

Before standalone components, every Angular component, directive, and pipe had to be declared inside exactly one NgModule — a class decorated with @NgModule that groups related pieces of an application together and describes their dependencies collectively.

Anatomy of an NgModule

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


@NgModule({
  declarations: [AppComponent, HeaderComponent], // components/directives/pipes owned by this module
  imports: [BrowserModule],                       // other modules this one depends on
  providers: [],                                   // services provided at this module's scope
  bootstrap: [AppComponent],                       // the root component to bootstrap
})
export class AppModule {}
PropertyPurpose
declarationsComponents, directives, and pipes that belong to this module
importsOther NgModules this one needs (like FormsModule)
exportsWhat this module makes available to modules that import it
providersServices provided at this module's scope

Feature Modules

Larger classic Angular apps split into feature modules — one per major area (an AdminModule, a ShopModule) — each declaring its own components and often lazy-loaded via the router, similar in spirit to loadChildren for standalone routes.

NgModules vs Standalone Components

NgModulesStandalone Components
Where dependencies are declaredThe enclosing NgModule's declarations/importsThe component's own imports array
BoilerplateA module file per feature areaNone — a component is self-contained
Bootstrapping@NgModule bootstrap + platformBrowserDynamicbootstrapApplication with a root component
StatusFully supported, still common in existing appsThe modern default for new projects
Why This Course Teaches It Last

You are very likely to encounter NgModules in existing production Angular codebases, so understanding the concept is valuable — but new code should use standalone components, which is why this course taught that model first.

FAQs

No official removal has been announced — they remain fully supported, even as standalone components are the recommended default for new work.

Yes — standalone components can be imported directly into an NgModule's imports array, making incremental migration from NgModules to standalone components possible.

Summary

NgModules were the original way Angular organized dependencies, and understanding them helps you navigate existing production codebases even as new projects favor standalone components. Next, you'll look at approaches to sharing state across an Angular app.

Next Lesson →

State Management