LearnAI ToolsCareerPractice BuildsPlayContact
Lesson 1916 min read

Standalone Components

Understand standalone components in depth — the modern default that removes the need for NgModules in most Angular code.

What standalone: true Means

A standalone component declares its own dependencies directly — the other components, directives, and pipes it uses — in its own imports array, rather than relying on an enclosing NgModule's declarations array. This removes an entire layer of indirection that classic Angular required for every single component.

The Default Since Angular 17

Since Angular 17, standalone: true is actually the default — ng generate component no longer even needs the flag, though this course shows it explicitly for clarity while you're learning.

Bootstrapping a Standalone App

A fully standalone application skips the root NgModule entirely, bootstrapping directly from a root component and an application-wide configuration object.

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


bootstrapApplication(AppComponent, appConfig);
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';


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

Importing Directives and Pipes

Just like importing another component, a standalone component imports whichever built-in or custom directives and pipes its template uses.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';


@Component({
  selector: 'app-search',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <input [(ngModel)]="term" />
    <p *ngIf="term">Searching for: {{ term | uppercase }}</p>
  `,
})
export class SearchComponent {
  term = '';
}

Providing App-Wide Services

Where NgModules used a providers array, standalone apps configure app-wide providers (router, HttpClient, and your own services) through the ApplicationConfig passed to bootstrapApplication, or via a service's own providedIn: 'root' metadata (covered in the services lesson).

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';


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

FAQs

Yes — Angular supports mixing both during a migration, though new projects should use standalone components exclusively.

Not meaningfully at runtime — the main benefit is simpler mental model and less boilerplate, plus better support for fine-grained lazy loading.

Summary

Standalone components declare their own dependencies explicitly, and bootstrapApplication replaces the root NgModule entirely for app-wide setup. Next, you'll learn Signals, Angular's modern, fine-grained reactivity primitive.

Next Lesson →

Introduction to Signals