Upgrading @angular/platform-browser-dynamic 17 to 18
Breaking17.3.12 → 18.2.14Breaking47Security1Platform2Deprecated10New40Changed4Fixed234Other6
BreakingUpgrade verdict
37 breaking changes and 2 platform requirement changes and a security fix.
In plain terms
- Server-side apps now receive a bootstrap context object instead of relying on a shared global platform, and platform helpers behave differently on the server.
- On the server, the global platform is no longer used, so getting it returns nothing and destroying it does nothing.
- Tests using fakeAsync will now automatically run any timers left pending when the test function finishes.
- A deprecated animation helper method has been removed, so code calling it will no longer work.
Must act Top 5 of 50 that need code or config changes
Node.js requirement changed in 18.1.0-next.1: ^18.13.0 || >=20.9.0 → ^18.19.1 || ^20.11.1 || >=22.0.0.
What you must change
Breaking37
Introduces
BootstrapContext for server bootstrapping, removing reliance on a global platform injector.BootstrapContextbootstrapApplicationServer-side bootstrapping no longer relies on a global platform injector;
getPlatform() returns null and destroyPlatform() is a no-op on the server.getPlatform()destroyPlatform()fakeAsync now flushes pending timers at the end of the given function by default.
fakeAsyncRemoves deprecated
matchesElement from AnimationDriver.AnimationDrivermatchesElementRemoves deprecated
isPlatformWorkerApp and isPlatformWorkerUi APIs.isPlatformWorkerAppisPlatformWorkerUiRemoves support for unassignable expressions in two-way bindings.
Removes deprecated transfer state APIs.
StateKeyTransferStatemakeStateKeyRemoves deprecated Testability methods.
TestabilityRemoves the unused
RESOURCE_CACHE_PROVIDER API.RESOURCE_CACHE_PROVIDERRemoves the deprecated
platformDynamicServer API.platformDynamicServerRemoves the deprecated
ServerTransferStateModule API.ServerTransferStateModuleRemoves deprecated useAbsoluteUrl and baseUrl from PlatformConfig; provide an absolute url instead.
useAbsoluteUrlbaseUrlPlatformConfigurlRemoves legacy URL handling logic.
ComponentFixture autoDetect no longer refreshes OnPush host views that are not marked dirty.ComponentFixtureautoDetectOnPushmarkForCheckChangeDetectionStrategy.DefaultRemoves Testability methods increasePendingRequestCount, decreasePendingRequestCount and getPendingRequestCount.
increasePendingRequestCountdecreasePendingRequestCountgetPendingRequestCountHTTP transfer cache now prevents caching of requests requiring authorization by default.
withHttpTransferCacheincludeRequestsWithAuthHeadersRemoves deprecated StateKey, TransferState and makeStateKey from @angular/platform-browser; use @angular/core instead.
StateKeyTransferStatemakeStateKeyRemoves the unused RESOURCE_CACHE_PROVIDER APIs from @angular/platform-browser-dynamic.
RESOURCE_CACHE_PROVIDERRemoves deprecated platformDynamicServer; import @angular/compiler and use platformServer instead.
platformDynamicServerplatformServerRemoves deprecated ServerTransferStateModule; TransferState can be used without providing this module.
ServerTransferStateModuleTransferStateRemoves legacy Node.js URL parsing from ServerPlatformLocation, changing pathname and port handling.
ServerPlatformLocationExcludes authenticated HTTP requests from caching by default; opt out with
includeRequestsWithAuthHeaders in withHttpTransferCache.withHttpTransferCacheincludeRequestsWithAuthHeadersAngular now ensures change detection runs even when state updates originate outside the zone.
provideZoneChangeDetection({schedulingMode: NgZoneSchedulingMode.NgZoneOnly})TestBedbootstrapApplicationBootstrapOptionsbootstrapModuleComponentFixture.whenStable now matches ApplicationRef.isStable, including unfinished router navigations and HttpClient requests.
ComponentFixture.whenStableApplicationRef.isStableHttpTestingController.verify()ComponentFixture.isStableModifies EventType from an enum to an object.
EventTypeAngular only supports writable expressions inside of two-way bindings.
OnPush root views must be marked dirty for host bindings to refresh.OnPushChange detection now refreshes views still marked for check after a round, which can surface NG0103 infinite loop errors.
ApplicationRefChangeDetectorRef.detectChangesNG0103Removes the async test helper; use waitForAsync instead.
asyncwaitForAsyncChange detection timing with event or run coalescing in NgZone is now the first of setTimeout or requestAnimationFrame.
NgZonesetTimeoutrequestAnimationFrameafterNextRenderNewly created or reattached views marked for check are now guaranteed to refresh in the same change detection cycle.
ExpressionChangedAfterItHasBeenCheckedErrorGuards can now return RedirectCommand for redirects in addition to UrlTree.
RedirectCommandUrlTreeRouteAllows Route.redirectTo to be a function in addition to a string, so code expecting only a string must be adjusted.
Route.redirectToRouteGuard redirects via UrlTree now use replaceUrl when the initial navigation used replaceUrl; use RedirectCommand to override.
UrlTreereplaceUrlNavigationBehaviorOptionsRedirectCommandRouted components now always get providers from the route injector hierarchy and never inherit from the RouterOutlet.
RouterOutletNgModuleprovidersCompletes the removal of the deprecated
async function; use waitForAsync instead.asyncwaitForAsyncComponentFixture.autoDetect now runs change detection within ApplicationRef.tick, changing refresh order in tests.
ComponentFixture.autoDetectApplicationRef.tickSecurity1
Addresses Trusted Types violations in @angular/upgrade.
@angular/upgradePlatform2
Drops support for TypeScript versions older than 5.4.
Angular no longer supports TypeScript versions older than 5.4.
Deprecations to plan for
Deprecated10
Deprecates the ignoreChangesOutsideZone option.
ignoreChangesOutsideZoneAdds back the phase flag option as a deprecated API.
Deprecates Local Data API functions.
Deprecates @Component.interpolation.
@Component.interpolationDeprecates HttpClientModule and related modules.
HttpClientModuleDeprecates the getLocale* and getCurrencySymbol locale data functions in common.
getCurrencySymbolgetLocaleCurrencyCodegetLocaleCurrencyNamegetLocaleCurrencySymbolgetLocaleDateFormatgetLocaleDateTimeFormatgetLocaleDayNamesgetLocaleDayPeriodsDeprecates @Component.interpolation in favor of Angular's delimiters.
@Component.interpolationDeprecates HttpClientModule, HttpClientXsrfModule and HttpClientJsonpModule, which can be replaced by provider functions.
HttpClientModuleHttpClientXsrfModuleHttpClientJsonpModuleDeprecates
@Component.interpolation in favor of Angular's delimiters.@Component.interpolationDeprecates
HttpClientModule and related modules in favor of provider functions.HttpClientModuleHttpClientXsrfModuleHttpClientJsonpModuleAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- removed:
const RESOURCE_CACHE_PROVIDER: Provider[] - changed:
const platformBrowserDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef → const platformBrowserDynamic: (extraProviders?: StaticProvider[]) => PlatformRef - changed:
const ɵplatformCoreDynamic: (extraProviders?: StaticProvider[] | undefined) => PlatformRef → const ɵplatformCoreDynamic: (extraProviders?: StaticProvider[]) => PlatformRef
- changed:
const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[] | undefined) => PlatformRef → const platformBrowserDynamicTesting: (extraProviders?: StaticProvider[]) => PlatformRef