Upgrading @angular/platform-browser-dynamic 13 to 14
Breaking13.4.0 → 14.3.0Breaking26Security2Platform11Deprecated94New151Changed39Fixed213Other39
BreakingUpgrade verdict
24 breaking changes and 11 platform requirement changes and 2 security fixes.
In plain terms
- Custom location strategies need to add a new required member. The Location service no longer relies on PlatformLocation.
- Animation keyframe names get a component prefix, so any code that looked up the old names will break.
- The aotSummaries fields on TestBed were deprecated and unused, and are now removed. Just delete them from your code.
- A value like {length: 0} is no longer treated as empty by validators.
Must act Top 5 of 130 that need code or config changes
Node.js requirement changed in 14.0.0-next.6: ^12.20.0 || ^14.15.0 || >=16.10.0 → ^14.15.0 || >=16.10.0.
What you must change
Breaking24
Adds a new required class member that implementors of LocationStrategy must provide; Location no longer depends on PlatformLocation.
LocationStrategyLocationPlatformLocationKeyframes names are now prefixed with the component's scope name, so code relying on the old names no longer matches.
Removes the unused aotSummaries fields from TestBed APIs.
TestBedaotSummariesObjects with a length key set to zero no longer validate as empty.
Removes the deprecated initialNavigation: 'enabled' option, replaced by 'enabledBlocking'.
initialNavigationThe component type on ActivatedRoute and ActivatedRouteSnapshot no longer includes string.
ActivatedRouteActivatedRouteSnapshotcomponentRemoves deprecated initialNavigation option.
initialNavigationRemoves unused string type for ActivatedRoute.component.
ActivatedRoute.componentHardens attribute and property binding rules for <iframe> elements, which may require updates to existing iframe usages.
<iframe>The AnimationDriver.getParentElement method is now required for implementors of the interface.
AnimationDriver.getParentElementAnimationDriverForms [email] input value is now considered true if defined with any value other than false and 'false'.
Forms model classes now accept a generic type parameter, with untyped versions available to opt out.
Queries including + now query for + instead of space.
JSONP now throws an error when headers are set on a request.
Tightens parameter types of TransferState usage, which may reveal existing problematic calls.
TransferStateThe type of Route.pathMatch is now more strict, so usages may need explicit Route or Routes typing.
Route.pathMatchRouteRoutesThe Promise return type of LoadChildrenCallback is now restricted to Type<any>|NgModuleFactory<any>.
LoadChildrenCallbackTypeNgModuleFactoryLazy loaded route configs are now validated once loaded, so invalid configs error in dev mode.
Removes the setTimeout around redirect navigation when a guard returns a UrlTree, which can break tests that relied on the timeout.
UrlTreeRouter now takes only the first value emitted by resolvers instead of waiting for completion and using the last value.
ObservablesTaskTrackingZoneSpec now tracks periodic tasks until cancelled, changing pending macroTask behavior for setInterval.
TaskTrackingZoneSpecTaskTrackingZone.getTasksFor()setIntervalclearIntervalTaskTrackingZoneSpec now tracks periodic tasks until they are cancelled.
TaskTrackingZoneSpecsetIntervalclearIntervalMay break unit tests that implicitly depend on a specific number and sequence of change detections.
Router.initialUrl is now typed string|UrlTree and always holds the current internal UrlTree; use Router.url instead.
initialUrlRouter.urlRouterfinalUrlSecurity2
Hardens attribute and property binding rules for <iframe> elements.
<iframe>Sanitizes rawSrc and rawSrcset values in the NgOptimizedImage directive.
NgOptimizedImagerawSrcrawSrcsetPlatform11
Adds zone.js version 0.12.x as a valid peer dependency.
zone.jsSupports TypeScript 4.8.
Adds support for TypeScript 4.8.
Removes support for Node.js v12; Node.js v14.15 or later is required.
TypeScript versions older than 4.6 are no longer supported.
Drops support for Node.js 12.
Drops support for TypeScript 4.4 and 4.5.
Supports TypeScript 4.6.
Supports TypeScript 4.7.
Drops support for Node.js 12.
Adds support for TypeScript 4.6.
Deprecations to plan for
Deprecated93
Deprecates
createNgModuleRef in favor of the newly added createNgModule.createNgModuleRefcreateNgModuleDeprecates the bit field signature of
inject() in favor of a new options object, and deprecates InjectFlags.inject()InjectFlagsDeprecates the ngModuleFactory input of NgComponentOutlet in favor of a new ngModule input.
NgComponentOutletngModuleFactoryngModuleDeprecates the initialValueIsDefault option in favor of the identical nonNullable option.
initialValueIsDefaultnonNullableDeprecates passing both AbstractControlOptions and an async validators argument to a FormControl constructor.
AbstractControlOptionsFormControlDeprecates the resolver argument of RouterOutletContract.activateWith and the resolver field of OutletContext.
RouterOutletContract.activateWithOutletContextComponentFactoryResolverExcludes abstract classes from the strictInjectionParameters requirement.
strictInjectionParametersAdds the initial implementation of standalone components.
standalonePropagates the standalone flag to runtime.
standaloneAllows standalone types to be imported into NgModule scopes.
NgModuleSupports template binding to protected component members.
Improves error messages for NgModule structural issues.
NgModuleFixes an issue with incremental tracking of APIs for pipes.
Ensures full side-effectful registration of NgModules with ids.
NgModuleHandles forwardRef in imports of standalone components.
forwardRefHandles inline type-check blocks in nullish coalescing extended check.
Handles standalone components with cycles.
Preserves forwardRef for component scopes.
forwardRefReports invalid imports in standalone components during the resolve phase.
Supports resolving animation names from the DTS.
Updates the unknown tag error for AOT standalone components.
Uses existing imports for standalone dependencies.
Ignores the module.id anti-pattern for NgModule ids.
module.idNgModuleAdds FormBuilder.nonNullable.
FormBuilder.nonNullableAdds a FormRecord type.
FormRecordAdds untyped versions of the model classes for use in migration.
Implements strict types for the Angular Forms package.
Supports negative indices in FormArray methods.
FormArrayAdds a nonNullable option to FormControl for consistency.
FormControlAdds UntypedFormBuilder.
UntypedFormBuilderAllows NonNullableFormBuilder to be injected.
NonNullableFormBuilderCorrects the empty validator to handle objects with a property length: 0.
Fixes a typing bug in FormBuilder.
FormBuilderMakes UntypedFormBuilder assignable to FormBuilder, and vice versa.
UntypedFormBuilderFormBuilderFixes not picking up disabled state if group is swapped out and disabled.
Prevents FormBuilder from distributing unions to control types.
FormBuilderMakes forms code safe under property renaming.
Updates the typed forms migration to use FormArray<T> instead of FormArray<T[]>.
FormArrayUpdates the typed forms migration.
Makes Value and RawValue part of the public API.
ValueRawValueWarns on FormControls that are constructed with both options and asyncValidators.
FormControlEncodes + signs in query params as %2B.
Throws an error when headers are supplied in a JSONP request.
Provides a plugin to delegate rename requests to Angular.
Fixes detection of Angular for v14+ projects.
Ensures transitively loaded compiler code is tree-shakable.
Adds a migration to add explicit Route/Routes type.
RouteRoutesCopes with packages following APF v14+.
Deprecates no longer needed resolver fields.
Deprecates no longer needed resolver fields.
resolverKeeps a unique index for all components and directives.
Makes devtools fail elegantly for view engine apps.
Makes tab menu action button icons smaller.
Makes small frames clickable.
Merges frames in the range.
Migrates devtools and demo app to scss for styling.
Moves highlighter placement to avoid overlap.
Adds a new icon and active status.
Shows the console reference only for the currently selected element to reduce noise.
Opens expansion panels by default and applies styling to the expansion header.
Optionally shows change detection duration only when run.
Passes each datasource through to its own material tree component.
Passes input/output data through from the application to the devtools UI.
Patches life cycle hooks.
Removes the timeout and adds a new loading/error state message.
Renames app component to app todo component.
Renames timeline graph options.
Reorients the split pane when screen width goes under 500 px.
Rerenders the tree on resize to keep the tree within view.
Scrolls the profiler frame info tab independently of the active visualizer.
Selects the DOM element on double click of a node.
Sets the showNode option to show most nodes in the treegraph.
showNodeSets the bar graph as the default option.
Shows frame drops in the timeline.
Shows the console reference key on each selected element.
Shows timeline bars with color dependent on the framerate.
Simplifies component styling for the tabs component.
Deprecates sorting directive properties by name.
Deprecates the combined view visualizer in favor of separate components for each visualizer.
Deprecates the existing script injection path in favor of trusted types support.
Deprecates the old highlight synchronization between source application and component in the presentation tree.
Deprecates the previous breadcrumb theming.
Deprecates the older flamegraph in favor of the latest version.
Deprecates the previous bargraph formatter.
Deprecates the previous record formatter in favor of one that gets directive values.
Deprecates the previous coverage tooling in favor of karma-coverage.
Deprecates the previous coverage setup in favor of karma-coverage with clear context set to true.
Deprecates the previous layout in favor of a flamechart with a better layout.
Deprecates the previous timeline and aggregated view rendering in favor of flamegraph.
Deprecates the previous labeling in favor of tag names.
Deprecates the fixed color scheme in favor of the user preferred color scheme.
Deprecates the getWindow method for setting a console reference in favor of the window object.
getWindowDeprecates the previous row click binding in favor of wrapping the entire row in a div.
API changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
class JitCompilerFactory implements CompilerFactory - added:
const RESOURCE_CACHE_PROVIDER: Provider[] - added:
const VERSION: Version - added:
const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - added:
const ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS: StaticProvider[] - added:
const ɵplatformCoreDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - added:
method JitCompilerFactory.createCompiler(options?: CompilerOptions[]): Compiler
- removed:
class JitCompilerFactory implements CompilerFactory - removed:
const RESOURCE_CACHE_PROVIDER: Provider[] - removed:
const VERSION: Version - removed:
const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - removed:
const ɵINTERNAL_BROWSER_DYNAMIC_PLATFORM_PROVIDERS: StaticProvider[] - removed:
const ɵplatformCoreDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - removed:
method JitCompilerFactory.createCompiler(options?: CompilerOptions[]): Compiler
- added:
class BrowserDynamicTestingModule - added:
class ɵDOMTestComponentRenderer extends TestComponentRenderer - added:
const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - added:
const ɵplatformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef - added:
constructor ɵDOMTestComponentRenderer(_doc: any) - added:
method ɵDOMTestComponentRenderer.insertRootElement(rootElId: string): void - added:
method ɵDOMTestComponentRenderer.removeAllRootElements(): void - 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]> - added:
static property ɵDOMTestComponentRenderer.ɵfac: i0.ɵɵFactoryDeclaration<ɵDOMTestComponentRenderer, never> - added:
static property ɵDOMTestComponentRenderer.ɵprov: i0.ɵɵInjectableDeclaration<ɵDOMTestComponentRenderer>
- removed:
class BrowserDynamicTestingModule - removed:
class ɵDOMTestComponentRenderer extends TestComponentRenderer - removed:
const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[] | undefined) => PlatformRef - removed:
const ɵplatformCoreDynamicTesting: (extraProviders?: any[]) => PlatformRef - removed:
constructor ɵDOMTestComponentRenderer(_doc: any) - removed:
method ɵDOMTestComponentRenderer.insertRootElement(rootElId: string): void - removed:
method ɵDOMTestComponentRenderer.removeAllRootElements(): void - 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]> - removed:
static property ɵDOMTestComponentRenderer.ɵfac: i0.ɵɵFactoryDeclaration<ɵDOMTestComponentRenderer, never> - removed:
static property ɵDOMTestComponentRenderer.ɵprov: i0.ɵɵInjectableDeclaration<ɵDOMTestComponentRenderer>