Angular Standalone Components

What is Standalone Components in Angular?

A standalone component declares its own template dependencies in an imports array instead of being registered in an NgModule. Since Angular 17 this is the default for new projects, and from Angular 19 components are standalone unless stated otherwise.

Why Standalone Components matters

NgModules added a layer of indirection where every component had to be declared somewhere else. Standalone components put the dependency list next to the code that uses it, which makes them far easier to move, lazy-load and delete.

Standalone Components example

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { JobCardComponent } from './job-card.component';

@Component({
  selector: 'app-job-list',
  standalone: true,
  imports: [CommonModule, RouterLink, JobCardComponent],
  templateUrl: './job-list.component.html',
})
export class JobListComponent {}

How this works

Everything the template uses — directives, pipes, other components — must appear in imports. Forgetting one produces "is not a known element", which is the most common standalone error.

Key points to remember

• bootstrapApplication replaces the old platformBrowserDynamic().bootstrapModule().
• Providers move from NgModule to app.config.ts or to the component itself.
• Standalone components can be lazy-loaded directly by the router, with no module wrapper.
• Mixed projects work — standalone and NgModule components interoperate.

Common mistakes with Standalone Components

• Forgetting to add a directive or pipe to imports, so the template silently fails to compile.
• Copying an NgModule-era tutorial into a standalone project and wondering where declarations went.