npm @angular/router 14.0.0
v14.0.0

latest releases: 19.0.0-rc.2, 18.2.12, 19.0.0-rc.1...
2 years ago

14.0.0 (2022-06-02)

Breaking Changes

animations

  • The AnimationDriver.getParentElement method has become required, so any
    implementors of this interface are now required to provide an implementation
    for this method. This breakage is unlikely to affect application developers,
    as AnimationDriver is not expected to be implemented in user code.

common

  • Adds new required class member that any implementors of the LocationStrategy will need to satisfy.
    Location does not depend on PlatformLocation anymore.

compiler

  • 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.
  • 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.

core

  • Support for Node.js v12 has been removed as it will become EOL on 2022-04-30. Please use Node.js v14.15 or later.

  • TypeScript versions older than 4.6 are no longer supported.

  • Forms [email] input coercion

    Forms [email] input value will be considered as true if it is defined with any value rather
    than false and 'false'.

  • Since Ivy, TestBed doesn't use AOT summaries. The aotSummaries fields in TestBed APIs were present, but unused. The fields were deprecated in previous major version and in v14 those fields are removed. The aotSummaries fields were completely unused, so you can just drop them from the TestBed APIs usage.

forms

  • Forms classes accept a generic.

    Forms model classes now accept a generic type parameter. Untyped versions of these classes are available to opt-out of the new, stricter behavior.

  • objects with a length key set to zero will no longer validate as empty.

    This is technically a breaking change, since objects with a key length and value 0 will no longer validate as empty. This is a very minor change, and any reliance on this behavior is probably a bug anyway.

http

  • Queries including + will now actually query for + instead of space.
    Most workarounds involving custom codecs will be unaffected.
    Possible server-side workarounds will need to be undone.

  • JSONP will throw an error when headers are set on a reques

    JSONP does not support headers being set on requests. Before when
    a request was sent to a JSONP backend that had headers set the headers
    were ignored. The JSONP backend will now throw an error if it
    receives a request that has any headers set. Any uses of JSONP
    on requests with headers set will need to remove the headers
    to avoid the error.

platform-browser

  • This change may cause a breaking change in unit tests that are implicitly depending on a specific
    number and sequence of change detections in order for their assertions to pass.

  • This may break invalid calls to TransferState methods.

    This tightens parameter types of TransferState usage, and is a minor breaking change which may reveal existing problematic calls.

router

  • The type of Route.pathMatch is now more strict. Places that use
    pathMatch will likely need to be updated to have an explicit
    Route/Routes type so that TypeScript does not infer the type as
    string.

  • When returning a Promise from the
    LoadChildrenCallback, the possible type is now restricted to
    Type<any>|NgModuleFactory<any> rather than any.

  • initialNavigation: 'enabled' was deprecated in v11 and is replaced by
    initialNavigation: 'enabledBlocking'.

  • The type of component on ActivatedRoute and ActivatedRouteSnapshot
    includes string. In reality, this is not the case. The component
    cannot be anything other than a component class.

    • The type of initialUrl is set to string|UrlTree but in reality,
      the Router only sets it to a value that will always be UrlTree
    • initialUrl is documented as "The target URL passed into the
      Router#navigateByUrl() call before navigation" but the value
      actually gets set to something completely different. It's set to the
      current internal UrlTree of the Router at the time navigation
      occurs.

    With this change, there is no exact replacement for the old value of
    initialUrl because it was enver intended to be exposed.
    Router.url is likely the best replacement for this.
    In more specific use-cases, tracking the finalUrl between successful
    navigations can also be used as a replacement.

  • Lazy loaded configs are now also validated once loaded like the
    initial set of routes are. Lazy loaded modules which have invalid Route
    configs will now error. Note that this is only done in dev mode so
    there is no production impact of this change.

  • When a guard returns a UrlTree, the router would previously schedule
    the redirect navigation within a setTimeout. This timeout is now removed,
    which can result in test failures due to incorrectly written tests.
    Tests which perform navigations should ensure that all timeouts are
    flushed before making assertions. Tests should ensure they are capable
    of handling all redirects from the original navigation.

  • Previously, resolvers were waiting to be completed
    before proceeding with the navigation and the Router would take the last
    value emitted from the resolver.
    The router now takes only the first emitted value by the resolvers
    and then proceeds with navigation. This is now consistent with Observables
    returned by other guards: only the first value is used.

zone.js

  • in TaskTrackingZoneSpec track a periodic task until it is cancelled

    The breaking change is scoped only to the plugin
    zone.js/plugins/task-tracking. If you used TaskTrackingZoneSpec and
    checked the pending macroTasks e.g. using (this.ngZone as any)._inner ._parent._properties.TaskTrackingZone.getTasksFor('macroTask'), then
    its behavior slightly changed for periodic macrotasks. For example,
    previously the setInterval macrotask was no longer tracked after its
    callback was executed for the first time. Now it's tracked until
    the task is explicitly cancelled, e.g with clearInterval(id).

    fixes 45350

