v19.0.0

Compare Source

Breaking Changes

cdk

• • Since cdk.high-contrast targets a media query instead of a class, the specificity of the styles it emits is lower than before.
• • The overlay stays are now loaded slightly later than before which can change their specificity. You may have to update any overlay style overrides.

• • Virtual scrolling lists now have proper type checking which can reveal some previously-hidden compilation errors.

  • fix(cdk/scrolling): adds ngTemplateContextGuard
    implements ngTemplateContextGuard for CdkVirtualForOf directive

material

• • The ripples styles are now loaded slightly later than before which can change their specificity. You may have to update any ripple style overrides.
• • mixinColor and CanColor have been removed. Use a host binding instead.
  • mixinDisableRipple and CanDisableRipple have been removed. Use input transforms instead.
  • mixinDisabled and CanDisable have been removed. Use input transforms instead.
  • mixinInitialized and HasInitialized have been removed. Use a Subject that emits in ngOnInit instead.
  • mixinTabIndex and HasTabIndex have been removed. Use input transforms instead.

google-maps

• • The new @​googlemaps/markerclusterer API should be imported instead of the old one. Read more at: https://github.com/googlemaps/js-markerclusterer
  • The MapMarkerClusterer class has been renamed to DeprecatedMapMarkerClusterer.
  • The map-marker-clusterer selector has been changed to deprecated-map-marker-clusterer.

multiple

• • In order for Material to be compatible with recent changes in Sass and upcoming changes in the CSS standard, tokens are now emitted in-place, rather the being hoisted to the top of the selector. As a result, some token overrides might not apply anymore. This is relevant primarily for the cases like @include mat.button-theme($theme); --mat-button-color: red;. It can be resolved by wrapping the overrides with & {}, for example @include mat.button-theme($theme); & { --mat-button-color: red; }.
• • MatButton.ripple is no longer available.
  • MatCheckbox.ripple is no longer available.
  • MatChip.ripple is no longer available.

material-date-fns-adapter

youtube-player

google-maps

material

cdk

mat

multiple

v19.0.0

Compare Source

Breaking Changes

compiler

• this.foo property reads no longer refer to template context variables. If you intended to read the template variable, do not use this..

core

• Angular directives, components and pipes are now standalone by default.

  • Specify standalone: false for declarations that are currently declared in @NgModules.
  • ng update for v19 will take care of this automatically.

• TypeScript versions less than 5.5 are no longer supported.

• Timing changes for effect API (in developer preview):

  • effects which are triggered outside of change detection run as part of
    the change detection process instead of as a microtask. Depending on the
    specifics of application/test setup, this can result in them executing
    earlier or later (or requiring additional test steps to trigger; see below
    examples).

  • effects which are triggered during change detection (e.g. by input
    signals) run earlier, before the component's template.

• ExperimentalPendingTasks has been renamed to PendingTasks.

• The autoDetect feature of ComponentFixture will now
  attach the fixture to the ApplicationRef. As a result, errors during
  automatic change detection of the fixture be reported to the ErrorHandler.
  This change may cause custom error handlers to observe new failures that were previously unreported.

• createComponent will now render default fallback with empty projectableNodes.

  • When passing an empty array to projectableNodes in the createComponent API, the default fallback content
    of the ng-content will be rendered if present. To prevent rendering the default content, pass document.createTextNode('') as a projectableNode.

  // The first ng-content will render the default fallback content if present
  createComponent(MyComponent. { projectableNodes: [[], [secondNode]] });
  
  // To prevent projecting the default fallback content:
  createComponent(MyComponent. { projectableNodes: [[document.createTextNode('')], [secondNode]] });

• Errors that are thrown during ApplicationRef.tick
  will now be rethrown when using TestBed. These errors should be
  resolved by ensuring the test environment is set up correctly to
  complete change detection successfully. There are two alternatives to
  catch the errors:

  • Instead of waiting for automatic change detection to happen, trigger
    it synchronously and expect the error. For example, a jasmine test
    could write expect(() => TestBed.inject(ApplicationRef).tick()).toThrow()
  • TestBed will reject any outstanding ComponentFixture.whenStable promises. A jasmine test,
    for example, could write expectAsync(fixture.whenStable()).toBeRejected().

  As a last resort, you can configure errors to not be rethrown by
  setting rethrowApplicationErrors to false in TestBed.configureTestingModule.

• The timers that are used for zone coalescing and hybrid
  mode scheduling (which schedules an application state synchronization
  when changes happen outside the Angular zone) will now run in the zone
  above Angular rather than the root zone. This will mostly affect tests
  which use fakeAsync: these timers will now be visible to fakeAsync
  and can be affected by tick or flush.

• The deprecated factories property in KeyValueDiffers has been removed.

elements

• as part of switching away from custom CD behavior to the
  hybrid scheduler, timing of change detection around custom elements has
  changed subtly. These changes make elements more efficient, but can cause
  tests which encoded assumptions about how or when elements would be checked
  to require updating.

localize

• The name option in the ng add @localize`` schematic has been removed in favor of the project option.

platform-browser

• The deprecated BrowserModule.withServerTransition method has been removed. Please use the APP_ID DI token to set the application id instead.

router

• The Router.errorHandler property has been removed.
  Adding an error handler should be configured in either
  withNavigationErrorHandler with provideRouter or the errorHandler
  property in the extra options of RouterModule.forRoot. In addition,
  the error handler cannot be used to change the return value of the
  router navigation promise or prevent it from rejecting. Instead, if you
  want to prevent the promise from rejecting, use resolveNavigationPromiseOnError.
• The return type of the Resolve interface now includes
  RedirectCommand.

common

compiler

compiler-cli

core

elements

forms

http

language-service

localize

migrations

platform-browser

platform-server

router

service-worker