@angular/common

The package most application code touches first: built-in directives (NgIf, NgFor, NgSwitch, NgClass, NgStyle), the AsyncPipe, location services (Location, LocationStrategy), HttpClient (under @angular/common/http), and locale data.

Purpose

@angular/common provides:

• The classic structural directives (*ngIf, *ngFor, *ngSwitch) — still supported, although the @if/@for/@switch blocks are preferred in new code.
• Common pipes: AsyncPipe, DatePipe, DecimalPipe, CurrencyPipe, PercentPipe, JsonPipe, KeyValuePipe, LowerCasePipe/UpperCasePipe/TitleCasePipe, SlicePipe, I18nPluralPipe, I18nSelectPipe.
• NgOptimizedImage — the <img> directive that warns on missing dimensions, sets up preconnects, and wires loading="lazy" defaults.
• Location services: Location, LocationStrategy, PathLocationStrategy, HashLocationStrategy. Used by the router.
• The HttpClient API (under @angular/common/http): typed HTTP requests, interceptors, JSONP, progress events, and the SSR-aware provideHttpClient configuration.
• Locale data: numbered formats, plural rules, currency symbols. The data is generated from CLDR.
• Upgrade helpers under @angular/common/upgrade for hybrid Angular.js apps.

Directory layout

packages/common/
├── src/
│   ├── directives/         # NgIf, NgFor, NgSwitch, NgClass, NgStyle, ...
│   ├── pipes/              # AsyncPipe, DatePipe, ...
│   ├── i18n/               # Locale-aware formatting
│   ├── location/           # PlatformLocation, Location, strategies
│   ├── viewport_scroller.ts
│   ├── network_state.ts
│   ├── platform_id.ts
│   └── ...
├── http/                   # HttpClient + interceptors
│   ├── src/
│   └── public_api.ts
├── locales/                # Per-locale data (en, en-US, es, ...)
├── upgrade/                # Angular.js (1.x) interop helpers
└── testing/                # CommonTestingModule

@angular/common/http is its own entry point — apps import HttpClient from @angular/common/http, not @angular/common.

Key abstractions

Type / function	File	What it is
NgIf, NgFor, NgSwitch	packages/common/src/directives/	The structural directives.
AsyncPipe	packages/common/src/pipes/async_pipe.ts	Subscribes to an Observable/Promise and emits the latest value.
NgOptimizedImage	packages/common/src/directives/ng_optimized_image/	The <img ngSrc> directive.
HttpClient	packages/common/http/src/client.ts	The HTTP API.
provideHttpClient	packages/common/http/src/provider.ts	The standalone configuration entry.
HttpInterceptor / HttpInterceptorFn	packages/common/http/src/interceptor.ts	Request/response interception API.
Location, LocationStrategy	packages/common/src/location/	URL manipulation; consumed by @angular/router.
formatDate, formatNumber, formatCurrency	packages/common/src/i18n/	The locale-aware formatters.

How HttpClient is wired

graph LR
  Component --> HttpClient
  HttpClient --> Chain["HttpHandler chain<br/>(interceptors)"]
  Chain --> Backend["HttpBackend<br/>(XHR / Fetch / SSR)"]
  Backend --> Response
  Response --> Component

provideHttpClient(withFetch(), withInterceptors([authInterceptor, loggingInterceptor])) builds the chain. Each interceptor is a plain function (req, next) => Observable<HttpEvent>. The default backend is XHR; withFetch() swaps in a fetch-based backend that interoperates better with SSR streaming.

Integration points

• @angular/router depends on the location services (Location, LocationStrategy).
• @angular/platform-browser registers the platform-specific LocationStrategy providers.
• @angular/platform-server swaps in SSR-aware HttpClient providers (e.g., transferring HTTP cache state from server to client) via provideServerRendering.
• i18n: locale data is loaded via registerLocaleData and consumed by the date/number/currency pipes plus the LOCALE_ID token.

Locales

packages/common/locales/ contains generated locale data. The build derives it from CLDR using scripts under tools/. Adding a new locale isn't a feature most contributors need; the generation is automated.

Migrations

Notable migrations in packages/common/schematics/:

• provide-http-client — converts HttpClientModule.forRoot() calls to provideHttpClient().
• optimized-image — adds NgOptimizedImage to candidate <img> tags.

Entry points for modification

• A new built-in pipe: add it under packages/common/src/pipes/, export from pipes/index.ts, and add to the public golden.
• A new HTTP option: extend packages/common/http/src/ and the matching provideHttpClient feature in provider.ts.
• New NgOptimizedImage heuristic: most logic lives in ng_optimized_image/ng_optimized_image.ts plus the warning constants.