Angular 19 — что нас ждет
Небольшие заметки о предстоящем выпуске 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 года.
