Ecosystem and Migration

This section documents modern, standalone Angular — signals, the built-in @if / @for / @switch control flow, @defer, typed reactive forms, provideHttpClient, functional guards and interceptors, and server-side rendering with hydration — as described by the official documentation at angular.dev, which is the reference these pages are written and verified against.

This content was generated with the assistance of AI and should be verified against angular.dev before being relied on in production. Angular ships a major release roughly every six months and its APIs continue to evolve: the examples here target the current major release; where a consulted source disagrees with the current documentation, the documentation wins and the difference is noted.

This section’s bibliography lists the reference material consulted while preparing these pages.

Modern Angular is standalone-first, releases on a predictable schedule, and sits in a wide ecosystem of state-management and build tooling. This page covers the move off NgModule, how to stay current, and the libraries most often paired with Angular.

From NgModule to standalone

An NgModule was a class with an @NgModule decorator that grouped related pieces: declarations (the components, directives, and pipes it owned), imports (other modules whose exports it needed), providers (services), and — for the root module — bootstrap (the component to render first). Every component had to belong to exactly one module, so adding a component meant editing a module too.

Standalone components, directives, and pipes declare their own dependencies through the imports array on their decorator, so NgModule is no longer needed. The app boots from a component instead of a module:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { App } from './app/app';
import { routes } from './app/app.routes';

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

Two schematics automate the change to an existing codebase. The standalone migration converts declarations, drops now-empty `NgModule`s, and rewrites the bootstrap:

ng generate @angular/core:standalone

The control-flow migration rewrites *ngIf / *ngFor / *ngSwitch to the built-in @if / @for / @switch blocks:

ng generate @angular/core:control-flow

See the NgModules guide for the legacy model and the migrations reference for every automated schematic (standalone, control flow, inject(), signal inputs / outputs / queries, and more).

Keeping up to date

Angular ships a major release roughly every six months, with about 18 months of long-term support (LTS) per major after it stops being current — so at any time the current major plus the previous one or two are supported. Upgrade with ng update, which runs version-aware schematics that patch breaking changes for you:

ng update @angular/core @angular/cli

The interactive update guide generates the exact command list and manual steps for any from/to version pair; the releases reference lists the schedule and support windows.

State management

For most apps, signals plus small services — a service that owns a signal (or a computed over several) and exposes methods to update it — is enough and needs no dependency. Reach for a library when many unrelated components share complex, frequently-changing state.

NgRx Store + Effects — a Redux-style single store with actions, reducers, selectors, and Effects for side effects; the most established option. See ngrx.io.
NgRx SignalStore — the same team’s lighter, signal-based store built from signalStore() and withState / withComputed / withMethods features. See the SignalStore guide.
NGXS — a class-and-decorator store (@State, @Action, @Selector) that many find less boilerplate-heavy than classic NgRx. See ngxs.io.
Elf — a small, modular reactive store built on RxJS with composable feature functions and a rich set of entity helpers. See the Elf docs.

import { Injectable, computed, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CartStore {
  private readonly items = signal<string[]>([]);
  readonly count = computed(() => this.items().length);

  add(item: string): void {
    this.items.update((list) => [...list, item]);
  }
}

Build, monorepo, and meta-framework tooling

Nx — an extensible monorepo build system with Angular generators, computation caching, and affected-only task running; a common choice for multi-app Angular workspaces. See nx.dev.
AnalogJS — a Vite-powered meta-framework for Angular adding file-based routing, server routes, and Markdown content, aimed at full-stack and content sites. See analogjs.org.
Zoneless change detection — running without Zone.js (provideZonelessChangeDetection()), where signals and explicit notifications drive updates; covered on Lifecycle and Change Detection.