Angular, the widely-used JavaScript framework, keeps evolving with the arrival of version 15. This update brings exciting new features and enhancements, alongside some important changes to be aware of. Let’s delve into the key aspects of upgrading your Angular applications to version 15.
Deprecations in Angular 15
Heads Up! Some Features Are on Their Way Out
Angular 15 introduces deprecations for certain features, signaling their eventual removal in future versions. Here’s a breakdown of what’s changing:
- DATE_PIPE_DEFAULT_TIMEZONE: This option is being superseded by
DATE_PIPE_DEFAULT_OPTIONS
. WithinDATE_PIPE_DEFAULT_OPTIONS
, the time zone is now defined using thetimezone
field. - Injector.get() with InjectFlags: This method is being deprecated in favor of using the
InjectOptions
object when callingInjector.get()
. - TestBed.inject() with InjectFlags: Similar to
Injector.get()
,TestBed.inject()
also requires the newInjectOptions
object instead of theInjectFlags
parameter. - providedIn: NgModule for @Injectable and InjectionToken: The usage of
providedIn: NgModule
orprovidedIn: 'any'
for@Injectable
orInjectionToken
is being discouraged. Consider usingprovidedIn: 'root'
instead. If you need scoping within a specificNgModule
, useNgModule.providers
instead. - RouterLinkWithHref Directive: This directive is being phased out. Its functionality is now fully incorporated into the
RouterLink
directive, so you can switch to using that instead.
Upgrade from Angular v14 to Angular v15
Before Upgrading:
Check Compatibility: Ensure you’re using supported versions of Node.js (14.20.x, 16.13.x, or 18.10.x) and TypeScript (version 4.8 or later) with your Angular project.Upgrade Steps:
- Navigate: Open a terminal or command prompt and navigate to your Angular application’s project directory.
- Run Update Command: Execute the following command to upgrade your application to Angular v15:
ng update @angular/core@15 @angular/cli@15
Post-Upgrade Considerations:
- Remove
enableIvy
: Since Ivy is the sole rendering engine in Angular v15, theenableIvy
setting in yourtsconfig.json
is no longer necessary and can be removed. - Ensure
ActivatedRouteSnapshot
Titles: Verify that allActivatedRouteSnapshot
objects within your application possess atitle
property. This property is now mandatory in v15. - Router’s
relativeLinkResolution
: Be aware thatrelativeLinkResolution
is no longer configurable in the v15 Router. This setting previously allowed opting out of a bug fix that is now the standard behavior. - Update
TestBed.inject()
: If you use theInjectFlags
parameter withTestBed.inject()
, update it to use the newInjectOptions
parameter instead, asInjectFlags
is deprecated in v15. providedIn: 'any'
Deprecation: UsingprovidedIn: 'any'
for@Injectable
orInjectionToken
is no longer recommended in v15.