Angular 19

standalone: true - по умолчанию

Пожалуй самое важное изменение в Angular 19. Которое представили заранее в статье команда Angular.

Angular c v14 диктует нам что необходимо как можно часто использовать standalone компоненты.

Поэтому после миграции у вас появятся флаги standalone: false у обычных компонентов, которые привязаны к NgModule.

Так же добавят флаг strictStandalone (опционально) чтобы было еще больше мотивации писать standalone компоненты.

Это вовсе не означает что NgModule будет deprecate, но кто знает, возможно через 5 версии подумают и об этом.

Детали: https://blog.angular.dev/the-future-is-standalone-475d7edbc706

effect - обновления использования

Основное - изменение порядка выполнения. Теперь эффекты будут запускаться чуть раньше и участвовать механизме change detection компонента согласно дереву изменений, а не отдельно в глобальной микротаске. Это добавит предсказуемости в поведении, сначала родители только потом дети.

Фича все еще находится в developer preview, и не факт что выйдет вместе с 19. Скорее всего нас ждет стабилизация в 19.1

Детали: https://blog.angular.dev/latest-updates-to-effect-in-angular-f2d2648defcd

@let в шаблонах

Стабилизация и выход из Developer Preview.

Переменные в шаблонах без использования директив на подобии *ngIf *ngxLet и кучу других в различных библиотеках.

@let user = user$ | async;

Детали: https://next.angular.dev/api/core/@let#

PendingTasks

Выход из Experimental

Способ сообщить Angular что выполняются еще таски. Фича необходима в SSR приложениях где будет отключен ZoneJs. Фича уже внедрена в HttpClient, понадобиться только когда есть прямое использование fetch, да и всяких асинхронных задач.

const taskService = inject(PendingTasks);
const taskCleanup = taskService.add();
await doSomeWorkThatNeedsToBeRendered();
taskCleanup();

Детали: https://angular.dev/guide/experimental/zoneless#experimentalpendingtasks-for-server-side-rendering-ssr

input, output

Стабилизация и выход из Developer Preview.

Функции для того чтобы объявлять входящие и исходящие параметры компонента в виде Signal.

@Component({
  ...
})
export class UserProfileComponent {
  firstName = input<string>();             // Signal<string|undefined>
  lastName  = input.required<string>();    // Signal<string>
  age

Детали: https://angular.dev/api/core/input?tab=usage-notes

@Directive({
  ...
})
export class MyDir {
  nameChange = output<string>();    // OutputEmitterRef<string>
  onClick    = output();            // OutputEmitterRef<void>
  
  updateName(newName: string): void {
   this.nameChange.emit(newName);
  }
}

Детали: https://angular.dev/api/core/output?tab=usage-notes

ROUTER_OUTLET_DATA

Добавляют input в RouterOutlet, который позволит передавать данные из родительского компонента в компоненты вывода. Значение доступно для инжекторов дочерних компонентов через токен ROUTER_OUTLET_DATA.

component.html

<router-outlet [routerOutletData]="{name: 'Angular'}" />

child-component.ts

data = inject(ROUTER_OUTLET_DATA) as Signal<{name: string}>;

Детали: https://next.angular.dev/api/router/ROUTER_OUTLET_DATA

Typescript

Breaking

Версия TypeScript ниже 5.5 больше не поддерживаются.

По умолчанию typescript 5.6

Детали: https://github.com/angular/angular/pull/57577

Это были основные изменения, дополнительно можно подсмотреть в CHANGELOG: https://github.com/angular/angular/blob/main/CHANGELOG.md