Обновление до Angular v6
Лучший ресурс с подробной информацией о том, как перейти на новую версию Angular, - это https://update.angular.io/. Даже если вы переходите с версии v2 на версию v6, в ней будут перечислены все критические изменения, начиная с версии v2 до версии v6! Это отличный способ детально узнать, что нужно изменить в коде.
1: установка последней версии углового CLI
Первый шаг - убедиться, что у вас установлена последняя версия CLI:
npm install -g @angular/cli
С выпуском Angular v6 Angular CLI теперь также имеет версию Angular, то есть до Angular v5 мы будем использовать Angular CLI 1.x, а теперь Angular CLI также находится в версии 6.x. Это делает это намного проще!
2: обновление ng
Само собой разумеется, создайте ветку для обновления вашего проекта, поскольку вы никогда не узнаете, все ли зависимости будут работать после обновления до Angular v6.
Итак, сначала мы начнем с @angular/cli. Чтобы команда ng update работала внутри проекта, нам нужно сначала обновить версию @angular/cli до 6.x.
npm install --save-dev @angular/cli@latest
Затем выполните команду ng update для @angular/cli, затем @angular/core, а затем для других необходимых пакетов (rxjs, @angular/material):
ng update @angular/cli
ng update @angular/core
ng update @angular/material
ng update rxjs
Некоторые файлы структуры проекта были изменены с v5 на v6. angular-cli.json больше нет, его заменили angular.json. Структура angular.json также была изменена для поддержки нескольких проектов на одно рабочее пространство. Когда мы запустим ng update @angular/cli, все необходимые файлы будут обновлены!
3: обновление других зависимостей
Мне также нравится обновлять другие зависимости npm, используемые проектом во время обновления Angular. Пакет npm npm-check-updates действительно полезен для этой задачи.
npm install -g npm-check-updates
Используйте команду ncu, чтобы проверить, какие пакеты имеют доступные обновления. И ncu -u для обновления вашего package.json.
При изменении версий пакета package.json мне лично также нравится удалять node_module и снова запускать npm i просто для того, чтобы убедиться, что правильные версии доступны локально (а также обновить package-lock.json).
4: обновление RxJS
Итак, следующий шаг - ng serve, чтобы проверить, все ли в порядке с кодом. Не забудьте проверить https://update.angular.io/ для всех изменений клюва.
Несмотря на то, что мы смогли обновить код RxJS начиная с Angular v5 (с RxJS v5), чтобы использовать операторы pipeble, в проектах, которые я обновлял до v6, я забыл изменить несколько мест. Чтобы помочь нам с этой задачей, мы можем установить rxjs-tslint, чтобы помочь нам удалить весь устаревший код RxJS.
npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json
В качестве краткого описания импорта:
import { Subject } from 'rxjs/Subject';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of;'
до
import { BehaviorSubject, Subject, Observable, of } from 'rxjs';
Или, если вы еще не использовали конвейерные операторы RxJS:
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/switchMap';
до
import { of } from 'rxjs';
import { map, switchMap, catchError, mergeMap } from 'rxjs/operators';
Переименованы также следующие операторы:
do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
И в нашем коде мы можем начать использовать операторы pipeble.
От:
this.http.get('url')
.do(console.log)
.map(results => results.data)
.subscribe(results => {
console.log('Results', results);
});
Кому:
this.http.get('url')
.pipe(
tap(console.log), // old 'do' operator
map(results => results.data)
)
.subscribe(results => {
console.log('Results', results);
});
После обновления вашего кода RxJS вы все равно можете получить ошибки относительно RxJS из сторонних зависимостей. Чтобы решить эту проблему, установите rxjs-compat и после того, как зависимости обновили свой код, вы можете удалить этот пакет из вашего проекта.
npm install --save rxjs-compat
5: упрощение внедрения зависимостей для основных служб
Новая функция, представленная в Angular v6, называется «провайдером, работающим на деревьях». Это означает, что нам больше не нужно объявлять сервисы в модуле с помощью свойства providedIn, и это позволит сервисам быть доступными для дерева, то есть, если они не используются, они не будут частью пакета prod.
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MyCoreService { }
Я применил эту функцию во всех базовых службах (глобальная область) своих проектов, но я все еще использую поставщиков, не допускающих изменения дерева, со службами, которые не имеют глобальной области действия.
Это позволило очистить раздел провайдеров от CoreModule.
6: Обновление углового материала (опция)
Если уВы используете Angular Material в своем проекте, не забудьте запустить ng update @angular/material, чтобы обновить зависимости материала.
Сильное изменение с v5 на v6 - это то, как мы импортируем модули Material в нашем проекте:
От:
import {
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdMenuModule,
MdCardModule
} from '@angular/material';
Кому:
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatCardModule } from '@angular/material/card';
Теперь у каждого модуля есть свой пакет. Это также одна из причин, по которой мне нравится создавать отдельный модуль для импорта из трех сторон, как уже объяснялось в этой статье. Это значительно облегчает исправление импорта!
Некоторые другие вещи ...
У меня есть несколько проектов, которые были созданы начиная с Angular v2, и после каждого обновления основной версии я обычно просто обновлял package.json и исправлял критические изменения в коде, и это было нормально.
Поскольку в Angular CLI v6 произошли некоторые изменения структуры проекта, я также решил перенести проект, создав новый проект с CLI 6 и скопировав папку src из старого проекта в новый проект. Ниже приведены некоторые наиболее важные изменения.
Основным отличием, которое оказало некоторое влияние на код, является baseUrl: './' из tsconfig.json. В проектах, созданных с помощью CLI 1.x (для Angular v4 и v5), эта конфигурация отсутствует по умолчанию (но внутри src / tsconfig.ap.json). Перемещение baseUrl в корень tsconfig.json повлияло на пользовательские пути, объявленные в tsconfig.json, а также на путь для отложенных загрузочных модулей.
До - пользовательский путь в tsconfig.json:
paths: {
"@env/*": ["environments/*"]
}
После (отдельный проект, созданный с помощью CLI v6):
paths: {
"@env/*": ["src/environments/*"]
}
И ленивые загрузочные модули должны быть объявлены с использованием относительного пути:
До:
{ path: 'home', loadChildren: 'app/home/home.module#HomeModule' }
После того, как:
{ path: 'home', loadChildren: './home/home.module#HomeModule' }
Если у вас есть вложенные модули, вам также необходимо обновить их, чтобы использовать относительные пути:
До (module1-routing.module.ts):
{ path: 'foo', loadChildren: 'app/module1/module2/module2.module#Module2Module' }
После (module1-routing.module.ts):
{ path: 'foo', loadChildren: './module2/module2.module#Module2Module' }
Также были внесены некоторые изменения в команды CLI v6.
Поскольку большинство моих профессиональных приложений используют Java в качестве бэкэнда, выходная папка (dist) из ng build настроена по другому пути. До CLI 1.x был флаг (output-path -op), который можно было использовать в команде ng build (ng build -op ../other/path). В CLI v6, если вам нужно использовать другой путь вывода, вам нужно обновить angular.json и удалить флаг -op из сборки ng:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../other/path",
...
}
}
}