Обновить до Angular 5

Как обновить до Angular 5? Это из моего пакета .json:

"dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "5.0.0",
    "@angular/compiler": "5.0.0",
    "@angular/core": "5.0.0",
    "@angular/forms": "5.0.0",
    "@angular/http": "5.0.0",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "5.0.0",
    "@angular/router": "5.0.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

Когда я запускаю npm install, я получаю эту ошибку

npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\Program Файлы \nodejs\ node.exe" "C:\Program Файлы \nodejs\node_modules\npm\bin\npm-cli.js" "установить" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! код ETARGET

npm ERR! notarget Совместимая версия не найдена: @ angular/[email protected] npm ERR! notarget Действительные цели установки: npm ERR! notarget 5.0.0-rc.0, 5.0.0-beta.7, 5.0.0-beta.6, 5.0.0-beta.5, 5.0.0-beta.4, 5.0.0-beta.3, 5.0.0-beta.2, 5.0. 0-beta.1, 5.0.0-beta.0, 4.4.4, 4.4.3, 4.4.2,  4.4.1, 4.4.0-RC.0, 4.3.6, 4.3.5, 4.3.4, 4.3.3, 4.3.2, 4.3.1, 4.3.0, 4.3.0-rc.0, 4.3. 0-бета .1, 4.3.0-beta.0, 4.2.6, 4.2.5, 4.2.4, 4.2.3, 4.2.2, 4.2.1, 4.2.0, 4.2. 0-rc.2, 4.2.0-rc.1, 4.2.0-rc.0, 4.2.0-beta.1, 4.2.0-beta.0, 4.1.3, 4.1.2, 4.1.1, 4.1.0, 4.1.0-rc.0, 4.1.0-beta.1, 4.1.0-beta.0, 4.0.3, 4.0.2, 4.0.1, 4.0.0, 4.0.0- rc. 6, 4.0.0-rc.5, 4.0.0-rc.4, 4.0.0-rc.3, 4.0.0-rc.2, 4.0.0-rc.1, 4.0.0-rc.0, 4.0.0-beta.8, 4.0.0-beta.7, 4.0.0-beta.6, 4.0.0-beta.5, 4.0.0-beta.4, 4.0.0-beta.3, 4.0.0-beta.2, 4.0.0-beta.1, 4.0.0-beta.0, 2.4.10, 2.4.9, 2.4.8, 2.4.7, 2.4.6, 2.4.5, 2.4. 4, 2.4.3, 2.4.2, 2.4.1, 2.4.0, 2.3.1, 2.3.0, 2.3.0-rc.0, 2.3.0-beta.1, 2. 3,0-бета, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.2.0-rc.0, 2.2.0-beta.1, 2.2.0-beta.0, 2.1.2, 2.1.1, 2.1.0, 2.1.0-rc.0, 2.1.0-beta.0, 2.0.2, 2.0.1, 2.0.0, 2.0.0-r c.7, 2.0.0-rc.6, 2.0.0-rc.5, 2.0.0-rc.4, 2.0.0-rc.3, 2.0.0-rc.2, 2.0.0-rc.1, 2.0.0 -rc.0, 0.0.0-7, 0.0.0-6, 0.0.0-5, 0.0.0-4, 0.0.0-3, 0.0.0-2, 0.0.0-1, 0.0.0 -0 npm ERR! notarget npm ERR! notarget Это, скорее всего, не проблема с самой npm. npm ERR! notarget В большинстве случаев вы или одна из ваших зависимостей запрашиваете npm ERR! notarget a версии пакета, которая не существует. npm ERR! notarget npm ERR! notarget Это было указано как зависимость от gizza npm ERR! notarget

Я знаю, что Angular 5 все еще находится в бета-тестировании, но я хочу проверить его.

EDIT: версия 5.0.0 теперь существует с 1 ноября 2017 года

Ответ 1

EDIT: Версия 5.0.0 теперь существует с 1 ноября 2017 года

NPM сообщает, что 5.0.0 не существует. измените ваш пакет .json на один из предложенных кандидатов на выпуск, например 5.0.0-rc.0. Есть хорошие шансы, что они не все точно так, чтобы либо прочитать npm-ошибку, это действительно полезно в этом случае.

