Angular 10 — что вы должны знать об этом

Опубликовано: 2020-10-07

Angular недавно выпустил новую версию 24 июня 2020 года. Она была выпущена только через 4 месяца после выпуска версии 9.0 Angular. Последний Angular 10 — это бета-версия, а это означает, что команда Angular приближается к финальному выпуску последней версии этой разработанной Google, ориентированной на машинописный текст структуры.

Если вы веб-разработчик или кто-то, кто хочет разработать веб-приложение для своего бизнеса, вы должны знать, что может предложить эта новая версия. Поскольку бета-версия выпускается в течение 4 месяцев после выпуска последней версии, вы можете задаться вопросом, удачно это или нет! Мы здесь, чтобы помочь вам найти ответ. Давайте подробнее рассмотрим ключевые особенности Angular 10.

Особенности углового 10

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

  • Выбор нового диапазона дат

Библиотека компонентов пользовательского интерфейса Angular теперь оснащена новым средством выбора диапазона дат. Не уверен, что это? К веб-страницам можно прикрепить средство выбора диапазона дат. Он открывает календари для выбора времени, дат или любого предопределенного периода времени, например «последние 20 дней».

Если вы хотите, чтобы ваши пользователи выбирали диапазон дат вместо одной даты, вы можете использовать компоненты mat-date-range-picker и mat-date-range-input.

  • Дополнительные более строгие настройки

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

Вот основной объем работы строгого флага:

- Превращение проверки типа шаблона в Strict
- Включение строгого режима в TypeScript
- Настройка правил линтинга для предотвращения использования «любого» в качестве объявления типа.
-Уменьшение бюджетов пакетов по умолчанию

  • Предупреждения об импорте CommonJS

Использование зависимости, упакованной с помощью CommonJS, делает пакеты большими и тем самым замедляет работу приложения. Angular 10 предупреждает разработчиков, когда сборка включает один из таких пакетов. Таким образом, они могут сообщить своим зависимостям, что они предпочитают пакет модуля ECMAScript (ESM).

  • Обновления

В зависимостях Angular было внесено несколько крупных обновлений для синхронизации с экосистемой JavaScript. Вот они:

-TypeScript обновлен до TypeScript 3.9. Это помогает команде работать над улучшением производительности и стабильности.
-TSLint обновлен до v6
-TSLib обновлен до версии 2.0

Макет проекта также был обновлен. Поэтому вы можете увидеть новый файл tsconfig.base.json в Angular 10. Этот файл лучше поддерживает IDE, тип разрешения инструмента сборки и конфигурации пакетов.

Помимо этого, последняя версия Angular расширяет возможности таких функций, как ускорение компилятора, возможности редактирования, оперативные исправления и дополнения.

  • Улучшенная производительность ngcc

Эта функция Angular 10 способствует реализации программного поиска точки входа. Это может обрабатывать точки входа, до которых могут добраться только программы, определенные в файле tsconfig.json. Кроме того, зависимости скрыты внутри представления точки входа и могут быть прочитаны без вычисления каждый раз.

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

  • Объединение нескольких файлов

Последняя версия Angular поддерживает объединение нескольких документов перевода без каких-либо проблем. В предыдущих версиях они могли загружать только один файл. Теперь пользователи могут указывать несколько документов для каждой локали, а транзакции из всех файлов можно объединять с помощью идентификатора обмена сообщениями. Самый важный документ будет помещен первым, а запасные переводы будут позже.

  • Тайм-аут асинхронной блокировки

Еще одна интересная особенность Angular 10 заключается в том, что в этой версии настроено время ожидания асинхронной блокировки. Это поддерживает файл ngcc.config.js, чтобы настроить задержки повторных попыток и повторные попытки в AsyncLocker. Интеграционный тест позволяет разработчикам отслеживать время ожидания, использовать файл ngcc.config.js, чтобы сократить время ожидания и предотвратить длительное выполнение теста. Неудивительно, что профессионалы компании по разработке веб-приложений с огромным облегчением встречают последнюю версию Angular!

  • Маршрутизатор

Защита CanLoad может вернуться к UrlTree в последней версии Angular. Защита CanLoad, возвращающая UrlTree, сводит на нет любую передовую навигацию и, в свою очередь, помогает перенаправить. Это соответствует текущему поведению с доступными охранниками CanActivate — они также добавлены сюда. Однако это не оказывает никакого влияния на предварительную загрузку.

  • Компиляция

Ahead-of-Time (AOT) компилирует приложение и его библиотеки во время сборки. Это обычная практика, начиная с Angular 9. Он может преобразовывать коды во время сборки даже до того, как браузер загрузит и впоследствии запустит этот код. Естественно, это обеспечивает более быструю отрисовку в браузере. Компилятор устраняет отдельные запросы AJAX для исходных файлов, встраивая внешние шаблоны HTML и таблицы стилей CSS в JavaScript приложения.

В AOT в Angular 10 произошли некоторые очевидные изменения:

1. Инкрементная компиляция помогает сократить время сборки.
2. Благодаря сгенерированному коду, хорошо совместимому с встряхиванием дерева, он может достигать лучших размеров сборки.
3. Версия позволяет вам изучить несколько новых функций, таких как отложенная загрузка компонента вместо модулей, метапрограммирование или компоненты более высокого порядка, новейшая система обнаружения изменений, не основанная на Zone.js, и т. д.

  • Ошибка исправлена

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

  • Лучшее взаимодействие с сообществом

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

  • Прекращение поддержки и удаление

Формат пакета Angular больше не включает пакеты FESM5 или ESM5. Это позволяет сэкономить 119 МБ времени на загрузку и установку при запуске yarn или npm install в библиотеках и пакетах Angular. От этих форматов можно отказаться, поскольку любое понижение уровня для поддержки ES5 проводится в конце процесса разработки.

Кроме того, организация Angular объявила устаревшей любую поддержку старых браузеров, таких как IE9, 10 и Internet Explorer Mobile.

  • Другие изменения

Angular 10 вносит революционные изменения. Например, Logic обновляется в соответствии с форматированием дневных периодов, выходящих за пределы полуночи. Если ваше приложение использует формат formatDate или DatePipe или даже коды форматов b и B, это изменение повлияет на него.

Еще одно изменение заключается в том, что любой преобразователь, возвращающий EMPTY, отменяет навигацию. Разработчики должны обновить распознаватели с определенным значением, например default!Empty.

Angular NPM не содержит нескольких комментариев jsdoc для поддержки расширенной оптимизации Closure Compiler. Тем, кто использует Closure Compiler, лучше использовать пакеты Angular, созданные непосредственно из исходников, а не использовать версии, опубликованные в NPM. В течение некоторого времени пользователи могут использовать свой текущий конвейер сборки.

В этой версии заголовки Vary игнорируются при извлечении источников из кэшей ServiceWorker. Это приводит к извлечению источников, даже если их заголовки не похожи. Если приложение должно различать свои ответы на основе заголовков запроса, убедитесь, что Angular ServiceWorker настроен так, чтобы избежать кэширования любого затронутого ресурса.

Предупреждения о любых неизвестных элементах теперь отмечаются как ошибки. Это не сломает ваше приложение, но может активировать инструменты, которые должны быть зарегистрированы через console.error.

Как обновить до Angular 10

Чтобы перейти на последнюю версию Angular, вы можете использовать следующую команду:

нг обновить @angular/cli @angular/ядро

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

Вывод
Возможно, все удобства, предлагаемые Angular 10, убедили вас обновить версию фреймворка вашего приложения. Поверьте нам, это стоит усилий.