Standalone Components

Older Angular apps organize components into NgModules — classes whose entire job is declaring "these components, directives, and pipes belong together, and here's what they're allowed to use." Every component had to be declared in exactly one module before it could be used anywhere.

Modern Angular drops that requirement. A standalone component declares its own dependencies directly, with no surrounding module required.

Declaring what a component needs

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-nav-bar',
  imports: [CommonModule, RouterLink],
  templateUrl: './nav-bar.component.html',
})
export class NavBarComponent {
  links = ['Home', 'Learn', 'Practice'];
}

The imports array lists exactly what this component's template relies on — here, common directives like *ngIf/*ngFor from CommonModule, and routerLink for navigation. There's no separate module file declaring NavBarComponent belongs to some feature area; the component is self-contained and ready to use wherever it's imported.

Why this is the default now

NgModules solved a real problem — sharing a common set of directives and pipes across many components — but they added a layer of indirection between "I want to use this component" and "here's where I define what it needs." You often had to open two or three files just to figure out why a directive wasn't working in a template.

Standalone components collapse that: a component's imports array is a complete, honest list of its dependencies, readable in the same file where they're used.

Bootstrapping without a root module

Because components no longer need a module to belong to, the app itself doesn't need a root module either:

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

bootstrapApplication(AppComponent, appConfig);

appConfig supplies application-wide providers (the router, the HTTP client, and so on) that used to live in a root NgModule's providers array — you'll see exactly how in the routing and HTTP lessons later in this course.

NgModules haven't disappeared

You'll still encounter NgModule in older codebases, in some third-party libraries, and occasionally for grouping a large set of shared declarations. Angular's own CLI has generated standalone components by default since Angular 17, and it's the pattern every lesson from here on assumes — but recognizing an @NgModule decorator and knowing roughly what it did will help when you read code that predates this shift.