"dependencies": {
    "@angular/animations": "5.0.0-rc.0",
    "@angular/common": "5.0.0-rc.0",
    "@angular/compiler": "5.0.0-rc.0",
    "@angular/core": "5.0.0-rc.0",
    "@angular/forms": "5.0.0-rc.0",
    "@angular/http": "5.0.0-rc.0",
    "@angular/platform-browser": "5.0.0-rc.0",
    "@angular/platform-browser-dynamic": "5.0.0-rc.0",
    "@angular/router": "5.0.0-rc.0",
    "@types/jwt-decode": "^2.2.1",
    "bootstrap": "^3.3.7",
    "bootstrap-sass": "^3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.4.1",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "jwt-decode": "^2.2.0",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
},
"devDependencies": {
    "@angular/cli": "1.4.0-rc.2",
    "@angular/compiler-cli": "5.0.0",
    "@angular/language-service": "5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "angular-ide": "^0.9.31",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "~5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "sw-precache": "^5.2.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
}

Ответ 2

Как сейчас, угловой 5 был официально выпущен 1 ноября 2017 года, поэтому для тех, кто хочет обновить ваши старые угловые приложения до углового 5:

1) Угловая команда также поставила удобный инструмент, чтобы сделать обновление с любой версии до углового 5 максимально простым.

2) Вам нужно будет обновить все ваши угловые пакеты до версии 5.0, запустите следующую команду:

npm install @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 @angular/[email protected]^5.0.0 [email protected] [email protected]^5.5.2

3) Угловая 5 теперь также зависит от TypeScript 2.4.2 и RxJS 5.5.2, поэтому вам также придется обновить этот пакет.

npm install [email protected] --save-exact 

4) Если вы полагаетесь на дату, валюту, десятичную или процентную ставку, то в 5 вы увидите незначительные изменения в формате. Для приложений, использующих локали, отличные от en-us, вам нужно будет импортировать его и, возможно, locale_extended_fr из @angular/common/i18n_data/locale_fr и registerLocaleData (local). Для получения дополнительной информации о нарушениях труб: fooobar.com/questions/632667/...

5) Использование инструментов вместо продолжений с любыми событиями жизненного цикла: Убедитесь, что вы не используете extends OnInit или используете расширения с любым событием жизненного цикла. Вместо этого используйте инструменты.

6) Переключитесь с HttpModule и службы Http на HttpClientModule и службу HttpClient. HttpClient упрощает эргономику по умолчанию (вам больше не нужно сопоставлять json и удалять любые вызовы map(res => res.json()), которые больше не нужны.) И теперь поддерживает типизированные возвращаемые значения и перехватчики.

7) Рекомендуемый способ импорта операторов в RxJS 5.5 - из rxjs/операторов.

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

Я попытался объяснить здесь больше. https://onlyforcoder.blogspot.in/2017/11/angular-5-upgrade-your-project-To-Angular5.html

Ответ 3

Изменить: это последние рабочие зависимости Angular 5:

  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "1.6.7",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }

Просто скопируйте Вставить и запустите npm install

Ответ 4

Я получил ту же ошибку, даже когда вы вставляете команду из руководства Angular.

В конце концов, я только что изменил версии до последней версии, и это сработало.

npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] [email protected] --save

npm install [email protected] --save-exact

Я не уверен, почему эта ошибка возникает, потому что даже когда я набираю

 npm view @angular/core versions --json

Я вижу, что версия действительно существует. Моя единственная теория, может быть, потому, что я нахожусь в Windows, а версия NPM для Windows не нравится этим номерам...

Ответ 5

Оригинальный ответ от @Vishal Gulati: fooobar.com/questions/359971/...

Краткий обзор:

Обновите Angular со всеми его пакетами до последней версии.

npm install [email protected] --save-dev
npm install @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] @angular/[email protected] --save

При необходимости обновить CLI

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/[email protected]

Ответ 6

Angular Руководство по обновлению - 4.0 → 5.0 для дополнительных приложений

