Angular 19 здесь, что нового?

Корневые эффекты не привязаны к жизненному циклу компонента и обычно используются для синхронизации состояния приложения с внешним миром (например, для записи его в локальное хранилище). Эти эффекты выполняются не как часть обнаружения изменений, а как микрозадача (и могут быть активированы в тестах с использованием TestBed.flushEffects()).

Ресурсы

Resources API является экспериментальным и скоро пройдет процедуру RFC: я бы пока не советовал вам его использовать.

Функция resourceпринимает объект с обязательной функцией-загрузчиком, которая возвращает обещание:

list(): ResourceRef | undefined> {  return resource({  loader: async () => {    const response = await fetch('/books');      return (await response.json()) as Array;    }  });}

В этом примере используется не HTTP-клиент, а собственная fetch()функция, возвращающая обещание. Действительно, resource()функция не связана с RxJS и поэтому может использовать любой клиент, возвращающий обещания. rxResourceявляется альтернативой resource, его можно использовать с клиентом на основе Observable. Это пример отделения Angular от RxJS, но при этом обеспечивающего функции взаимодействия, позволяющие беспрепятственно его использовать.

Функция возвращает ResourceRefобъект, содержащий:

• сигнал isLoading, указывающий, загружается ли ресурс;

• сигнал value, содержащий результат обещания;

• сигнал error, содержащий ошибку, если обещание отклонено;

• сигнал status, который содержит статус ресурса.

Затем вы можете использовать эти сигналы в своем шаблоне:

@if (booksResource.isLoading()) {  
Loading...
} @else {  @for (book of booksResource.value(); track book.id) {    
{{ book.name }}
  }}

Сигнал statusможет быть:

• ResourceStatus.Idle, исходное состояние

• ResourceStatus.Loading, когда обещание находится на рассмотрении

• ResourceStatus.Error, когда обещание отклонено

• ResourceStatus.Resolved, когда обещание выполнено

• ResourceStatus.Reloading, когда ресурс перезагружается

• ResourceStatus.Local, когда значение установлено локально

Ресурс также имеет reloadметод, позволяющий перезагрузить ресурс. В этом случае его статус будет установлен на ResourceStatus.Reloading.

*_INITIALIZER токены устарели

Вместо токена APP_INITIALIZERтеперь нужно использовать provideAppInitializer. Эта новая функция — более элегантный способ предоставить инициализатор вашему приложению.

До версии 19 вы могли бы предоставить такой инициализатор:

{  provide: APP_INITIALIZER,  useValue: () => inject(InitService).init(),  multi: true},

Теперь вам нужно использовать provideAppInitializer:

provideAppInitializer(() => inject(InitService).init())

ENVIRONMENT_INITIALIZERи PLATFORM_INITIALIZERтакже устарели в пользу provideEnvironmentInitializerи providePlatformInitializer.
Руками ничего менять не нужно, автомиграция позаботится об этом =)

Шаблоны

Синтаксис @let теперь стабилен. Выражения в шаблоне теперь могут использовать typeofоператор:

@if (typeof user === 'object') {}

У пайпа keyvalueтакже есть новая опция. Этот пайп перебирать записи объекта. Но, как это ни удивительно, он по умолчанию упорядочивает записи по их ключу. Вы уже могли передать функцию сравнения, но теперь вы можете передать null,чтобы отключить упорядочивание:

@for (entry of bookModel() | keyvalue: null; track entry.key) {  
{{ entry.key }}: {{ entry.value }}
}

HMR и сборка

Hot Module Replacement теперь по-умолчанию работает и для стилей, теперь не нужно каждый раз обновлять страницу вручную. Общее время сборки, в целом, подтянули.

ng build --optimization=true --build-cache // сборка с кешем

Ведётся работа по улучшению HMR для шаблонов, уже можно попробовать в бета режиме (шаблоны будут перезагружены, обновив все экземпляры компонентов, без перезагрузки страницы, а состояние приложения сохранится):

 NG_HMR_TEMPLATES=1 ng serve

Оставшиеся изменения

• Поддержка TypeScript 5.6

• standalone: true теперь по-умолчанию

• withEventReplay() для SSR теперь стабильна

• Добавили связанные сигналы

Заключение

19-я версия содержит в себе действительно много новинок и улучшений, которые улучшают DX. Теперь окончательно ясно, что вектор развития на ближайшие пару лет это SSR, сигналы и standalone-компоненты.

Готовы к обновлению? Тогда вперёд!

ng update @angular/core @angular/cli

От себя рекомендую посмотреть официальное видео, ребята старались и, к тому же, продакшен на высоте: