@angular/upgrade

common

compiler

compiler-cli

core

forms

http

migrations

platform-browser

platform-server

router

service-worker

Breaking Changes

• breaking

  Angular Compatibility Compiler (ngcc) has been removed and as a result Angular View Engine libraries will no longer work

• deprecated

  Deprecated EventManager method addGlobalEventListener has been removed as it is not used by Ivy.

bazel

• breaking

  Several changes to the Angular Package Format (APF)

  • Removal of FESM2015

  • Replacing ES2020 with ES2022

  • Replacing FESM2020 with FESM2022

• breaking

  Several changes to the Angular Package Format (APF)

  • Removal of FESM2015

  • Replacing ES2020 with ES2022

  • Replacing FESM2020 with FESM2022

common

• breaking

  MockPlatformLocation is now provided by default in tests.
  Existing tests may have behaviors which rely on
  BrowserPlatformLocation instead. For example, direct access to the
  window.history in either the test or the component rather than going
  through the Angular APIs (Location.getState()). The quickest fix is to
  update the providers in the test suite to override the provider again
  TestBed.configureTestingModule({providers: [{provide: PlatformLocation, useClass: BrowserPlatformLocation}]}).
  The ideal fix would be to update the code to instead be compatible with
  MockPlatformLocation instead.

• breaking

  If the 'ngTemplateOutletContext' is different from the context, it will result in a compile-time error.

Before the change, the following template was compiling:

interface MyContext {
  $implicit: string;
}

@Component({
  standalone: true,
  imports: [NgTemplateOutlet],
  selector: 'person',
  template: `
    <ng-container
      *ngTemplateOutlet="
        myTemplateRef;
        context: { $implicit: 'test', xxx: 'xxx' }
      "></ng-container>
  `,
})
export class PersonComponent {
  myTemplateRef!: TemplateRef<MyContext>;
}

However, it does not compile now because the 'xxx' property does not exist in 'MyContext', resulting in the error: 'Type '{ $implicit: string; xxx: string; }' is not assignable to type 'MyContext'.'

The solution is either:

• breaking

  Add the 'xxx' property to 'MyContext' with the correct type or

• breaking

  Add '$any(...)' inside the template to make the error disappear. However, adding '$any(...)' does not correct the error but only preserves the previous behavior of the code.

• deprecated

  Deprecated XhrFactory export from @angular/common/http has been removed. Use XhrFactory from @angular/common instead.

compiler

• breaking

  • TypeScript 4.8 is no longer supported.

core

• breaking

  QueryList.filter now supports type guard functions, which will result in type narrowing. Previously if you used type guard functions, it resulted in no changes to the return type. Now the type would be narrowed, which might require updates to the application code that relied on the old behavior.

• breaking

  zone.js versions 0.11.x and 0.12.x are not longer supported.

• breaking

  • entryComponents has been deleted from the @NgModule and @Component public APIs. Any usages can be removed since they weren't doing anyting.

  • ANALYZE_FOR_ENTRY_COMPONENTS injection token has been deleted. Any references can be removed.

• breaking

  ComponentRef.setInput will only set the input on the
  component if it is different from the previous value (based on Object.is
  equality). If code relies on the input always being set, it should be
  updated to copy objects or wrap primitives in order to ensure the input
  value differs from the previous call to setInput.

• breaking

  RendererType2.styles no longer accepts a nested arrays.

• breaking

  The APP_ID token value is no longer randomly generated. If you are bootstrapping multiple application on the same page you will need to set to provide the APP_ID yourself.

  bootstrapApplication(ComponentA, {
    providers: [
     { provide: APP_ID, useValue: 'app-a' },
     // ... other providers ...
    ]
  });

• breaking

  The ReflectiveInjector and related symbols were removed. Please update the code to avoid references to the ReflectiveInjector symbol. Use Injector.create as a replacement to create an injector instead.