Перед обновлением

  • Прекратите использование DefaultIterableDiffer, KeyValueDiffers # фабрик или IterableDiffers # фабрики
  • Переименуйте теги шаблонов в ng-template
  • Заменить OpaqueTokens с помощью InjectionTokens.
  • Если вы вызываете DifferFactory.create(...), удалите ChangeDetectorRef аргумент.
  • Остановить передачу любых аргументов конструктору для ErrorHandler
  • Если вы используете ngProbeToken, убедитесь, что вы импортируете его из @angular/core вместо @ angular/platform-browser
  • Если вы используете TrackByFn, вместо этого используйте TrackByFunction
  • Если вы импортируете какие-либо службы анимации или инструменты из @angular/core, вы должны импортировать их из @ angular/animations
  • Замените ngOutletContext на ngTemplateOutletContext.
  • Заменить CollectionChangeRecord с помощью IterableChangeRecord
  • В любом месте, где вы используете Renderer, теперь используйте Renderer2
  • Если вы используете preserveQueryParams, вместо этого используйте queryParamsHandling

Во время обновления

  • Если вы полагаетесь на дату, валюту, десятичную или процентную ставку, в 5 вы увидите незначительные изменения в формате. Для приложений, использующих локали, отличные от en-us, вам необходимо будет импортировать его и locale_extended_fr из @angular/common/i18n_data/locale_fr и registerLocaleData (локальный).
  • Не полагайтесь на gendir, вместо этого посмотрите на использование skipTemplateCodeGen. Подробнее
  • Если вы создали настраиваемый элемент управления формы с минимальным и максимальным входами свойства, вам нужно будет адаптироваться к новому поведению, переименовав их или используя встроенные валидаторы.
  • Обновите все ваши зависимости до последней версии Angular и правой версии TypeScript. Если вы используете Linux/Mac, вы можете использовать:
  • npm install @angular/{анимация, общий, компилятор, компилятор кли, ядро, форма, HTTP, платформа-браузер, платформа-браузер динамична, платформа-сервер, маршрутизатор} @'^ 5.0.0' typescript @2.4.2 rxjs @'^ 5.5.2'
  • npm install typescript @2.4.2 --save-exact

После обновления

  • Переключение с HttpModule и службы Http на HttpClientModule и служба HttpClient. HttpClient упрощает эргономику по умолчанию (Вам больше не нужно сопоставлять json) и теперь поддерживает типизированный возврат значений и перехватчиков. Подробнее о angular.io
  • Если вы используете DOCUMENT из @angular/platform-browser, вы должны начать для импорта из @ angular/common
  • В любом месте, где вы используете ReflectiveInjector, теперь используйте StaticInjector
  • Выберите значение off saveWhitespaces в вашем tsconfig.json для получить преимущества этой настройки, в то время как по умолчанию все еще сохранить пробелы.
  • Для каждого импортируемого оператора RxJS вы должны импортировать из 'rxjs/operator' и использовать оператор трубы.

Ответ 7

Вот команда обновления Angular CLI в версии 5.2.0

npm install @angular/compiler-cli @5.2.0

Ответ 8

Эта проблема возникает из-за версии npm Чтобы работать в Angular 5;

"node": ">=6.9.5 <7.0.0",
"npm": ">=3.10.7 <4.0.0",
"yarn": ">=1.0.2 <2.0.0"

Ответ 9

В принципе, для этого требуется несколько важных шагов.

  • Обновление Angular CLI до последней версии.
  • Измените Angular 4 зависимости приложений и обновите зависимости.

Вот так, вы можете легко обновить приложение Angular 4 до Angular 5, Подробнее

Ответ 10

Перед обновлением переименуйте теги шаблонов в ng-template.

Обновите все ваши зависимости до последней версии Angular и правильной версии TypeScript. Если вы используете Windows, вы можете использовать:

npm install @ angular/animations @'^ 5.0.0' @angular/common @'^ 5.0.0' @angular/compiler @'^ 5.0.0' @angular/компилятор [email protected]'^5.0.0 '@angular/core @' ^ 5.0.0 '@angular/forms @' ^ 5.0.0 '@angular/http @' ^ 5.0.0 '@angular/platform-browser @'^ 5.0.0' @angular/platform-browser-dynamic @'^ 5.0.0' @angular/platform-server @'^ 5.0.0' @angular/[email protected]'^5.0.0 'typescript @2.4.2 rxjs @' ^ 5.5.2 '

npm install typescript @2.4.2 --save-exact