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

Jun 8, 2018

В обновлении Angular нам поможет инструмент update.angular.io

  1. Если вы импортируете любые сервисы или инструменты для анимации из @angular/core, то вы должны будете изменить импорт для них на @angular/animations.
  2. Заменить HttpModule и Http сервис на HttpClientModule и HttpClient.
  3. Убедитесь, что ваша версия Node выше восьмой. Чтобы обновить версию Node я воспользовался nvm.
  4. Обновляем angular-cli

Обновляем angular-cli

Сперва узнаем версию angular-cli (воспользуемся npm-check):

Глобально:

npm-check -g

Локально:

npm-check ./

Глобально

Очистим кэш:

npm cache verify
# if npm version is < 5 then use `npm cache clean`

Ставим глобально @angular/cli:

npm install -g @angular/cli@latest

Далее узнаем какая версия используется глобально:

ng -v

Локально:

Очистим кэш:

npm cache verify
# if npm version is < 5 then use `npm cache clean`

Удалим папку node_modules (воспользуемся пакетом rimraf):

rimraf node_modules

Установим последнюю версию @angular/cli:

npm install --save-dev @angular/cli@latest

Проверим текущую версию @angular/cli:

ng -v

Как вы видите, формат для конфигурации Angular Cli был изменен, но вы можете автоматически обновить конфигурацию, запустив команду:

ng update @angular/cli

Как вы видите, будет удален .angular-cli.json и выполнен ряд других команд:

DELETE .angular-cli.json
CREATE angular.json (5347 bytes)
UPDATE karma.conf.js (1041 bytes)
UPDATE client/tsconfig.spec.json (
UPDATE package.json (3408 bytes)

Обновляем пакеты Angular до 6 версии

Обновим все пакеты Angular до 6 версии (воспользуемся флагом --force), а также версии RxJS и TypeScript.

ng update @angular/core --force

DONE. Вы обновили свой проект до 6 версии Angular.

Отметьте также, что теперь вы можете указывать сервисы не в модуле, а непосредственно в декораторе Injectable.

RxJS

При обновлении пакетов мы также установили "rxjs-compat": "^6.0.0-rc.0".

На данный момент наше приложение использует для RxJS пакет rxjs-compat, вместо последнего актуального "rxjs": "^6.1.0". Мы можем продолжать использовать в нашем приложении 'совместимый' пакет. Однако, если вы удалите пакет rxjs-compat, то тем самым значительно уменьшите размер приложения.

Удалим deprecated пакет RxJS.

Итак, чтобы обновить RxJS воспользуемся пакетом rxjs-tslint auto update rules.

npm install -g rxjs-tslint

Сделано. Теперь все что связано с RxJS в вашем проекте обновлено автоматически до актуальных версий.

Удалим rxjs-compat:

npm uninstall rxjs-compat

Особенности RxJS 6

Особенности RxJS 6: www.academind.com

Содержит методы, типы, утилиты и планировщики:

import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';

Содержит все операторы:

import { map, filter, scan } from 'rxjs/operators';

Следующие операторы были переименованы:

catch() => catchError()
do() => tap()
finally() => finalize()
switch() => switchAll()

Дополнительно, некоторые Observable-создающие методы были переименованы:

throw() => throwError()
fromPromise() => from() (this automatically detects the type)

pipe

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

import { map, switchMap, throttle } from 'rxjs/operators';

myObservable
.pipe(map(data => data * 2), switchMap(...), throttle(...))
.subscribe(...);
Добавить комментарий