Как обновить Angular 6 до версии 7

Как обновить Angular 6 до версии 7

От автора: Angular 7 вышел. Настало время обновить Angular 6 и наши проекты ngx-* до последней версии.

В этом релизе основное внимание уделялось улучшению всей платформы. Drag and Drop и Angular Elements стали одними из ключевых функций в этом релизе.

Примечание: В 6.1 были внесены существенные изменения (подождите, существенные изменения должны быть частью основных релизов, вы знаете об этом. Мы говорим об Angular.), которые затрагивают только тех, кто использует для сборки bazel. Полностью новое и захватывающее IVY все еще активно разрабатывается, и в этот релиз не вошло.

С введением Schematics, Angular CLI добавляет новые функции подсказок. Это, безусловно, увеличит производительность разработчиков и позволит улучшить преобразования кода, которые будут выполняться поверх Angular CLI.

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

Команда ng serve Angular 7: ей требуется 5,4 с для сборки и размер пакета 3.5MB для базового приложения, созданного Angular CLI. Это чуть меньше, чем в Angular 6.

С другой стороны, aot собирает без каких-либо изменений, и для предоставления флагов prod требуется около 5.6 с и размер пакета 3.4MБ.

С флагом prod для сборки требуется около 23 секунд, а размер пакета составляет около 107 КБ. Значительное увеличение времени сборки, но размер пакета сокращается в сборке prod существенно. Это действительно здорово.

С помощью Schematics команде Angular будет легче вводить изменения и обрабатывать их с помощью разработчиков. Вы можете использовать

ng update @angular/cli @angular/core

Основное изменение с этим обновлением — обновление зависимых библиотек, таких как rxjs и TypeScript. Angular 7 поддерживает Node 10. Он также поддерживает TypeScript 3.1 и Rxjs 6. Будет обновлено импортирование библиотеки rxjs.

Если вы устали от бесконечных тестов приложений, сгенерированных Angular CLI, и вам нужны более сложные примеры реальных приложений, они в вашем распоряжении.

Для этого примера, как мы это делали ранее, мы возьмем пример приложения JHipster, и расскажем о том, что мы сделали, чтобы перейти на Angular 7.

Если вы не слышали о JHipster, вы обязательно должны прочитать о нем здесь. Если вы мечтаете о разработке полного стека и заинтересованы в изучении новейшей технологии, а также о том, как создавать что-то более быстрое и потрясающее, вы должны ознакомиться с этим источником. Отличия между Angular 5, Angular 6 и Angular 7 приведены в таблице ниже:

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

Теперь для Angular 7 вам нужны RxJS 6.3 и TypeScript 3.1. Другие интересные вещи, которые стоит заметить: Angular Elements теперь поддерживают Shadow DOM v1 и слоты.

Зачем вам обновляться до Angular 6?

Размер пакета уменьшается

На один шаг ближе к ivy

Почему вы должны потратить некоторое время? С новыми TypeScript и RxJS, самое время переходить. Удачного кодирования!

Автор: sendilkumarn

Источник: https://medium.com/

Редакция: Команда webformyself.