Upgrading @angular/platform-browser-dynamic 20 to 21
Breaking20.3.34 → 21.2.25Breaking32Security30Platform3Deprecated5New82Changed28Fixed300Other7
BreakingUpgrade verdict
30 breaking changes and 3 platform requirement changes and 30 security fixes.
In plain terms
- In translated ICU messages, only attributes Angular recognizes from HTML are kept. Any other attribute is removed and will not appear on the page.
- Renames field to fieldTree in FieldContext and ValidationError.
- Code passing ngModuleFactory to NgComponentOutlet must stop using that input.
- The ignoreChangesOutsideZone option is no longer available.
Must act Top 5 of 68 that need code or config changes
What you must change
Breaking30
Angular now only applies known HTML attributes in translated ICU content; unknown attributes are dropped and not rendered.
Renames field to fieldTree in FieldContext and ValidationError.
FieldContextValidationErrorfieldTreeRemoves the ngModuleFactory input of NgComponentOutlet.
NgComponentOutletngModuleFactoryRemoves the
ignoreChangesOutsideZone option.ignoreChangesOutsideZoneRemoves
moduleId from Component metadata.moduleIdComponentRemoves the deprecated
interpolation option on Components.interpolationComponentRemoves the deprecated ApplicationConfig export from platform-browser.
ApplicationConfigRemoves the deprecated UpgradeAdapter.
UpgradeAdapterRemoves NgModuleFactory; use NgModule instead.
NgModuleFactoryNgModuleServer-side bootstrapping no longer relies on a global platform injector and passes a BootstrapContext.
bootstrapApplicationBootstrapContextgetPlatform()destroyPlatform()Removes the
ignoreChangesOutsideZone option for configuring ZoneJS change detection behavior.ignoreChangesOutsideZoneAngular no longer provides a ZoneJS change detection scheduler by default; add
provideZoneChangeDetection to bootstrap providers.provideZoneChangeDetectionbootstrapApplicationbootstrapModuleAppModuleRemoves the deprecated
ApplicationConfig export from @angular/platform-browser; import it from @angular/core instead.ApplicationConfigRemoves
UpgradeAdapter; use upgrade/static instead.UpgradeAdapterupgrade/staticDrops support for IE and non-Chromium Edge.
Introduces BootstrapContext for server bootstrapping, removing reliance on a global platform injector.
BootstrapContextbootstrapApplicationgetPlatform()destroyPlatform()Reverts support for nested animations in core.
Changes the shape of SignalFormsConfig.classes so each function takes a Field directive instead of a FieldState.
SignalFormsConfig.classesFieldStateFieldprovideSignalFormsConfigRedoes the signal forms metadata API.
Disallows compiling with the emitDeclarationOnly TypeScript compiler option enabled.
emitDeclarationOnlyChanges ngComponentOutletContent type to Node[][] | undefined instead of any[][] | undefined.
ngComponentOutletContentPreviously hidden type issues in host bindings may now surface in builds.
typeCheckHostBindingsangularCompilerOptionsThe compiler now errors when the emitDeclarationOnly TS option is enabled.
emitDeclarationOnlyCombining provideZoneChangeDetection with removed ZoneJS polyfills no longer disables the internal scheduler.
provideZoneChangeDetectionNgZoneTestBed now rethrows errors regardless of provideZoneChangeDetection usage.
provideZoneChangeDetectionTestBedrethrowApplicationErrorsconfigureTestingModuleStandardizes custom element signal inputs to be accessed directly instead of as function calls.
elementRef.newInputelementRef.oldInputNotes that the new forms directive conflicts with existing FormArray directives or formArray inputs on the same element.
FormArrayformArrayMakes
lastSuccessfulNavigation a signal that must be invoked.lastSuccessfulNavigationTestBed now provides a fake PlatformLocation supporting the Navigation API, which may break some tests.
TestBedPlatformLocationMockPlatformLocationRouter navigations may take several additional microtasks to complete, which can affect timing-sensitive tests and rarely production apps.
Security30
Disallows event handler attributes in Meta.
MetaSanitizes host bindings on concrete hosts.
Rejects dynamic script host elements in core.
Prevents caching of HTTP responses that carry Set-Cookie headers.
Uses cryptographically secure SHA-256 for transfer cache key generation.
Sanitizes two-way properties in the compiler.
Hardens TransferState restoration against DOM clobbering.
TransferStateHardens platform location origin validation during SSR.
Strips sensitive headers on cross-origin redirects in service-worker.
Hardens the inherit definition feature against polluted prototypes.
Uses Object.create(null) for LOCALE_DATA as a hardening measure.
LOCALE_DATAObject.create()Throws on suspicious URLs and restricts protocol-relative URLs in platform-server.
Sanitizes placeholder values.
Prevents namespaced SVG <style> elements from being stripped.
Sanitizes dynamic href and xlink:href bindings on SVG a elements.
hrefxlink:hrefStrips namespaced SVG script elements during template compilation.
Normalizes tag names in runtime i18n attribute security context lookup.
Sanitizes meta selectors.
Prevents SSRF bypasses via backslash URLs in HttpClient.
HttpClientSecures location and document initialization against SSRF and path hijack.
Validates security-sensitive attributes in i18n bindings.
Prevents SSRF bypasses via protocol-relative and backslash URLs in platform-server.
Validates the locale in getOutputPathFn to prevent path traversal in localize.
getOutputPathFnSanitizes translated attribute bindings with interpolations.
Blocks creation of sensitive URI attributes from ICU messages.
Prevents XSS via SVG animation attributeName and MathML/SVG URLs in the compiler.
Sanitizes sensitive attributes on SVG script elements.
Enables XSRF protection for same-origin absolute URLs.
Prevents XSS via SVG animation attributeName and MathML/SVG URLs in the compiler.
attributeNamePrevents XSRF token leakage to protocol-relative URLs.
Platform3
Adds support for TypeScript 6.
Drops support for TypeScript 5.8.
Drops support for TypeScript versions less than 5.9.
Deprecations to plan for
Deprecated5
Deprecates ServerXhr in @angular/platform-server.
ServerXhrDeprecates XHR support in @angular/platform-server in favor of standard fetch APIs.
@angular/platform-serverDeprecates the
VERSION export from @angular/upgrade.VERSIONVERSION from @angular/upgrade is deprecated; use the entry from @angular/upgrade/static instead.VERSIONDeprecates
HttpResponseBase.statusText.HttpResponseBase.statusTextAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
class JitCompilerFactory implements CompilerFactory - removed:
const VERSION: Version - removed:
const platformBrowserDynamic: (extraProviders?: StaticProvider[]) => PlatformRef - removed:
method JitCompilerFactory.createCompiler(options?: CompilerOptions[]): Compiler
- removed:
class BrowserDynamicTestingModule - removed:
const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[]) => PlatformRef - removed:
static property BrowserDynamicTestingModule.ɵfac: i0.ɵɵFactoryDeclaration<BrowserDynamicTestingModule, never> - removed:
static property BrowserDynamicTestingModule.ɵinj: i0.ɵɵInjectorDeclaration<BrowserDynamicTestingModule> - removed:
static property BrowserDynamicTestingModule.ɵmod: i0.ɵɵNgModuleDeclaration<BrowserDynamicTestingModule, never, never, [typeof i1.BrowserTestingModule]>
- added:
class JitCompilerFactory implements CompilerFactory - added:
const VERSION: Version - added:
const platformBrowserDynamic: (extraProviders?: StaticProvider[]) => PlatformRef - added:
method JitCompilerFactory.createCompiler(options?: CompilerOptions[]): Compiler
- added:
class BrowserDynamicTestingModule - added:
const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[]) => PlatformRef - added:
static property BrowserDynamicTestingModule.ɵfac: i0.ɵɵFactoryDeclaration<BrowserDynamicTestingModule, never> - added:
static property BrowserDynamicTestingModule.ɵinj: i0.ɵɵInjectorDeclaration<BrowserDynamicTestingModule> - added:
static property BrowserDynamicTestingModule.ɵmod: i0.ɵɵNgModuleDeclaration<BrowserDynamicTestingModule, never, never, [typeof i1.BrowserTestingModule]>