Angular 19 — что нас ждет16.10.2024 09:00

Небольшие заметки о предстоящем выпуске Angular.

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

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

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

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

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

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

Детали

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

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

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

Детали

@let в шаблонах

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

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

@let user = user$ | async;

Детали

PendingTasks

Выход из Experimental

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

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

Детали

input, output

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

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

@Component({
  ...
})
export class UserProfileComponent {
  firstName = input();             // Signal
  lastName  = input.required();    // Signal
  age

Детали

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

Детали

ROUTER_OUTLET_DATA

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

component.html

child-component.ts

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

Детали

takeUntilDestroyed

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

Функция для автоматической отписки при разрушении текущего компонента.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
export class Component implements OnInit{
  data;
 
  constructor(private service: DataService) {
    this.service.getData()
      .pipe(takeUntilDestroyed())
      .subscribe(response => this.data = response)
  }
}

Детали

Typescript

Breaking

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

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

Детали

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

Выход Angular 19 ожидаем в октябре — ноябре 2024 года.

Habrahabr.ru прочитано 689 раз