10 лучших функций Angular 13, которые должен знать каждый разработчик

Angular 13, последняя версия веб-фреймворка на основе TypeScript, уже здесь. Он предлагает несколько интересных новых функций для разработчиков Angular. Если вам интересно, что нового в Angular 13, вот краткое изложение важных функций.

1. View Engine больше не доступен

Устаревший View Engine больше не поддерживается последней версией Angular 13. Использование View Engine требует затрат на обслуживание, а также увеличивает сложность кодовых баз Angular 13. Чтобы избежать этой проблемы, Ivy теперь является единственным механизмом просмотра, поддерживаемым Angular.

В связи с этим изменением некоторые существующие библиотеки будут автоматически переведены в режим частичной компиляции, а также будут удалены некоторые метаданные, которые ранее требовались для устаревшей версии View Engine. Кроме того, все внутренние инструменты заблаговременно конвертируются в Ivy, чтобы обеспечить плавный переход.

Теперь Ivy может компилировать отдельные компоненты независимо друг от друга, что значительно повышает производительность. Удалив View Engine, Angular также может уменьшить свою зависимость от ngcc.

2. Изменения в формате пакета Angular (APF)

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

Мы можем увидеть некоторые существенные изменения в новой версии APF. Старые форматы вывода, включая некоторые метаданные View Engine, удаляются с Angular 13.

Обновленная версия APF больше не требует использования ngcc. В результате этих изменений в библиотеке разработчики могут ожидать более быстрого выполнения.

3. Убрана поддержка IE 11

Angular больше не будет поддерживать Internet Explorer 11, начиная с версии 13. Отказ от IE 11 является положительным фактором, поскольку он приводит к меньшему размеру пакета и более быстрой загрузке приложения. Кроме того, благодаря этим усовершенствованиям Angular теперь может использовать современные функции браузера, такие как переменные CSS и веб-анимацию, через собственные веб-API.

Приложения будут загружаться быстрее благодаря улучшенному API и отсутствию специфичных для IE полифилов. Это также устраняет необходимость в дифференциальной нагрузке. Усовершенствованные API и инфраструктура станут преимуществом для разработчиков, а пользователи приложений выиграют от более быстрой загрузки и лучшего взаимодействия с пользователем.

Во время переноса проекта запуск ng update автоматически удалит эти специфичные для IE полифилы и уменьшит размер пакета.

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

Поддержка TypeScript 4.4 теперь доступна в версии Angular 13. В результате версии до TypeScript 4.4.2 больше не поддерживаются в ядре.

Важные особенности TypeScript 4.4:

Улучшено обнаружение охранников типа.
Переменные перехвата по умолчанию.
Более быстрые инкрементные сборки.
Поток управления условиями может быть проанализирован.
Подписи индексов шаблонов строк символов и шаблонов.

5. Версии Node.js до 12.20 больше не поддерживаются.

Версии Node.js до 12.20.0 больше не доступны в Angular 13. Это связано с тем, что пакеты Angular теперь используют функцию экспорта пакетов Node.js с шаблонами подпутей.

6. Версия 7.4 RxJS

Обновление Angular 13 добавляет RxJS, реактивное расширение для JavaScript, и включает все версии RxJS до версии 7 включительно.

Для приложений, созданных с помощью ng new, по умолчанию используется RxJS 7.4.

Существующие приложения RxJS v6.x необходимо обновить вручную с помощью команды npm install [email protected]. Вы всегда можете положиться на RxJS 7 для создания нового проекта. Что касается миграции, существующие проекты следует оставить на RxJS 6.

7. Изменения маршрутизатора

Маршрутизация помогает нам управлять навигацией от одного вида к другому. Он обеспечивает удобную навигацию, интерпретируя URL-адрес браузера как инструкцию по изменению представления.

С последним обновлением маршрутизатор больше не заменяет URL-адрес браузера, когда новая навигация отменяет текущую навигацию.

Было несколько проблем совместимости с более ранними версиями Angular, в основном с параметрами запроса. Например, после знака вопроса в параметрах запроса сериализатор URL-адресов по умолчанию имеет тенденцию отбрасывать все. С другой стороны, последнее обновление улучшает совместимость параметров запроса с вопросительными знаками.

Пустые и неопределенные входные данные директив routerLink ранее были эквивалентны пустой строке, и не существовало механизма, блокирующего навигацию по ссылке. Установка значения директивы ссылки маршрутизатора на null или undefined теперь полностью отключит навигацию.

8. Улучшения интерфейса командной строки Angular

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

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

9. Улучшения тестирования Angular

Команда Angular внесла некоторые заметные изменения в TestBed, который теперь корректно удаляет тестовую среду и модули после каждого теста.

Поскольку DOM теперь очищается после тестов, разработчики могут рассчитывать на более оптимизированные, менее взаимозависимые, менее требовательные к памяти и более быстрые тесты.

10. Создание динамических компонентов

Одно обновление API с поддержкой Ivy в Angular 13 — это более оптимизированный метод динамического создания компонента. ViewContainerRef.createComponent больше не требует создания экземпляра фабрики для создания компонента (больше не нужно использовать ComponentFactoryResolver).

Благодаря улучшенному API ViewContainerRef.createComponent теперь можно создавать динамические компоненты с меньшим объемом стандартного кода. Вот пример создания динамических компонентов с использованием предыдущих версий Angular.

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

В Angular 13 этот код может стать следующим с использованием нового API.

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

Последние мысли

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

Спасибо за чтение!

Библиотека компонентов пользовательского интерфейса Angular от Syncfusion — это единственный пакет, который вам когда-либо понадобится для создания приложения, содержащий более 65 высокопроизводительных, легких, модульных и отзывчивых компонентов пользовательского интерфейса в одном пакете.

Для существующих клиентов новейшая версия Essential Studio доступна для загрузки на странице Лицензии и загрузки. Если вы еще не являетесь клиентом Syncfusion, вы можете попробовать нашу 30-дневную бесплатную пробную версию, чтобы ознакомиться с доступными функциями. Также ознакомьтесь с нашими демонстрациями на GitHub.

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

Связанные блоги

Первоначально опубликовано на https://www.syncfusion.com 7 февраля 2022 г.

10 лучших функций Angular 13, которые должен знать каждый разработчик