Angular 8: обновление и обзор новых функций
Development | Комментировать запись
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: Angular, Angular 8, AngularJS