Angular 8: обновление и обзор новых функций

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

Особенности релиза Angular 8

Очевидных новых функций в Angular 8 не так много, но несколько ощутимых плюсов все же есть.

Дифференциальная нагрузка

Теперь приложения на Angular 8 автоматически станут более производительными благодаря дифференциальной загрузке.

Дифференциальная нагрузка подразумевает, что при сборке для производства создаются два пакета: пакет для современных браузеров, поддерживающих ES2015+, и пакет для старых браузеров, которые поддерживают только версию JavaScript ES5. Благодаря поддержке модулей ES6 в новых браузерах автоматически будет загружен правильный пакет.

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

При этом вам не нужно делать ничего особенного, чтобы извлечь выгоду из дифференциальной загрузки: команда ng build с флагом –prod позаботится о том, чтобы дифференциальная загрузка работала прямо из коробки:

$ ng build --prod

Динамический импорт для ленивых маршрутов

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

Читайте также: Как настроить ленивую загрузку в Angular

Итак, импорт с отложенной загрузкой выглядел так:

{ path: '/cart', loadChildren: './cart/cart.module#CartModule' }

А теперь выглядит вот так:

{ path: `/cart`, loadChildren: () => import(`./cart/cart.module`).then(m => m.CartModule) }

Чтобы изменить синтаксис, используйте команду ng upgrade для обновления приложения.

Улучшения рабочего процесса CLI

Интерфейс командной строки продолжает улучшаться, и теперь команды ng build, ng test и ng run можно расширить сторонними библиотеками и инструментами. Например, AngularFire уже использует эти новые возможности с помощью команды deploy.

Ivy и Bazel

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

Обновление с Angular 7 до Angular 8

Как и в случае с предыдущими релизами, обновить приложение с Angular 7 до Angular 8 очень просто. Это особенно верно, если вы уже перешли на использование нового HttpClient и RxJS 6.

Для обновления до Angular 8 вам нужно выполнить только одну команду:

$ ng update @angular/cli @angular/core

С помощью этой команды ваш ленивый импорт маршрута будет автоматически перенесен на новый синтаксис импорта.

При обновлении следует помнить о нескольких вещах:

  • В это время могут всплыть новые синтаксические ошибки. Это связано с тем, что Angular теперь использует TypeScript 3.4, что может выявить некоторые проблемы, которые ранее не освещались.
  • Важно использовать Node.js версии 12 или новее. Вы можете проверить, какую версию Node вы используете, при помощи команды $ node -v. А если вам нужна самая новая версия, просто перейдите на официальную страницу Node.

Обновление Angular Material

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

$ ng update @angular/material

Эта команда также позаботится об обновлении импорта Angular Material для каждого конкретного компонента (не об импорте из глобального @angular/material).

Примечание: Если вы пытаетесь выполнить обновление не с Angular 7, а с другой версии, вы можете воспользоваться официальным руководством по обновлению Angular, чтобы узнать, как действовать дальше.

Дополнительные сведения

Теперь Angular 8 зависит от TypeScript 3.4. Ознакомьтесь с подробностями релиза, чтобы узнать, что изменилось в новой версии TypeScript.

Если ваше приложение использует Angular Material, рекомендуем взглянуть на примечания к релизу v8.

Стивен Флуин из команды Angular собрал серию видеороликов, демонстрирующих новые функции Angular 8.

Tags: , ,

Добавить комментарий