Новый логотип AngularНовый синтаксис шаблоновТеперь при создании приложения будет появляться предложение о использовании SSR
Он проще читается и улучшает производительностьПример использования нового switch
Мигрировать на новые директивы можно будет одной командой: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 previewprefetch наглядноStandalone компонентыТеперь по умолчанию
Чтобы не создавать standalone компонент, а обычный, пропишите дополнительный флаг:ng generate component new-component --standalone [email=false@Input]false@Input[/email] transformНовые transform для @Input
Благодаря этому теперь необязательно писать [disabled]="true", вместо этого просто disbled.Гидратация и SSR
Особенностью новой версии является гидратация и улучшения SSR:
поддержка ESM для серверных сборок
улучшение скорости сборки серверных бандлов
улучшен dev сервер для SSRИ ещё...Новые сборщики по умолчанию
Благодаря чему material.angular.io билдится в 2.5 раза быстрее!
Немного преобразили Angular Dev Tools - теперь инжекторы и провайдеры проще и нагляднее инспектировать.
Также был представлен в бета-версии новый сайт с документацией: https://angular.dev/
Можно будет обновиться до новой 17 версии Angular уже 8 ноября!
Источник новости: habr.com
