@angular/platform-browser

The browser platform: the DOM Renderer2 implementation, browser-specific bootstrap (bootstrapApplication, BrowserModule), event handling, and the DomSanitizer that defends against XSS in trusted-HTML contexts.

Purpose

Bridges the Angular runtime to the browser:

• The DOM Renderer2 and its factory.
• The bootstrap APIs: bootstrapApplication (standalone), platformBrowser() + bootstrapModule() (legacy NgModule).
• Event handling that supports both passive and capture listeners.
• DomSanitizer and the SafeHtml/SafeStyle/SafeScript/SafeUrl/SafeResourceUrl types.
• BrowserModule and its child BrowserAnimationsModule (still exported but rarely needed in standalone code).
• The hydration-bridge providers consumed by the runtime when provideClientHydration() is in use.
• Title and Meta services for page metadata.
• Event-replay wiring for the SSR @angular/ssr flow.

Directory layout

packages/platform-browser/
├── src/
│   ├── browser.ts             # bootstrapApplication, BrowserModule
│   ├── dom/                   # DomRenderer, events, debug
│   ├── security/              # DomSanitizer
│   ├── browser/                # Browser-specific platform tokens
│   ├── animations/            # BrowserAnimationsModule + provideAnimations
│   ├── hydration.ts           # Client-hydration providers
│   ├── meta.ts                # <meta> tag service
│   ├── title.ts               # document.title service
│   ├── private_export.ts      # framework-internal exports
│   └── ...
└── testing/                   # platform-browser/testing harness

Key abstractions

Type / function	File	What it is
bootstrapApplication	packages/platform-browser/src/browser.ts	Standalone-bootstrap entry point. Returns Promise<ApplicationRef>.
BrowserModule	same	Legacy NgModule that sets up the browser platform.
DomRendererFactory2	packages/platform-browser/src/dom/dom_renderer.ts	The factory @angular/core calls to obtain Renderer2 instances.
DomSanitizer	packages/platform-browser/src/security/dom_sanitization_service.ts	Trust API for binding raw HTML / styles / URLs.
provideAnimations, provideAnimationsAsync, provideNoopAnimations	packages/platform-browser/src/animations/	Animations runtime providers.
EventManagerPlugin	packages/platform-browser/src/dom/events/	The plugin system for event types beyond plain DOM events.
Title, Meta	packages/platform-browser/src/title.ts, meta.ts	Document metadata services.
enableDebugTools	packages/platform-browser/src/browser/tools/	Adds ng.profiler to the global ng object.

How a browser app boots

sequenceDiagram
  participant Main as main.ts
  participant Boot as bootstrapApplication
  participant Platform as PlatformRef
  participant App as ApplicationRef
  participant Component as Root component
  Main->>Boot: bootstrapApplication(App, {providers})
  Boot->>Platform: createPlatformFactory(...)
  Platform->>App: createApplication(providers)
  App->>App: register Renderer2 factory + event manager
  App->>Component: createComponent(rootDef)
  App->>Component: tick() (initial render)
  App->>Main: resolved Promise<ApplicationRef>

Subsequent renders are scheduled by the application's change-detection scheduler (in zoneful mode, an NgZone.onMicrotaskEmpty listener; in zoneless, an explicit microtask queued by markForCheck).

Sanitization

DomSanitizer is used when an application binds a value into a security-sensitive context: [innerHTML], [style], [href], [src]. Each binding has a SecurityContext that the bindings instructions feed into the runtime sanitizer in @angular/core.

Application code uses DomSanitizer.bypassSecurityTrustHtml(...) etc. only when it must, and review pushes back hard on uses that don't justify themselves.

Event handling

The DOM event manager supports plugins for non-standard event types. The default plugin handles regular DOM events with passive-listener defaults for touchstart/touchmove/scroll. Application-level event modifiers ((click.once), (click.passive)) are normalized here.

Hydration-aware event replay (the "deferred event replay" used by the SSR pipeline so user clicks during hydration aren't lost) is wired in packages/core/src/event_delegation_utils.ts and consumed by the platform via the event manager.

Hydration coordination

The package re-exports provideClientHydration and registers the platform-side providers needed to apply hydration annotations to real DOM nodes. Most of the hydration logic itself lives in @angular/core.

Integration points

• @angular/core — Renderer2 is consumed by every component. The token RendererFactory2 is provided by this package.
• @angular/animations — uses the rendererfactory chain to substitute an animation-aware renderer.
• @angular/platform-browser-dynamic — ships the JIT-compatible bootstrap (platformBrowserDynamic).
• @angular/platform-server — replaces this package in SSR builds.

Migrations

packages/platform-browser/schematics/ contains:

• Migration to provideAnimationsAsync (the async-loaded animations setup).
• Removal of BrowserModule.withServerTransition calls (replaced by hydration providers).

Entry points for modification

• A new bootstrap option: extend ApplicationConfig (in @angular/core) and the matching feature function here.
• A new event modifier: extend the event manager plugin in packages/platform-browser/src/dom/events/.
• A new sanitization context: coordinate with @angular/core since the bindings instructions emit the matching SecurityContext.