Добро пожаловать в ренессанс Angular: представлена 17-я версия

Новый синтаксис шаблонов

Он проще читается и улучшает производительность

Мигрировать на новые директивы можно будет одной командой:

ng g @angular/core:control-flow-migration

@defer

Отложенные представления можно использовать в шаблоне компонента, чтобы отложить загрузку выбранных зависимостей в этом шаблоне. Эти зависимости включают компоненты, директивы и каналы, а также любой связанный CSS. Чтобы использовать эту функцию, вы можете декларативно обернуть раздел вашего шаблона в блок @defer, который определяет условия загрузки.

Необязательные блоки:

@placeholder - отображает контент до загрузки (доп условия: minimum - время, сколько показывается лоадер)

@defer {
  <large-component />
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}

@loading - срабатывает при загрузке компонента (доп условия: after - после скольки милисекунд показывает лоадер, minimum - время, сколько показывается лоадер)

@defer {
  <large-component />
} @loading (after 100ms; minimum 1s) {
  <img alt="loading..." src="loading.gif" />
}

@error - срабатывает при ошибке загрузки

@defer {
  <calendar-cmp />
} @error {
  <p>Failed to load the calendar</p>
}

Встроенные триггеры:

• idle - вызовет отложенную загрузку, как только браузер достигнет состояния простоя (обнаруживается с помощью API-интерфейса requestIdleCallback), является триггером по умолчанию

• interaction - загружает при клике, фокусе или похожем поведении

• viewport - загружает, когда контент попадает в пользовательский viewport

• hover - загружает при наведении

• timer - загружает после прошествия заданного времени

Новый синтаксис имеет встроенные триггеры, но можно задавать и кастомные. Поддерживает prefetch и будет доступен в новой версии в качестве developer preview

Standalone компоненты

Чтобы не создавать standalone компонент, а обычный, пропишите дополнительный флаг:

ng generate component new-component --standalone false

@Input transform

При таком подходе теперь необязательно писать [disabled]="true", вместо этого просто disabled. Angular поймет, если вы передадите просто инпут, он его применит со значением true, а иначе применит значение, которое вы указали при инициализации.

Гидратация и SSR

Особенностью новой версии является гидратация и улучшения SSR:

• поддержка ESM для серверных сборок

• улучшение скорости сборки серверных бандлов

• улучшен dev сервер для SSR

И ещё...

Благодаря чему material.angular.io билдится в 2.5 раза быстрее!

Немного преобразили Angular Dev Tools - теперь инжекторы и провайдеры проще и нагляднее инспектировать.

Также был представлен в бета-версии новый сайт с документацией: https://angular.dev/

Можно будет обновиться до новой 17 версии Angular уже 8 ноября!