Deprecations

common

  • The ngModuleFactory input of the NgComponentOutlet directive is deprecated in favor of a newly added ngModule input. The ngModule input accepts references to the NgModule class directly, without the need to resolve module factory first.

forms

  • The initialValueIsDefault option has been deprecated and replaced with the otherwise-identical nonNullable option, for the sake of naming consistency.
  • It is now deprecated to provide both AbstractControlOptions and an async validators argument to a FormControl. Previously, the async validators would just be silently dropped, resulting in a probably buggy forms. Now, the constructor call is deprecated, and Angular will print a warning in devmode.

router

  • The resolver argument of the RouterOutletContract.activateWith function and the resolver field of the OutletContext class are deprecated. Passing component factory resolvers are no longer needed. The ComponentFactoryResolver-related symbols were deprecated in @angular/core package since v13.

animations

Commit Description
feat - a6fa37bc6e make validateStyleProperty check dev-mode only (#45570)
feat - 79d334b138 provide warnings for non-animatable CSS properties (#45212)
fix - f8dc660605 allow animations with unsupported CSS properties (#44729)
fix - 2a75754ee8 apply default params when resolved value is null or undefined (#45339)
fix - e46b379204 implement missing transition delay (#44799)
perf - 5c7c56bc85 improve algorithm to balance animation namespaces (#45057)
perf - 4c778cdb28 made errors in the animations package tree shakeable (#45004)
perf - 7a81481fb2 Remove generic objects in favor of Maps (#44482)
perf - 6642e3c8fd remove no longer needed CssKeyframes classes (#44903)
refactor - 59559fdbac make AnimationDriver.getParentElement required (#45114)

bazel

Commit Description
feat - 636909fba7 allow for generated package.json files in ng_package (#45470)
feat - 28e835b4bb report error when dependency does not provide JS sources in ng_package (#45470)
feat - 68597bb0ca speed up dev-turnaround by bundling types only when packaging (#45405)
fix - f8a1ea0c11 do not error if files part of srcs are outside of package (#45622)
fix - 4b2e98d55d remove unnecessary file extractions from ng_package (#45470)
fix - d48e0ccc01 speed up d.ts bundling by configuring worker (#45900)
perf - 21a04ef5be use allowedInputs to avoid fs.stat (#46069)

common

Commit Description
feat - 31d7c3bd71 add getState method to LocationStrategy interface (#45648)
feat - c89cf63059 support NgModule as an input to the NgComponentOutlet (#44815)
feat - 38c03a2035 support years greater than 9999 (#43622)
fix - bedb257afc cleanup URL change listeners when the root view is removed (#44901)
fix - 10691c626b properly cast http param values to strings (#42643)
perf - 05d50b849b make NgLocalization token tree-shakable (#45118)

compiler

Commit Description
fix - bb8d7091c6 exclude empty styles from emitted metadata (#45459)
fix - 4d6a1d6722 scope css keyframes in emulated view encapsulation (#42608)
fix - f03e313f24 scope css keyframes in emulated view encapsulation (#42608)

compiler-cli

Commit Description
feat - 9cf14ff03d exclude abstract classes from strictInjectionParameters requirement (#44615)
feat - 0072eb48ba initial implementation of standalone components (#44812)
feat - 2142ffd295 propagate standalone flag to runtime (#44973)
feat - 6f653e05f9 standalone types imported into NgModule scopes (#44973)
feat - 752ddbc165 Support template binding to protected component members (#45823)
fix - 3d13343975 better error messages for NgModule structural issues (#44973)
fix - 046dad1a8d fix issue with incremental tracking of APIs for pipes (#45672)
fix - 27b4af7240 full side-effectful registration of NgModules with ids (#45024)
fix - 32c625d027 handle forwardRef in imports of standalone component (#45869)
fix - 06050ac2b4 handle inline type-check blocks in nullish coalescing extended check (#45454)
fix - a524a50361 handle standalone components with cycles (#46029)
fix - 724e88e042 preserve forwardRef for component scopes (#46139)
fix - 9cfea3d522 report invalid imports in standalone components during resolve phase (#45827)
fix - c0778b4dfc Support resolve animation name from the DTS (#45107)
fix - f2e5234e07 update unknown tag error for aot standalone components (#45919)
fix - 35f20afcac use existing imports for standalone dependencies (#46029)
perf - 8155428ba6 ignore the module.id anti-pattern for NgModule ids (#45024)

core

Commit Description
feat - 174ce7dd13 add ApplicationRef.destroy method (#45624)
feat - 5771b18a98 add the bootstrapApplication function (#45674)
feat - 69018c9f42 allow for injector to be specified when creating an embedded view (#45156)
feat - 94c949a60a allow for injector to be specified when creating an embedded view (#45156)
feat - e702cafcf2 allow to throw on unknown elements in tests (#45479)
feat - 6662a97c61 allow to throw on unknown elements in tests (#45479)
feat - a6675925b0 allow to throw on unknown properties in tests (#45853)
feat - 6eaaefd22e drop support for Node.js 12 (#45286)
feat - c9d566ce4b drop support for TypeScript 4.4 and 4.5 (#45394)
feat - b568a5e708 implement importProvidersFrom function (#45626)
feat - d5a6cd1111 implement EnvironmentInjector with adapter to NgModuleRef (#45626)
feat - 5a10fc4f82 implement standalone directives, components, and pipes (#45687)
feat - e461f716d4 move ANIMATION_MODULE_TYPE injection token into core (#44970)
feat - 94bba76a4a support TypeScript 4.6 (#45190)
feat - 29039fcdbc support TypeScript 4.7 (#45749)
feat - 225e4f2dbe triggerEventHandler accept optional eventObj (#45279)
feat - 401dec46eb update TestBed to recognize Standalone Components (#45809)
fix - 35653ce337 add more details to the MISSING_INJECTION_CONTEXT error (#46166)
fix - d36fa111eb avoid Closure Compiler error in restoreView (#45445)
fix - 0bc77f4cab better error message when unknown property is present (#46147)
fix - f3eb7d9ecb Ensure the StandaloneService is retained after closure minification (#45783)
fix - 701405fa71 handle AOT-compiled standalone components in TestBed correctly (#46052)
fix - ddce357d1d improve TestBed declarations standalone error message (#45999)
fix - ba9f30c9a6 include component name into unknown element/property error message (#46160)
fix - 9fa6f5a552 incorrectly inserting elements inside template element (#43429)
fix - d5719c2e0f input coercion (#42803)
fix - be161bef79 memory leak in event listeners inside embedded views (#43075)
fix - fa755b2a54 prevent BrowserModule providers from being loaded twice (#45826)
fix - 3172b4cc99 produce proper error message for unknown props on <ng-template>s (#46068)
fix - 4f1a813596 restore NgModule state correctly after TestBed overrides (#46049)
fix - 3f7ecec59b set correct context for inject() for component ctors (#45991)
fix - 4e413d9240 support nested arrays of providers in EnvironmentInjector (#45789)
fix - fde4942cdf throw if standalone components are present in @NgModule.bootstrap (#45825)
fix - 560188bf12 update unknown property error to account for standalone components in AOT (#46159)
fix - df339d8abf update unknown tag error for jit standalone components (#45920)
fix - aafac7228f verify standalone component imports in JiT (#45777)
perf - e9317aee71 allow checkNoChanges mode to be tree-shaken in production (#45913)
perf - 071c8af8ba avoid storing LView in ngContext (#45051)
perf - a96c4827c4 make Compiler, ApplicationRef and ApplicationInitStatus tree-shakable (#45102)
perf - 45d98e7ca5 make IterableDiffers and KeyValueDiffers tree-shakable (#45094)
perf - 1e60fe0a3e make LOCALE_ID and other tokens from ApplicationModule tree-shakable (#45102)
perf - 88f1168506 only track LViews that are referenced in ngContext (#45172)
refactor - 9add714b13 remove deprecated aotSummaries fields in TestBed config (#45487)

devtools tabs

Commit Description
fix - 6c284ef32e stop scroll occuring at tabs level

forms

Commit Description
feat - 2dbdebc646 Add FormBuilder.nonNullable. (#45852)
feat - e0a2248b32 Add a FormRecord type. (#45607)
feat - 7ee121f595 Add untyped versions of the model classes for use in migration. (#45205)
feat - 89d299105a Implement strict types for the Angular Forms package. (#43834)
feat - f490c2de4e support negative indices in FormArray methods. (#44848)
fix - 39be06037d Add a nonNullable option to FormControl for consistency.
fix - 4332897baa Add UntypedFormBuilder (#45268)
fix - 5d13e58aed Allow NonNullableFormBuilder to be injected. (#45904)
fix - 8dd3f82f94 Correct empty validator to handle objects with a property length: 0. (#33729)
fix - ff3f5a8d12 Fix a typing bug in FormBuilder. (#45684)
fix - fe0e42a996 Make UntypedFormBuilder assignable to FormBuilder, and vice versa. (#45421)
fix - b36dec6b5b not picking up disabled state if group is swapped out and disabled (#43499)
fix - 9f6fa5b746 Prevent FormBuilder from distributing unions to control types. (#45942)
fix - aa7b857be8 Property renaming safe code (#45271)
fix - cae1e44608 Update the typed forms migration to use FormArray instead of FormArray<T[]>. (#44933)
fix - d336ba96d9 Update the typed forms migration. (#45281)
fix - 018550ed50 Value and RawValue should be part of the public API. (#45978)
fix - 2e96cede3e Warn on FormControls that are constructed with both options and asyncValidators.

http

Commit Description
fix - 76a9a24cdc encode + signs in query params as %2B (#11058) (#45111)
fix - d43c0e973f Throw error when headers are supplied in JSONP request (#45210)

language-service

Commit Description
feat - 9d4af65e34 Provide plugin to delegate rename requests to Angular (#44696)
fix - 3ae133c69e Fix detection of Angular for v14+ projects (#45998)

localize

Commit Description
fix - a50e2da64a ensure transitively loaded compiler code is tree-shakable (#45405)

migrations

Commit Description
feat - d56a537196 Add migration to add explicit Route/Routes type (#45084)

ngcc

Commit Description
fix - 74a2e2e2ec cope with packages following APF v14+ (#45833)

platform-browser

Commit Description
fix - a01bcb8e7e do not run change detection when loading Hammer (#44921)
fix - b32647dc68 Make transfer state key typesafe. (#23020)
fix - c7bf75dd5e remove obsolete shim for Map comparison in Jasmine (#45521)
perf - 23c4c9601e avoid including Testability by default in bootstrapApplication (#45885)

platform-server

Commit Description
feat - dff5586d52 implement renderApplication function (#45785)
fix - 22c71be94c update renderApplication to move appId to options (#45844)

router

Commit Description
feat - f4fd1a8262 Add EnvironmentInjector to RouterOutlet.activateWith (#45597)
feat - 910de8bc33 Add Route.title with a configurable TitleStrategy (#43307)
feat - 4e0957a4e1 Add ability to specify providers on a Route (#45673)
feat - dea8c86cd5 add ariaCurrentWhenActive input to RouterLinkActive directive (#45167)
feat - 41e2a68e30 add type properties to all router events (#44189)
feat - 4962a4a332 Allow loadChildren to return a Route array (#45700)
feat - 791bd31424 set stricter type for Route.title (#44939)
feat - 50004c143b Support lazy loading standalone components with loadComponent (#45705)
fix - 7fd416d060 Fix type of Route.pathMatch to be more accurate (#45176)
fix - 1c11a57155 merge interited resolved data and static data (#45276)
fix - f8f3ab377b Remove any from LoadChildrenCallback type (#45524)
fix - d4fc12fa19 Remove deprecated initialNavigation option (#45729)
fix - 989e840cce Remove unused string type for ActivatedRoute.component (#45625)
fix - 64f837d2c0 Update Navigation#initialUrl to match documentation and reality (#43863)
fix - 96fd29c6d2 validate lazy loaded configs (#45526)
perf - f13295f3a3 cancel the navigation instantly if at least one resolver doesn't emit any value (#45621)
refactor - 1d2f5c1101 deprecate no longer needed resolver fields (#45597)
refactor - 7b367d9d90 Remove unnecessary setTimeout in UrlTree redirects (#45735)
refactor - c9679760b2 take only the first emitted value of every resolver to make it consistent with guards (#44573)

service-worker

Commit Description
feat - ec0a0e0669 add cacheOpaqueResponses option for data-groups (#44723)
feat - bd04fbc05b emit a notification when the service worker is already up to date after check (#45216)

Special Thanks

Adrian Kunz, Alan Agius, AleksanderBodurri, Alex Rickabaugh, AlirezaEbrahimkhani, Amir Rustamzadeh, Andrew Kushnir, Andrew Scott, Chabbey François, Charles Lyding, Cédric Exbrayat, Daan De Smedt, David Schmidt, Derek Cormier, Dmitrij Kuba, Doug Parker, Dylan Hunn, Emma Twersky, George Kalpakas, George Looshch, Jan Kuehle, Jessica Janiuk, JiaLiPassion, JimMorrison723, Joe Martin (Crowdstaffing), Joey Perrott, JoostK, Kristiyan Kostadinov, Krzysztof Platis, Leosvel Pérez Espinosa, Maddie Klein, Mark Whitfeld, Martin Sikora, Michael-Doner, Michal Materowski, Minko Gechev, Paul Gschwendtner, Pawel Kozlowski, Payam Shahidi, Pusztai Tibor, Ricardo Mattiazzi Baumgartner, Roy Dorombozi, Ruslan Lekhman, Samuel Littley, Sergej Grilborzer, Sumit Arora, Tobias Speicher, Virginia Dooley, Zack Elliott, alirezaghey, ananyahs96, arturovt, cexbrayat, dario-piotrowicz, ivanwonder, kamikopi, markostanimirovic, markwhitfeld, mgechev, renovate[bot], twerske and zverbeta

Don't miss a new router release

NewReleases is sending notifications on new releases.