Angular Standalone Components

A standalone component carries everything it needs inside itself. Older Angular projects grouped components into large containers called modules. Modern Angular removes that extra layer. Each component lists its own tools, so you read one file and understand the whole piece. New projects created with the current CLI use standalone components by default.

The Backpack Idea

Imagine two students going to school. The first student shares one big trunk with the whole class. The second student carries a personal backpack with every book and pen inside. The trunk represents a module. The backpack represents a standalone component. The backpack student never waits for the trunk to open.

Module Style Compared with Standalone Style

MODULE STYLE                    STANDALONE STYLE

+----------------------+        +------------------+
|      AppModule       |        | ProfileComponent |
|  +----------------+  |        |  imports: [      |
|  | ProfileComp    |  |        |    CommonModule, |
|  | ListComp       |  |        |    RouterLink    |
|  | CardComp       |  |        |  ]               |
|  +----------------+  |        +------------------+
+----------------------+        Each component has its own list
One shared list for all

Create a Standalone Component

Add the imports array to the component decorator. Place inside it every component, directive, or pipe that the template uses.

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

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [RouterLink],
  template: '<a routerLink="/home">Go Home</a>'
})
export class ProfileComponent {}

The standalone: true line marks the component as independent. Angular version 19 and later treats every component as standalone without this line.

Use One Component Inside Another

A parent component imports its child components in the same way. The parent then writes the child selector in its template.

import { Component } from '@angular/core';
import { ProfileComponent } from './profile.component';

@Component({
  selector: 'app-dashboard',
  imports: [ProfileComponent],
  template: '<app-profile></app-profile>'
})
export class DashboardComponent {}

Start the Application

Without modules, the app starts with the bootstrapApplication function. You pass the root component and a configuration object.

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

The providers list holds app-wide features such as routing and HTTP. Each feature has a small function that starts with the word provide.

Standalone Components and Routing

Routes load a standalone component directly. The loadComponent option delays the download until a visitor opens that page.

export const routes: Routes = [
  { path: 'profile', loadComponent: () =>
      import('./profile.component').then(m => m.ProfileComponent) }
];

Benefits of Standalone Components

• Files stay shorter because no module file is needed.
• Beginners learn fewer concepts before they build a page.
• Each component documents its own dependencies.
• Lazy loading works at the component level.
• Moving a component to another project takes less effort.

Working with Old Projects

Many existing projects still use modules. Both styles work together in one project. A standalone component can import an old module in its imports array. An old module can import a standalone component the same way. You migrate one component at a time, so no rewrite happens overnight.

The CLI offers a migration command that converts code for you.

ng generate @angular/core:standalone

Common Mistakes

Missing Import

Angular reports an unknown element error when a template uses a component that the imports array lacks. Add the missing class to the array to fix the error.

Importing the Wrong Item

Pipes and directives need imports as well. A template that uses the date pipe needs DatePipe in the array.

Real-Life Example

Imagine a shopping page with a product list, a search box, and a cart icon. In module style, a developer must open the shared module to learn what each piece uses. In standalone style, the developer opens the product list file and sees its tools at the top. The search box file lists its own tools in the same way. Reading becomes faster, and mistakes become easier to find.

Tips for Using Standalone Components

Import only what the template uses. Remove unused imports to keep the file clean. Group shared items, such as a set of buttons, in their own standalone component and import that component wherever needed.

Practice Exercise

Generate two components named header and footer. Import both into the root component. Show both selectors in the root template. Then remove one import on purpose and read the error message. Seeing the message once helps you recognize it later.

Key Points

• A standalone component lists its own imports.
• Modules are optional in modern Angular.
• Use bootstrapApplication to start the app.
• Standalone and module code can live in the same project.