Новый синтаксис шаблонов
Он проще читается и улучшает производительность
Мигрировать на новые директивы можно будет одной командой:
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
- загружает, когда контент попадает в пользовательский viewporthover
- загружает при наведении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 ноября!