Хотите обновить проект от Angular v5 до Angular v6

Поскольку Angular 6 здесь, я хочу обновить или перенести свое приложение с угловым 5 клиентом на угловое 6, но я не получаю никакого учебника или чего-либо, что может мне помочь.

По моему мнению, мне просто нужно запустить новый Angular CLI, а затем переместить мой старый источник в новый проект. Я читаю, что Angular 6 использует новый рендерер под названием Ivy. Должен ли я изменить свой проект в соответствии с Айви?

Редактирование 07-мая-2018: версия 6 Angular была выпущена официальная ссылка Angular blog . Я упомянул об общих этапах обновления ниже, но до и после обновления вам необходимо внести изменения в свой код, чтобы сделать его работоспособным в версии v6, для получения подробной информации посетите официальный сайт https://update.angular.io .

Шаги обновления:

  1. Убедитесь, что версия NodeJS имеет значение 8.9+, если не обновляет ее.

  2. Обновите Angular cli глобально и локально и перенесите старую конфигурацию .angular-cli.json в новый формат angular.json , выполнив следующее:

    npm install -g @ angular / cli
    npm install @ angular / cli
    ng update @ angular / cli

  3. Обновите все ваши пакеты с угловыми фреймами до версии v6 и правильную версию RxJS и TypeScript, выполнив следующие действия:

    ng update @ angular / core

  4. Обновите угловой материал до последней версии, выполнив следующие действия:

    ng update @ угловой / материал

  5. RxJS v6 имеет значительные изменения от v5, v6 – пакет обратной совместимости rxjs-compat, который будет поддерживать работу ваших приложений, но вы должны реорганизовать код типа TypeScript, чтобы он не зависел от rxjs-compat. Для рефакторирования выполните следующий код:

    npm install -g rxjs-tslint
    rxjs-5-to-6-migrate -p src / tsconfig.app.json

    Примечание. – После того, как все ваши зависимости будут обновлены до RxJS 6, удалите rxjs-compat, так как это увеличивает размер пакета. обратитесь к руководству по обновлению RxJS для получения дополнительной информации.

    npm uninstall rxjs-compat

  6. ng serve чтобы проверить его.
    Если вы получите ошибки в сборке, обратитесь к https://update.angular.io за подробной информацией.