• breaking

  Node.js v14 support has been removed

  Node.js v14 is planned to be End-of-Life on 2023-04-30. Angular will stop supporting Node.js v14 in Angular v16. Angular v16 will continue to officially support Node.js versions v16 and v18.

platform-browser

• breaking

  The deprecated BrowserTransferStateModule was removed, since it's no longer needed. The TransferState class can be injected without providing the module. The BrowserTransferStateModule was empty starting from v14 and you can just remove the reference to that module from your applications.

platform-server

• breaking

  Users that are using SSR with JIT mode will now need to add import to @angular/compiler before bootstrapping the application.

  NOTE: this does not effect users using the Angular CLI.

• breaking

  renderApplication method no longer accepts a root component as first argument. Instead, provide a bootstrapping function that returns a Promise<ApplicationRef>.

  Before

  const output: string = await renderApplication(RootComponent, options);

  Now

  const bootstrap = () => bootstrapApplication(RootComponent, appConfig);
  const output: string = await renderApplication(bootstrap, options);

• breaking

  renderModuleFactory has been removed. Use renderModule instead.

router

• breaking

  The Scroll event's routerEvent property may also be
  a NavigationSkipped event. Previously, it was only a NavigationEnd
  event.

• breaking

  ComponentFactoryResolver has been removed from Router APIs.
  Component factories are not required to create an instance of a component
  dynamically. Passing a factory resolver via resolver argument is no longer needed
  and code can instead use ViewContainerRef.createComponent without the
  factory resolver.

• breaking

  The RouterEvent type is no longer present in the Event union type representing all router event types. If you have code using something like filter((e: Event): e is RouterEvent => e instanceof RouterEvent), you'll need to update it to filter((e: Event|RouterEvent): e is RouterEvent => e instanceof RouterEvent).

• breaking

  Tests which mock ActivatedRoute instances may need to be adjusted
  because Router.createUrlTree now does the right thing in more
  scenarios. This means that tests with invalid/incomplete ActivatedRoute mocks
  may behave differently than before. Additionally, tests may now navigate
  to a real URL where before they would navigate to the root. Ensure that
  tests provide expected routes to match.
  There is rarely production impact, but it has been found that relative
  navigations when using an ActivatedRoute that does not appear in the
  current router state were effectively ignored in the past. By creating
  the correct URLs, this sometimes resulted in different navigation
  behavior in the application. Most often, this happens when attempting to
  create a navigation that only updates query params using an empty
  command array, for example router.navigate(, {relativeTo: route, queryParams: newQueryParams}). In this case, the relativeTo property
  should be removed.

Deprecations

core

• deprecated

  makeStateKey, StateKey and TransferState exports have been moved from @angular/platform-browser to @angular/core. Please update the imports.

- import {makeStateKey, StateKey, TransferState} from '@angular/platform-browser';
+ import {makeStateKey, StateKey, TransferState} from '@angular/core';

• deprecated

  EnvironmentInjector.runInContext is now deprecated, with
  runInInjectionContext functioning as a direct replacement:

  // Previous method version (deprecated):
  envInjector.runInContext(fn);
  // New standalone function:
  runInInjectionContext(envInjector, fn);

• deprecated

  The @Directive/@Component moduleId property is now
  deprecated. It did not have any effect for multiple major versions and
  will be removed in v17.

platform-browser

• deprecated

  BrowserModule.withServerTransition has been deprecated. APP_ID should be used instead to set the application ID.
  NB: Unless, you render multiple Angular applications on the same page, setting an application ID is not necessary.

  Before:

  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    ...
  ]

  After:

  imports: [
    BrowserModule,
    { provide: APP_ID, useValue: 'serverApp' },
    ...
  ],

• deprecated

  ApplicationConfig has moved, please import ApplicationConfig from @angular/core instead.

platform-server

• deprecated

  PlatformConfig.baseUrl and PlatformConfig.useAbsoluteUrl platform-server config options are deprecated as these were not used.