Standalone Components in Angular22

Angular has moved decisively away from NgModule-first architecture. Since Standalone Components in Angular22 became the default in modern Angular versions, most new codebases — and a growing number of migrated legacy ones — skip NgModule entirely. If you're building (or maintaining) an Angular application in 2026, standalone components aren't an optional pattern anymore; they're the baseline.

This guide covers what Standalone Components in Angular22 are, why they matter for scalability, and the best practices that separate a clean standalone architecture from a messy one.

📌 Related reading: if you want to go deeper into the reactive side of Angular's evolution, check out Angular 22 Signal Forms: Complete Guide and Features in Angular 22 for what's new beyond standalone components.

What Are Standalone Components?
Why Standalone Components in Angular22 Improve Scalability
Best Practices for Scalable Standalone Apps
Full Working Example
Common Mistakes to Avoid
FAQs

1. What Are Standalone Components?

A Standalone Components in Angular22 is a component that declares its own dependencies (other components, directives, pipes) directly in its @Component decorator using the imports array — with no NgModule required to declare or export it.

typescript

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

@Component({
  selector: 'app-user-card',
  imports: [CommonModule],
  template: `
    <div class="card">
      <h3>{{ name }}</h3>
      @if (isActive) {
        <span class="badge">Active</span>
      }
    </div>
  `
})
export class UserCardComponent {
  name = 'Priya Sharma';
  isActive = true;
}

No NgModule. No declarations array. The component simply imports what it needs and is ready to use — in a route, in another Standalone Components in Angular22, or bootstrapped directly.

2. Why Standalone Components Improve Scalability

For teams building large Angular applications, standalone components solve real architectural pain points:

Fewer circular dependency issues — no more NgModule webs that break when one import changes.
Better tree-shaking — unused code is easier for the compiler to eliminate since dependencies are explicit per component.
Faster onboarding — new developers can open one file and see exactly what a component depends on, instead of hunting through module declarations.
Simplified lazy loading — routes can lazy-load individual standalone components without wrapping them in feature modules.
Cleaner testing — you import only what the component under test actually needs, which keeps TestBed configuration minimal.

This lines up with where Angular itself is headed. If you're tracking the framework's direction for AI-assisted and next-generation workflows, Loop Engineering & AI: The Next Evolution is a useful companion read on how tooling is adapting around these leaner component patterns.

3. Best Practices for Scalable Standalone Apps

a) Structure by feature, not by type

Group components, services, and routes for a feature together instead of splitting into generic components/, services/, pipes/ folders. This keeps standalone imports short and intentional.

src/app/
  features/
    orders/
      order-list.component.ts
      order-detail.component.ts
      orders.routes.ts
      order.service.ts

b) Use `bootstrapApplication` instead of `AppModule`

typescript

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

bootstrapApplication(AppComponent, appConfig);

c) Lazy-load standalone components at the route level

typescript

export const routes: Routes = [
  {
    path: 'orders',
    loadComponent: () =>
      import('./features/orders/order-list.component')
        .then(m => m.OrderListComponent)
  }
];

d) Keep `imports` arrays lean and explicit

Only import what the template actually uses. A bloated imports array is a sign the component is doing too much — split it.

e) Centralize shared imports with constants, not shared modules

typescript

export const SHARED_IMPORTS = [CommonModule, ReactiveFormsModule, RouterLink];

Spread this into components that genuinely need the full set, but don't default to it everywhere — that recreates the old "God module" problem in a new shape Standalone Components in Angular22.

f) Prefer signals for state inside standalone components

Standalone components pair naturally with Angular's signal-based reactivity model, reducing reliance on NgModule-scoped services for simple local state.

g) Use `OnPush` change detection by default

typescript

@Component({
  selector: 'app-order-list',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule]
})
export class OrderListComponent {}

4. Full Working Example

A small standalone feature: a product list with a search filter using signals.

typescript

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

interface Product {
  id: number;
  name: string;
  price: number;
}

@Component({
  selector: 'app-product-list',
  standalone: true,
  imports: [CommonModule, FormsModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <input [(ngModel)]="searchTerm" placeholder="Search products..." />

    <ul>
      @for (product of filteredProducts(); track product.id) {
        <li>{{ product.name }} — \${{ product.price }}</li>
      } @empty {
        <li>No products found.</li>
      }
    </ul>
  
})

export class ProductListComponent {
  searchTerm = signal('');

  private products = signal<Product[]>([
    { id: 1, name: 'Wireless Mouse', price: 25 },
    { id: 2, name: 'Mechanical Keyboard', price: 89 },
    { id: 3, name: 'USB-C Hub', price: 34 },
  ]);

  filteredProducts = computed(() =>
    this.products().filter(p =>
      p.name.toLowerCase().includes(this.searchTerm().toLowerCase())
    )
  );
}

This single file is fully self-contained: template, logic, and imports live together, with no module registration step anywhere else in the app.

5. Common Mistakes to Avoid

Importing entire feature modules "just in case." Defeats the purpose of explicit dependencies.
Skipping route-level lazy loading. Standalone components still need loadComponent to get bundle-splitting benefits.
Mixing NgModule and standalone patterns inconsistently across a large codebase without a migration plan — pick a direction and document it.
Forgetting OnPush. Standalone doesn't automatically improve change detection performance; you still have to opt in Standalone Components in Angular22.