Angular 7: Как обновится и описание нововведений

Angular 7 был недавно выпущен и не смотря на отсутствия значительных нововведений, есть несколько интересных изменений в утилитах и функциях которые увеличат производительность. И как всех предыдущих релизах новых версий, обновление будет очень легким.

Нововведения

В списке ниже будут перечислены все основные новые фичи и их описания. Но если вы хотите более детально ознакомится с ними, посетите официальный сайт.

CLI Prompts

Команда Angular постоянно сосредоточена на совершенствовании средств доступных разработчикам и новые консольные команды тому доказательство. Обычно когда вы запускаете такие команды как ng new или ng add, то они запускаются единожды. И если например вы хотите добавить роутинг, то вам нужно перезапустить команду.
Теперь с новая CLI утилита запрашивает возможные настройки. Например, при выполнении команды ng new mySuperApp у вас будет спрошено не хотите ли вы добавить роутинг. Если вы хотите попробовать разные форматы CSS, не переживайте, CLI позволит вам выбрать между CSS, SCSS, SASS, LESS. Более того можно сделать еще более тонкую настройку. Добавьте файл schematic.json используя Schematic CLI и вы можете задать Ангуляру какие параметры запрашивать при выполнении команды.

Angular Material CDK
ScrollingModule

Так как много мобильных фреймворков начали двигаться в сторону динамической загрузки таких данных как изображения или большие списки, Angular последовал их примеру, добавив ScrollingModule, который позволяет реализовать виртуальную прокрутку, то есть когда элементы становятся видимыми или невидимыми, они добавляются или удаляются из DOM. Производительность резко возросла с точки зрения пользователя. В следующий раз когда вы будете иметь потенциально большой список для прокрутки, прикрепите его компоненту cdk-virtual-scroll-viewport и получите преимущество в увеличении производительности.

DragDropModule

Теперь вы можете использовать модуль Angular Material для реализации drag&drop функциональности. Поддерживаются такие функции как пересортировка списков, перемещения элементов между списков. CDK включает автоматический рендеринг, drag обработчики, drop обработчики и даже возможность перемещения данных.

Производительность приложения

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

Команда Angular пытается сделать меньше не только сам фреймворк, а также приложений написанные на нем. Они исправили часто повторяемую ошибку включения полифилов reflect-metadata в продакшн сборку. Версия Angular 7 автоматически удаляет их.
Новые проекты также используют по умолчанию Budget Bundles которые сообщат вам, когда ваше приложения достигнет лимит максимального размера. По умолчанию, вы получите предупреждение на 2MB, и ошибку на 5MB. Если вам нужно изменить эти размеры, отредактируйте ваш angular.json файл.

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Обновленные зависимости

Angular теперь использует Typescript 3.1, RxJS и Node.js 10.

Обновления до Angular 7

Для большинства Angular приложений которые используют Angular 6 and RxJS 6, нужно выполнить следующую команду:

$ ng update @angular/cli @angular/core 

Также если вы используете Angular Material, выполните следующую команду

$ ng update @angular/material</p>

Если что-то пошло не так, ознакомьтесь с более детальной инструкцией по обновлению до Angular 7 https://update.angular.io/