@angular/upgrade

Breaking Changes

compiler

• breaking

  Keyframes names are now prefixed with the component's "scope name".
  For example, the following keyframes rule in a component definition,
  whose "scope name" is host-my-cmp:

  @keyframes foo { ... }

  will become:

  @keyframes host-my-cmp_foo { ... }

  Any TypeScript/JavaScript code which relied on the names of keyframes rules
  will no longer match.

  The recommended solutions in this case are to either:

  • change the component's view encapsulation to the None or ShadowDom

  • define keyframes rules in global stylesheets (e.g styles.css)

  • define keyframes rules programmatically in code.

compiler-cli

• breaking

  Invalid constructors for DI may now report compilation errors

  When a class inherits its constructor from a base class, the compiler may now
  report an error when that constructor cannot be used for DI purposes. This may
  either be because the base class is missing an Angular decorator such as
  @Injectable() or @Directive(), or because the constructor contains parameters
  which do not have an associated token (such as primitive types like string).
  These situations used to behave unexpectedly at runtime, where the class may be
  constructed without any of its constructor parameters, so this is now reported
  as an error during compilation.

  Any new errors that may be reported because of this change can be resolved either
  by decorating the base class from which the constructor is inherited, or by adding
  an explicit constructor to the class for which the error is reported.

• breaking

  Angular compiler option enableIvy has been removed as Ivy is the only rendering engine.

core

• breaking

  Angular no longer supports Node.js versions 14.[15-19].x and 16.[10-12].x. Current supported versions of Node.js are 14.20.x, 16.13.x and 18.10.x.

• breaking

  TypeScript versions older than 4.8 are no longer supported.

• breaking

  Existing iframe usages may have security-sensitive attributes applied as an attribute or property binding in a template or via host bindings in a directive. Such usages would require an update to ensure compliance with the new stricter rules around iframe bindings.

• breaking

  Existing iframe usages may have src or srcdoc preceding other attributes. Such usages may need to be updated to ensure compliance with the new stricter rules around iframe bindings.

forms

• breaking

  setDisabledState will always be called when a ControlValueAccessor is attached. You can opt-out with FormsModule.withConfig or ReactiveFormsModule.withConfig.

localize

• breaking

  canParse method has been removed from all translation parsers in @angular/localize/tools. analyze should be used instead.

  • the hint parameter in theparse methods is now mandatory.

router

• breaking

  Previously, the RouterOutlet would immediately
  instantiate the component being activated during navigation. Now the
  component is not instantiated until the change detection runs. This
  could affect tests which do not trigger change detection after a router
  navigation. In rarer cases, this can affect production code that relies
  on the exact timing of component availability.

• breaking

  The title property is now required on ActivatedRouteSnapshot

• breaking

  relativeLinkResolution is no longer configurable in
  the Router. This option was used as a means to opt out of a bug fix.

Deprecations

common

• deprecated

  The DATE_PIPE_DEFAULT_TIMEZONE token is now deprecated in favor
  of the DATE_PIPE_DEFAULT_OPTIONS token, which accepts an object
  as a value and the timezone can be defined as a field (called timezone)
  on that object.

core

• deprecated

  The ability to pass an NgModule to the providedIn option for
  @Injectable and InjectionToken is now deprecated.

  providedIn: NgModule was intended to be a tree-shakable alternative to
  NgModule providers. It does not have wide usage, and in most cases is used
  incorrectly, in circumstances where providedIn: 'root' should be
  preferred. If providers should truly be scoped to a specific NgModule, use
  NgModule.providers instead.

  • The ability to set providedIn: 'any' for an @Injectable or
    InjectionToken is now deprecated.

  providedIn: 'any' is an option with confusing semantics and is almost
  never used apart from a handful of esoteric cases internal to the framework.

• deprecated

  The bit field signature of Injector.get() has been deprecated, in favor of the new options object.

• deprecated

  The bit field signature of TestBed.inject() has been deprecated, in favor of the new options object.

router

• deprecated

  The RouterLinkWithHref directive is deprecated, use the RouterLink directive instead. The RouterLink contains the code from the RouterLinkWithHref to handle elements with href attributes.

common

compiler

compiler-cli

core

forms

http

language-service

localize

platform-server

router

Special Thanks

Alan Agius, AleksanderBodurri, Alex Castle, Alex Rickabaugh, Andrew Kushnir, Andrew Scott, Charles Lyding, Dylan Hunn, Ferdinand Malcher, George Kalpakas, Jeremy Elbourn, Jessica Janiuk, JiaLiPassion, Joey Perrott, JoostK, Kara Erickson, Kristiyan Kostadinov, Martin Probst, Matthias Weiß, Matthieu Riegler, Paul Gschwendtner, Pawel Kozlowski, Sabareesh Kappagantu, WD Snoeijer, angular-robot[bot], arturovt, ced, dario-piotrowicz, ivanwonder and jaybell