Хотите обновить проект с углового v5 до углового v6


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

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

11 96

11 ответов:

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

Обновления :

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

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

    npm install-g @angular / cli
    НПМ установить @угловое/командной строки
    обновление ng @angular / cli

  3. обновите все свои пакеты Angular framework до v6 и правильной версии из RxJS и TypeScript, выполнив следующее:

    обновление ng @angular / core

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

    ng update @angular / material

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

    npm install-g rxjs-tslint
    rxjs-5-to-6-migrate-p src/tsconfig.приложение.json

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

    удаление npm rxjs-compat

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

Edit on 20-Apr-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 npm cache clean

    npm install -g @angular/cli@next
    
  4. изменение угловых версий пакетов в пакете.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. далее обновить локальный пакет Angular 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/cli@next
    npm install 
    
  6. конфигурация угловой командной строки формат был изменен с угловой командной строки 6.0.0-радиоуправляемый.2 версии, и ваша существующая конфигурация может быть обновлена автоматически, выполнив следующую команду. Он удалит старый конфигурационный файл .угловой-кли.json и напишет новый угловое.json файл.

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

Примечание: - Если вы получаете следующую ошибку "угловой компилятор требует TypeScript >=2.7.2 и

npm install typescript@2.7.2

угловой 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 @angular / core
  5. npm install rxjs-compat
  6. ng подавать

возможно, Вам потребуется обновить сценарии запуска в пакете.формат JSON Например. если вы используете флаги, такие как" приложение " и " окружающая среда" Они были обновлены до "проект" и "конфигурация" соответственно.

см https://update.angular.io/ для более детального руководства.

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

Upgrade angular

https://update.angular.io/

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

  • обновить свой НОД-узел версии 8 или выше и установить угловые Кинк последний глобально по npm i-g @angular/cli@latest.
  • угловой 6 использует угловой.json как файл конфигурации вместо .ангуар-кли.формат JSON. Также был изменен tslint. Проверять https://github.com/angular/angular-cli/wiki/angular-workspace ибо последние сведения о конфигурации. Вы должны переместить любой из существующих настройки в новый файл конфигурации.
  • для этого создайте еще один фиктивный проект с последним cli с использованием ng new 'your-project' и того же по умолчанию, такие как префикс, стиль и т. д., которые вы использовали для вашего проекта. Создание нового проекта с помощью cli https://github.com/angular/angular-cli/wiki/new
  • использовать https://update.angular.io/ чтобы проверить, что было изменено с вашего текущая версия угловой → угловой 6. Он предусматривает использование как изменить/исправить их.
  • выполните описанные выше действия и скопируйте / обновите угловатый.JSON-файл, созданный на Шаге 2. Сделайте npm i в своем проекте, чтобы получить все зависимости и обновление npm
  • сейчас идет большая часть. RxJS обновление и разрешение конфликтов. RxJS стандартизировал импорт операторы и наблюдаемые создатели с этим релизом. Сделать НПМ я -Г 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 / operators

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

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

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

вы все установлены. Добро пожаловать в Angular 6:) проверить мой блог здесь о том, как обновить

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

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

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest

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

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

  npm install --save rxjs-compat  

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

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

  1. обновление ng @angular / cli
  2. обновление ng @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.приложение.json (после установки мы должны изменить его в нашем исходном коде в формате rxjs6)
  6. npm uninstall rxjs-compat (удалите это окончательно)

Полное руководство

-----------------С угловым-cli--------------------------

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

  1. С помощью NPM (убедитесь, что у вас есть узел версии 8+ )

    npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest 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 теперь зависит от машинописи 2.7 и RxJS 6

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

npm i -g rxjs-tslint 

//or using yarn

yarn global add rxjs-tslint

затем вы можете запустить rxjs-5-к-6-мигрировать

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 screenshoot of upgrade packages

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

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

вот как я заставляю его работать.

Мое Окружение:

Угловое командной строки глобального : 6.0.0, местные: 1.7.4, угловая: 5.2, машинопись 2.5.3

Примечание: Для включения ng Update сначала необходимо установить угловой 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/core@10.0.1 --save //upgrade ngX translate to 10.0.1 for Angular 6

5 npm install --save @ng-bootstrap/ng-bootstrap@2.0.0 //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, of } from "rxjs";

угловой вопрос CLI:https://github.com/angular/angular-cli/issues/10621

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

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

чтобы исправить проблему, связанную с " угловой.json": -

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

магазин MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

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

надеюсь это поможет вам :)

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

ng update

Примечание: это не обновление.