Редактировать в 20 апреля-2018: обновить угловую версию до версии 6.0.0-rc.5 и добавить шаг 6 для изменения формата конфигурации Углового CLI.

  1. Обновите rxjs до 6.0.0-beta.0. Дополнительную информацию см. В этом руководстве по обновлению RxJS . RxJS v6 имеет разрыв, поэтому сначала совместим ваш код с последней версией RxJS.

  2. Обновите версию NodeJS до 8.9+ (это требуется по угловой версии cli 6)

  3. Обновите глобальный пакет Angular cli до следующей версии.

     npm uninstall -g @angular/cli npm cache verify 

    если версия npm <5, то используйте npm cache clean

     npm install -g @angular/[email protected] 
  4. Измените версии угловых пакетов в файле package.json на ^6.0.0-rc.5

     "dependencies": { "@angular/animations": "^6.0.0-rc.5", "@angular/cdk": "^6.0.0-rc.12", "@angular/common": "^6.0.0-rc.5", "@angular/compiler": "^6.0.0-rc.5", "@angular/core": "^6.0.0-rc.5", "@angular/forms": "^6.0.0-rc.5", "@angular/http": "^6.0.0-rc.5", "@angular/material": "^6.0.0-rc.12", "@angular/platform-browser": "^6.0.0-rc.5", "@angular/platform-browser-dynamic": "^6.0.0-rc.5", "@angular/router": "^6.0.0-rc.5", "core-js": "^2.5.5", "karma-jasmine": "^1.1.1", "rxjs": "^6.0.0-uncanny-rc.7", "rxjs-compat": "^6.0.0-uncanny-rc.7", "zone.js": "^0.8.26" }, "devDependencies": { "@angular-devkit/build-angular": "~0.5.0", "@angular/cli": "^6.0.0-rc.5", "@angular/compiler-cli": "^6.0.0-rc.5", "@types/jasmine": "2.5.38", "@types/node": "~8.9.4", "codelyzer": "~4.1.0", "jasmine-core": "~2.5.2", "jasmine-spec-reporter": "~3.2.0", "karma": "~1.4.1", "karma-chrome-launcher": "~2.0.0", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^0.2.0", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "postcss-loader": "^2.1.4", "protractor": "~5.1.0", "ts-node": "~5.0.0", "tslint": "~5.9.1", "typescript": "^2.7.2" } 
  5. Следующее обновление Угловой локальный пакет cli для следующей версии и установка вышеупомянутых пакетов.

     rm -rf node_modules dist # use rmdir /S/Q node_modules dist in Windows Command Prompt; use rm -r -fo node_modules,dist in Windows PowerShell npm install --save-dev @angular/[email protected] npm install 
  6. Формат конфигурации Angular CLI был изменен с версии углового клика 6.0.0-rc.2, и существующую конфигурацию можно обновить автоматически, выполнив следующую команду. Он удалит старый файл конфигурации .angular-cli.json и напишет новый файл angular.json .

    ng update @angular/cli --migrate-only --from=1.7.4

Примечание. – Если вы получаете следующую ошибку: «Угловой компилятор требует TypeScript> = 2.7.2 и <2.8.0, но вместо него был найден 2.8.3». выполните следующую команду:

 npm install [email protected] 

Угловая 6 только что была выпущена.

https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

Вот что работало для одного из моих небольших проектов

  1. npm install -g @ angular / cli
  2. npm install @ angular / cli
  3. ng update @ angular / cli -migrate-only – from = 1.7.0
  4. ng update @ angular / core
  5. npm install rxjs-compat
  6. ng служить

Возможно, вам потребуется обновить сценарии запуска в package.json. Например. если вы используете такие флаги, как «приложение» и «среда». Они были обновлены до «проекта» и «конфигурации» соответственно.

Подробнее см. https://update.angular.io/ .

Просто используйте официальное руководство по обновлению, которое расскажет вам, что вам нужно сделать для ваших конкретных потребностей:

Модернизация углового

https://update.angular.io/

Мне пришлось повторно запустить ng update @ angular / cli для angular-cli.json для изменения на angular.json

Проверьте данные поэтапного обновления с углового 5 на угловое 6. Они содержат подробную информацию о проблемах, с которыми вы сталкиваетесь во время обновления, и о том, как их разрешать.

  • Обновите версию узла до 8 или выше и установите «Угловой кли» в глобальном масштабе по номеру npm i -g @ angular / cli @ latest.
  • Угловой 6 использует файл angular.json в качестве файла конфигурации вместо .anguar-cli.json. Также изменен tslint. Проверьте последние сведения о конфигурации https://github.com/angular/angular-cli/wiki/angular-workspace . Вам нужно переместить любую существующую конфигурацию в новый файл конфигурации.
  • Для этого создайте еще один фиктивный проект с последним кли, используя новый «ваш проект» и такие же значения по умолчанию, как префикс, стиль и т. Д., Которые вы использовали ранее для своего проекта. Создайте новый проект с помощью cli https://github.com/angular/angular-cli/wiki/new
  • Используйте https://update.angular.io/, чтобы проверить, что было изменено с вашей текущей версии Angular → Angular 6. В ней содержится информация о том, как изменить / исправить их.
  • Выполните описанные выше шаги и скопируйте / обновите файл angular.json, созданный на шаге 2. Сделайте npm i в своем проекте, чтобы получить все зависимости и обновить npm
  • Сейчас большая часть. RxJS обновляет и разрешает конфликты. RxJS имеет стандартизированный импорт операторов и наблюдаемых создателей с этим выпуском. Сделайте npm i -g rxjs-tslint и добавьте ниже конфигурацию lint в tslint.json
 { "rulesDirectory": [ "node_modules/rxjs-tslint" ], "rules": { "rxjs-collapse-imports": true, "rxjs-pipeable-operators-only": true, "rxjs-no-static-observable-methods": true, "rxjs-proper-imports": true } } 
  • Теперь запустите ng lint –fix. Это исправляет несколько элементов, но большинство оставшихся проблем будет выделено, и вы должны исправить его вручную.

Операторы Изменение имени:

 do -> tap, catch -> catchError, switch -> switchAll, finally -> finalize 

Все операторы переместились в rxjs / operator

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

Наблюдаемые методы создания перемещаются в rxjs

  import { Observable, Subject, of, from } from 'rxjs'; 

У вас все настроено. Добро пожаловать в Angular 6 🙂 Посмотрите мой блог здесь о том, как обновить

Как отметил Винай Кумар, он не будет обновлять глобально установленную Угловую CLI. Чтобы обновить его во всем мире, просто используйте следующие команды:

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

Обратите внимание, что если вы хотите обновить существующий проект, вам нужно изменить существующий проект, вы должны изменить package.json внутри своего проекта.

В Angular нет изменений, но они находятся в RxJS, поэтому не забудьте использовать библиотеку rxjs-compat для работы с устаревшим кодом.

  npm install --save rxjs-compat 

Я написал хорошую статью об установке / обновлении Angular CLI http://bmnteam.com/angular-cli-installation/

Пожалуйста, запустите приведенные ниже комментарии, чтобы обновить Angular 6 от Angular 5

  1. ng update @ angular / cli
  2. ng update @ angular / core
  3. npm install rxjs-compat (для поддержки старой версии rxjs 5.6)
  4. npm install -g rxjs-tslint (Чтобы изменить формат rxjs 5 на rxjs 6 в коде. Установить глобально тогда будет работать только)
  5. rxjs-5-to-6-migrate -p src / tsconfig.app.json (После установки мы должны изменить его в нашем исходном коде на формат rxjs6)
  6. npm uninstall rxjs-compat (удалите это окончательно)

Вот как я работаю.

Моя окружающая среда:

Угловая CLI Global: 6.0.0, локальная: 1.7.4, угловая: 5.2, машинописный 2.5.3

Примечание. Чтобы включить ng Update вам необходимо установить Angular CLI 6.0 с первого npm install -g @angular/cli or npm install @angular/cli

  1. ng update //update Angular Package core/common/complier... to 6.0.0

  2. ng update @angular/cli //change angular-cli.json to angular.json

необязательно, если у вас угловой материал 5.4.2, ngx-translate 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

  1. ng update @angular/material //upgrade to 6.0.1

  2. npm install @ngx-translate/[email protected] --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/[email protected] //for ng-bootstrap

Если вы используете Observable и получите ошибку:

ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. node_modules/rxjs/observable/of.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/observable/of'.

Изменить: import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of'; import { Observable } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

к

import { Observable, of } from "rxjs";

Угловая проблема CLI: https://github.com/angular/angular-cli/issues/10621

—————– С угловым cli ————————–

1. Обновление CLI на глобальном и локальном уровне

  1. Использование NPM (убедитесь, что у вас есть версия узла 8+)

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

  2. Использование пряжи

    yarn remove @angular/cli yarn global add @angular/cli yarn add @angular/cli

2. Зависимые отношения

 ng update @angular/cli ng update @angular/core ng update @angular/material ng update rxjs 

Угловое 6 теперь зависит от TypeScript 2.7 и RxJS 6

Обычно это означает, что вам нужно обновлять свой код везде, где используются импорт и эксплуатация RxJS, но, к счастью, есть пакет, который заботится о большей части тяжелого подъема:

 npm i -g rxjs-tslint //or using yarn yarn global add rxjs-tslint 

Затем вы можете запустить rxjs-5-to-6-migrate

 rxjs-5-to-6-migrate -p src/tsconfig.app.json 

окончательно удалите rxjs-compat

 npm uninstall rxjs-compat // or using Yarn yarn remove rxjs-compat 

См. Эту ссылку https://alligator.io/angular/angular-6/


——————- Без углового-cli ————————-

Поэтому вам нужно вручную обновить файл package.json .

package.json screenshoot пакетов обновления

Затем запустите

  npm update npm install --save rxjs-compat npm i -g rxjs-tslint rxjs-5-to-6-migrate -p src/tsconfig.app.json 

Есть несколько шагов по обновлению 2/4/5 до углового 6.

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

Чтобы исправить проблему, связанную с «angular.json»: –

 ng update @angular/cli --migrate-only --from=1.7.4 

Сохранить МИГРАЦИЮ
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

RXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

Надеюсь, это поможет вам 🙂

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

ng update

note: это не будет обновляться по всему миру.

Давайте будем гением компьютера.