Что нового в Angular 16.1?
Это небольшой выпуск с некоторыми приятными функциями: давайте погрузимся!
Поддержка TypeScript 5.1
Angular v16.1 теперь поддерживает TypeScript 5.1. Это означает, что вы можете использовать последнюю версию TypeScript в своих приложениях Angular. Вы можете ознакомиться с примечаниями к выпуску TypeScript 5.1, чтобы узнать больше о новых функциях.
Преобразование входных значений
Angular v16.1 вводит новую опцию transform в декораторе @Input. Это позволяет преобразовать значение, передаваемое на вход, до того, как оно будет присвоено свойству. Параметр transform использует функцию, которая принимает значение в качестве входных данных и возвращает преобразованное значение. Поскольку наиболее распространенными вариантами использования являются преобразование строки в число или логическое значение, Angular предоставляет для этого две встроенные функции: numberAttribute и booleanAttribute в @angular/core.
Вот пример использования booleanAttribute:
@Input({ transform: booleanAttribute }) disabled = false;Это преобразует значение, переданное на вход, в логическое значение, чтобы работал следующий код:
<my-component disabled></my-component>
<my-component disabled="true"></my-component>
<!-- Before, only the following was properly working -->
<my-component [disabled]="true"></my-component>Функция numberAttribute работает так же, но преобразует значение в число.
@Input({ transform: numberAttribute }) value = 0;Это также позволяет определить резервное значение на случай, если вводимое значение не является правильным числом (по умолчанию - NaN):
@Input({ transform: (value: unknown) => numberAttribute(value, 42) }) value = 0;Затем это можно использовать следующим образом:
<my-component value="42"></my-component>
<my-component value="not a number"></my-component>
<!-- Before, only the following was properly working -->
<my-component [value]="42"></my-component>Бэкенд выборки для HTTP-клиента Angular
HTTP-клиент имеет новую внутреннюю реализацию на основе Fetch API.
Это экспериментальная и необязательная функция, которую вы можете включить с помощью:
provideHttpClient(withFetch());Он не поддерживает отчеты о ходе загрузки и, конечно же, требует браузера, поддерживающего Fetch API. Fetch API также является экспериментальным на Node, но доступен без флагов начиная с Node 18.
Это в основном интересно для рендеринга на стороне сервера, поскольку реализация XHR изначально не поддерживается в Node и требует polyfill (что имеет некоторые проблемы).
Angular CLI
В CLI теперь есть параметр --force-esbuild, который позволяет принудительно использовать esbuild для ng serve. Это позволяет попробовать реализацию esbuild, не переключая сборщик в angular.json (и сохраняя реализацию Webpack для команды ng build).
Конструктор esbuild был улучшен. Теперь он предварительно связывает зависимости с помощью базового механизма Vite, использует некоторый постоянный кеш для компиляции TypeScript и предварительного связывания Vite и показывает предполагаемые размеры передачи созданных ресурсов, как это делает сборщик Webpack.
