Добро пожаловать в ренессанс 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 ноября!