[Перевод] Встречаем Angular 10

Вышел Angular 10.0.0! Это — мажорный релиз, который затрагивает всю платформу, включая сам фреймворк, библиотеку компонентов Angular Material и инструменты командной строки. Размер этого релиза меньше, чем обычно. Дело в том, что с момента выхода Angular 9 прошло всего 4 месяца.

Мы стремимся к тому, чтобы выпускать каждый год по два мажорных релиза. Делается это по разным причинам. Во-первых — чтобы Angular шёл бы в ногу со временем и соответствовал бы современному состоянию экосистемы JavaScript. Во-вторых — чтобы у Angular был бы предсказуемый график выхода новых релизов. Angular 11 мы планируем выпустить этой осенью.

kbxxx95ovfs-jtsb_ma521fvx7e.jpeg

Поговорим о том, что нового появилось в Angular 10.

Новый компонент для выбора диапазонов дат


Angular Material теперь включает в себя новый компонент, предназначенный для выбора диапазонов дат.

254c07e62298c4e552e22e02db58f32a.gif


Новый компонент

Для того чтобы им воспользоваться, вам понадобятся компоненты mat-date-range-input и mat-date-range-picker.

Вот пример его применения.

Здесь можно узнать подробности о нём.

Предупреждения об использовании CommonJS-импортов


Когда пользуются зависимостями, упакованными в формате CommonJS, это может привести к увеличению размеров приложения и к снижению его производительности.

Начиная с Angular 10 система будет выдавать предупреждения в том случае, если в сборках используются подобные бандлы. Если вы столкнётесь с такими предупреждениями, касающимися ваших зависимостей, перенастройте проект, указав, что вы предпочли бы ESM-бандл (ECMAScript Module).

53a61b4a2e1771f650f0b788b3f7288b.png


Применение CommonJS- или AMD-зависимостей может приводить к необходимости принимать меры, помогающие оптимизации проекта

Особый режим, в котором применяются более строгие параметры проекта


Angular 10 предлагает разработчику более строгий вариант настроек проекта, применяемый при создании нового рабочего пространства командой ng new. Вот как это выглядит:

ng new --strict


Благодаря применению флага --strict новый проект инициализируется с использованием нескольких новых параметров, которые улучшают поддерживаемость проекта, помогают заблаговременно отлавливать ошибки, позволяют средствам командной строки лучше оптимизировать приложение. А именно, благодаря этому флагу происходит следующее:

  • Включается строгий режим в TypeScript.
  • Включается строгий режим при проверке типов в шаблонах.
  • Стандартные ограничения размеров различных частей бандла становятся примерно на 75% строже.
  • Включается использование правил линтинга, предотвращающих объявление сущностей типа any.
  • Приложение настраивается так, чтобы его код был бы лишён побочных эффектов, что позволяет эффективнее применять механизм tree-shaking.


Поддержка возможностей Angular в актуальном состоянии


Как это обычно делается в новых релизах Angular, в этот раз мы внесли некоторые изменения в зависимости. Это позволяет Angular использовать самые современные решения из экосистемы JavaScript.

  • Используемая версия TypeScript увеличена до 3.9.
  • Библиотека TSLib обновлена до версии 2.0.
  • Обновлён, до версии 6, линтер TSLint.


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

Новая стандартная конфигурация браузеров


Мы поменяли конфигурацию браузеров, используемую в новых проектов, исключив из неё устаревшие браузеры, и браузеры, которые используются достаточно редко.

Вот параметры браузеров, применяемые по умолчанию в Angular 9.

8aa312392be87ef0d89f800f28e91e55.png


Параметры браузеров, используемые в Angular 9

Вот что используется в Angular 10.

029fc77001eb18addf6b4f78440b046a.png


Параметры браузеров, используемые в Angular 10

У этого шага есть побочный эффект, который заключается в том, что теперь в новых проектах, по умолчанию, отключаются ES5-сборки. Для того чтобы включить ES5-сборки и дифференциальную загрузку для браузеров, которым это нужно (для таких, как IE или UC), достаточно просто добавить в файл .browserslistrc те браузеры, которые требуется поддерживать.

Улучшение взаимодействия с сообществом любителей Angular


Мы серьёзно занялись улучшением работы с сообществом любителей Angular. Так, за последние три недели список открытых задач в трекерах уменьшился примерно на 700 записей. Речь идёт о задачах, имеющих отношение к фреймворку, к инструментам командной строки и к компонентам. Мы, так или иначе, провели работу по двум тысячам задач и планируем наращивать темпы в ближайшие месяцы. А взаимодействие с сообществам позволит нам сделать ещё больше всего полезного.

Удалённые возможности и возможности, пользоваться которыми не рекомендуется


В Angular 10 мы кое-что убрали, а кое-какие возможности отнесли к разряду запланированных к удалению.

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

Мы, основываясь на серьёзном обсуждении с сообществом, решили отказаться от поддержки устаревших браузеров, включая IE 9, 10, а так же Internet Explorer Mobile.

Подробности о том, что удалено из Angular 10, и о том, что признано устаревшим, можно почитать здесь.

Обновление до Angular 10


Для того чтобы узнать подробности об обновлении Angular — посетите ресурс update.angular.io. Для того чтобы в ходе обновления всё шло бы хорошо, мы рекомендуем, за один шаг обновления, всегда обновляться лишь до одного мажорного релиза.

Если описать процесс обновления буквально в двух словах, то выглядеть это будет так:

ng update @angular/cli @angular/core


Здесь можно найти подробные сведения об обновлении Angular до версии 10.

А вы уже обновились до Angular 10?

guabcgmwuqoopx1ar80sjpz6keq.png

de0yl-6ppopvisr_a80b4yuhjj8.png

© Habrahabr.ru