Angular 13: новые функции и обновления, которые вам нужно знать

• Обновления
• 30 января 2023 года

Виджай Садху

Angular запустила совершенно новый Angular 13 3 ноября 2021 года.С учетом всех предыдущих выпусков можно сказать, что это одно из самых обтекаемых и ранее запланированных обновлений для широко принятой веб-фреймворка на основе TypeScript.

Релиз принес несколько важных обновлений, которые могут быть полезны для Угловое развитиеЕсли вы хотите получить полное представление о том, что эксклюзивно в Angular 13, давайте посмотрим на основные моменты и функции этой версии с более подробной информацией!

Лучшие функции и изменения, выпущенные в Angular 13

Итак, давайте более подробно рассмотрим Angular 13 со всеми его недавно добавленными функциями и основными обновлениями.

1. Поддержка TypeScript 4.4

Angular v13 теперь поддерживает TypeScript 4.4. Это означает, что теперь мы можем использовать множество фантастических языковых функций. Кроме того, они перестали поддерживать TypeScript 4.2 и 4.3. Одно из основных изменений в TypeScript 4.4, которое выгодно для приложений Angular, заключается в том, что он больше не реализует настройщики и геттеры для получения аналогичного типа.

2.Усиление угловых тестов

Команда Angular внесла некоторые заметные изменения в TestBed, которые в настоящее время функционируют должным образом, чтобы разрушать тестовые среды и модули после каждого теста. Поскольку DOM теперь испытывает очистку после тестов, разработчики могут ожидать более оптимизированных, менее взаимозависимых, менее интенсивных и быстрых тестов.

3. 100% Ivy и больше нет поддержки View Engine

Angular 13 не поддерживает View Engine. Абсолютно новая версия теперь на 100% Ivy. Теперь, когда нет метаданных для View Engine или более старых форматов вывода, это устраняет усложнение кодовой базы и затраты на техническое обслуживание в Angular 13.

Фреймворк заранее преобразовал все внутренние инструменты в Ivy, чтобы это изменение могло функционировать бесшовно. Ivy собирает каждый компонент индивидуально, что ускоряет время разработки.

Для библиотек, созданных с использованием последней версии APF, больше не требуется использовать ngcc (компилятор универсальной совместимости). Команда разработчиков может ожидать более быстрой компиляции, поскольку больше нет требований к метаданным и сводным файлам.

4. Эргономичные API

Angular v13 сократил время загрузки с помощью эргономичных API-интерфейсов и гранулированного сбоя кода на уровне компонентов. Новый выпуск ESBuild также принес повышение производительности.

ESBuild — это очень быстрый пакет JavaScript. Теперь он работает с terser для оптимизации сценариев по всему миру. Он поддерживает карты источников CSS, которые также позволяют оптимизировать глобальный CSS. Кроме того, этот пакет JS поддерживает другие фреймворки, такие как Vue, Svelte и Elm.

5.Угловые CLI-усиления

Angular CLI является одним из фундаментальных элементов Angular Puzzle.Немногие разработчики могут справиться с сложностью современного дизайна. веб-разработка Экосистема в мире, и Angular CLI защищает их от большинства из них.

С запуском Angular v13 эта структура теперь поддерживает постоянный кэш сборки по умолчанию. Это функция, которая кэширует результаты на диске. Это вызывает до 68% увеличение скорости разработки. Вы можете включить или отключить эту функцию в текущих приложениях Angular.

6. Изменения в угловом формате пакета (APF)

Формат углового пакета (APF) определяет формат и структуру пакетов Angular Framework. Это отличный подход к упаковке каждой сторонней библиотеки в экосистеме веб-разработки.

Angular 13 представляет новую версию APF, и мы находим в ней некоторые существенные изменения:

• Это создает Ivy частичный вывод компиляции.
• Больше нет производства UMD-пакетов.
• Производит продукцию ES2020.
• Он использует экспорт пакетов с функцией подпуть шаблона от Node.js, чтобы отображать несколько доступных выходов в каждой точке входа.

7. Изменения в рамках и обновления зависимостей

Angular 13 также может похвастаться некоторыми важными изменениями и обновлениями. Теперь RxJS v7.4 является стандартом для приложений, построенных с использованием цифрового интерфейса. ng newТекущие приложения, использующие RxJS v6.x, должны будут обновляться вручную. npm install [email protected] командующий.

8. Обновления API компонентов

Теперь вы можете создавать динамические компоненты с использованием меньшего количества кода на основе улучшенного API ViewContainerRef.createComponent. Если вы используете Angular 13, вам не нужно использовать ComponentFactoryResolver.

Вот пример создания динамических компонентов с использованием предыдущих версий Angular:

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef,
                private componentFactoryResolver: 
                        ComponentFactoryResolver) {}
    createMyComponent() {
        const componentFactory = this.componentFactoryResolver.
                             resolveComponentFactory(MyComponent);
    
        this.viewContainerRef.createComponent(componentFactory);
    }
}

В Angular 13 этот код может стать новым API:

@Directive({ … })
export class MyDirective {
    constructor(private viewContainerRef: ViewContainerRef) {}
    createMyComponent() {
        this.viewContainerRef.createComponent(MyComponent);
    }
}

9. Больше нет поддержки Internet Explorer 11

Для того, чтобы воспользоваться преимуществами нативных веб-интерфейсов и функций современных браузеров, таких как переменные CSS и веб-анимации, Angular Framework отключил поддержку IE11. Он обеспечивает более быструю нагрузку и меньший размер пакета для приложений и улучшенный пользовательский опыт, поскольку нет никаких полифиллов для IE и нет требований к отличительной загрузке.

Это заметное изменение для некоторых учреждений или органов власти, которые все еще работают с Internet Explorer 11 и еще не перешли на Microsoft Edge или другие современные браузеры.

Читать далее: Angular 14: все важные функции и обновления

10.Обновление доступности углового материала

Новая версия Angular принесла улучшение доступности (A11y) в Angular Material. Команда оценила и проверила все MDC (компоненты цифрового дизайна) для улучшения доступности. Например, радиокнопки и флажки теперь имеют большие размеры касаний, а другие элементы имеют более высокие режимы контрастности.

11.Новый тип форм

В Angular v13 появился новый тип формы: FormControlStatusОн накапливает все строки статуса для контроля формы:

• Например, тип AbstractControl.status В настоящее время FormControlStatus вместо string.
• Типы таких StatusChanges Сейчас Observable<FormControlStatus> вместо Observable<any>.

12. Поддержка Adobe Fonts

Внедрение Angular 13 также подчеркивает встроенную поддержку шрифтов Adobe. Эти шрифты могут повысить функциональность приложения за счет ускорения FCP (First Contentful Paint). Теперь это изменение доступно всем по умолчанию. ng update.

13. Улучшения в локализации

$localize - это последовательный API. Разработчики используют его для создания эффективного способа встроенной интернационализации (i18n) и тэг-сообщений для перевода в код и шаблоны.

Как обновить Angular Version 13?

Чтобы обновить Angular версии 13, вам нужно скачать Angular 12. Затем вы можете обновить до последней версии v13 по этой ссылке: https://update.angular.io/ для подробного руководства.

Заключение

Команда Angular пытается выпускать обновление новой версии каждые шесть месяцев. Теперь, когда вы знаете значительные обновления и функции совершенно нового Angular 13, вы должны попробовать. Если вы все еще используете более старый Angular v12, пришло время обновить его до версии 13, чтобы создать удивительные приложения, которые поддерживают современные стандарты веб-разработки.