Это обновление также включает пакеты фреймворка (@angular/core, @angular/common, @angular/compiler и т. д.), Angular CLI, Angular Material + CDK, это в основном предназначено для исправления проблем совместимости, исправленные версии этих проектов будут основаны на проекте нуждается в выпуске.
ng updateng update <package>это новая команда CLI, которая анализирует вашиpackage.jsonи рекомендовать обновления для вашего приложения на основе ваших знаний об Angular.
ng updateЭто может помочь вам использовать правильную версию зависимостей, поддерживать синхронизацию ваших зависимостей с вашим приложением, а при использовании схем третьи лица также могут предоставлять обновления сценариев. Если одна из ваших зависимостей предоставляетng update schematic, тогда он автоматически обновит код при внесении критических изменений!
ng updateНе заменяет ваш менеджер пакетов, но использует npm или yarn в фоновом режиме для управления зависимостями, в дополнение к обновлению и мониторингу зависимостей.ng updateТакже при необходимости обновим ваш проект.
Например, командаng update @angular/coreОбновит все пакеты Angular, а также RxJS, FTypeScript, а также запустит доступные схемы в этих пакетах, чтобы поддерживать версии в актуальном состоянии. В то же время эта команда также может автоматически установитьrxjs-compatв ваше приложение, чтобы сделать RxJS v6 более плавным.
Другими новыми командами CLIng add <package>Это сделает ваш проект легче добавлять новые функции.ng addИспользуйте диспетчер пакетов для загрузки новых зависимостей и вызовите сценарий установки, который может обновить ваше приложение, изменив конфигурацию и добавив дополнительные зависимости, такие как полифиллы.
вы можете найти новыеng newПопробуйте выполнить следующие действия в приложении:
-
ng add @angular/pwa: добавьте манифест приложения и сервис-воркер, чтобы превратить ваше приложение в PWA. -
ng add @ng-bootstrap/schematics:Будуng-bootstrapдобавить в свое приложение. -
ng add @angular/material: Установите и настройте Angular Material и темы, зарегистрируйте новые исходные компоненты дляng generateсередина. -
ng add @clr/angular@next: Установите VMWare Clarity.
Первая версия Angular Elements была ориентирована на запуск компонентов Angular в существующем приложении Angular путем их регистрации в качестве пользовательских элементов, которые сейчас широко используются в системе управления контентом angular.io, в нее встроен HTML, можно динамически запускать системную функцию.
Угловой материал + компоненты CDKНаиболее примечательным является элемент управления деревом для отображения иерархических данных, следующий шаблону компонента таблицы данных, CDK содержит основные директивы дерева, а Angular Material обеспечивает тот же опыт, что и стиль Material Design верхнего уровня.
В то же время, компоненты значка и нижней строки меню также были обновлены.Значки используются для отображения небольшой, но полезной информации, например, количества непрочитанных сообщений.
В настоящее время пакеты @angular/cdk/overlay являются одной из самых мощных инфраструктур CDK, и вы можете использовать их для создания собственных библиотек пользовательского интерфейса.
Начальные компоненты углового материалаПосле запускаng add @angular/materialи добавляя материалы в существующее приложение, можно сгенерировать 3 новых исходных компонента.
Material Sidenav — это начальный компонент панели инструментов с именем приложения и боковой навигацией, которая реагирует на точки останова.
бегать:
ng generate @angular/material:material-navскопировать кодГенерируются следующие компоненты:
Информационная панель материалов — это начальный компонент, который содержит динамический список сетки.
бегать:
ng generate @angular/material:material-dashboardскопировать кодГенерируются следующие компоненты:
Таблица данных материалов поставляется с предварительно сконфигурированнойdatasource.
Как показано ниже:
CLI v6 теперь поддерживает многопроектные рабочие пространства, такие как несколько приложений или библиотек, а проекты CLI используют angular.json вместо angular-cli.json для создания и настройки проектов.
У каждого рабочего пространства CLI есть проекты, у каждого проекта есть цели, и у каждой цели могут быть конфигурации.
angular.json:
{
"projects": {
"my-project-name": {
"projectType": "application",
"architect": {
"build": {
"configurations": {
"production": {},
"demo": {},
"staging": {},
}
},
"serve": {},
"extract-i18n": {},
"test": {},
}
},
"my-project-name-e2e": {}
},
}скопировать кодДалее мы рассмотрим одну из наиболее важных функций CLI: поддержку создания и сборки библиотек.
ng generate library <name>скопировать кодЭта команда создаст библиотеку в рабочей области CLI и настроит ее для тестирования и сборки.
Tree Shakable ProvidersЧтобы уменьшить размер вашего приложения, мы заменили справочный модуль службы на справочную службу модуля, что позволяет нам создавать только те службы, которые внедряются в модуль.
До:
app.module.ts:
@NgModule({
...
providers: [MyService]
})
export class AppModule {}скопировать кодmy-service.ts:
import { Injectable } from '@angular/core';
@Injectable()
export class MyService {
constructor() { }
}скопировать кодВ будущем NgModule больше не нуждается в ссылках:
my-service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class MyService {
constructor() { }
}скопировать кодПосле обновления в будущем полифилл веб-анимации больше не потребуется. Это означает, что вы можете удалить этот полифилл из своего приложения и сэкономить около 47 КБ памяти, улучшив при этом производительность анимации в Safari.
RxJS v6Angular 6 также будет поддерживать RxJS v6, выпущенный в прошлом месяце. RxJS v6 содержит обратно совместимый пакет rxjs-compat, который поддерживает работу вашего приложения.
Долгосрочная поддержка (LTS)Angular сообщает, что они расширяют выпуски долгосрочной поддержки на все основные выпуски.
Ранее только v4 и v6 были LTS-версиями, но чтобы упростить разработчикам переход с одной основной версии на другую и дать проектам достаточно времени для планирования обновлений, команда Angular заявила, что, начиная с v4, она будет расширяться до все основные версии долгосрочной поддержки.
Каждый основной выпуск поддерживается в течение 18 месяцев, первые 6 месяцев — это активная разработка, а следующие 12 месяцев — исправления ошибок и исправления безопасности.
Как обновиться до Angular 6.0.0Пожалуйста, посетите руководство по обновлению для получения инструкций по обновлению.
Обновления обычно выполняются в 3 этапа, используйте новый инструмент обновления ng:
-
обновить @угловой/кли
-
Обновите пакет фреймворка Angular
-
Обновите другие зависимости
Оригинальная ссылка:
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4
Руководство по обновлению:
https://update.angular.io/
Официальное объявление Angular:
https://angular.io/guide/releases
верхняя часть фронта«Front-end Top» — это вертикальное сообщество InfoQ, которое фокусируется на крупных интерфейсных технологиях. Идите в ногу со временем, делитесь передовыми технологиями, добро пожаловать на внимание.
PWA, веб-фреймворки, пользовательский интерфейс и анимация, Node... Где следующая остановка для больших интерфейсов? Какова ценность и путь роста фронтенд-инженера? На GMTC2018 более 60 отечественных и зарубежных фронтенд-быков из Google, Facebook, BAT и др. обсудят с вами лицом к лицу последние технологические тенденции и практики в области фронтенда. увеличьте, приезжайте скорее! Отсканируйте QR-код ниже или нажмите «прочитать исходный текст», чтобы узнать больше о конференции!
В настоящее время конференция продается со скидкой 20%, а групповые покупки более выгодны Консультация по покупке билетов: 18514549229 (то же, что и WeChat)