Хотите обновить проект с углового v5 до углового v6
поскольку Angular 6 здесь, я хочу обновить или переместить свое клиентское приложение angular 5 в angular 6, но я не получаю никакого учебника или чего-либо, что может меня провести.
по мне, мне просто нужно запустить новый угловой CLI, а затем переместить мой старый источник в новый проект. Я читал, что Angular 6 использует новый рендерер под названием Ivy. Придется ли мне изменить свой проект в соответствии с Ivy?
11 ответов:
Edit on 07-May-2018: Версия 6 угловой был выпущен официальный угловой блог ссылка. Я упомянул общие шаги обновления ниже, но до и после обновления вам нужно внести изменения в свой код, чтобы сделать его работоспособным в v6, для получения этой подробной информации посетите официальный сайт https://update.angular.io .
Обновления :
убедитесь, что NodeJS версия 8.9+ если не обновить оно.
обновить угловой cli глобально и локально, а также перенести старую конфигурацию .угловой-кли.json новый угловое.json формат, выполнив следующее:
npm install-g @angular / cli
НПМ установить @угловое/командной строки
обновление ng @angular / cliобновите все свои пакеты Angular framework до v6 и правильной версии из RxJS и TypeScript, выполнив следующее:
обновление ng @angular / core
обновить угловой материал до последней версии, выполнив следующее:
ng update @angular / material
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
Done run
ng serve
чтобы проверить его.
Если вы получаете ошибки в сборке см. https://update.angular.io для детальной информации.Edit on 20-Apr-2018: Обновлена угловая версия до 6.0.0-rc.5 и добавлен Шаг 6 для угловых изменений формата конфигурации CLI.
обновление rxjs до 6.0.0-beta.0, пожалуйста, смотрите по этой Руководство По Обновлению RxJS для подробнее. RxJS v6 имеет разрывное изменение, поэтому сначала сделайте свой код совместимым с последней версией RxJS.
обновление версии NodeJS до 8.9+ (это требуется угловой версией cli 6)
обновить глобальный пакет Angular cli до следующей версии.
npm uninstall -g @angular/cli npm cache verify
если версия npm npm cache clean
npm install -g @angular/cli@next
изменение угловых версий пакетов в пакете.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" }
далее обновить локальный пакет 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.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
вот что работало для одного из моих небольших проектов
- npm install-g @angular / cli
- npm install @angular / cli
- ng update @angular / cli --migrate-only --from=1.7.0
- обновление ng @angular / core
- npm install rxjs-compat
- ng подавать
возможно, Вам потребуется обновить сценарии запуска в пакете.формат JSON Например. если вы используете флаги, такие как" приложение " и " окружающая среда" Они были обновлены до "проект" и "конфигурация" соответственно.
см 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
- обновление ng @angular / cli
- обновление ng @angular / core
- npm install rxjs-compat (для поддержки более старой версии rxjs 5.6 )
- npm install-g rxjs-tslint (чтобы изменить формат rxjs 5 на RxJS 6 в коде. Установите глобально, тогда будет работать только)
- rxjs-5-to-6-migrate-p src/tsconfig.приложение.json (после установки мы должны изменить его в нашем исходном коде в формате rxjs6)
- npm uninstall rxjs-compat (удалите это окончательно)
Полное руководство
-----------------С угловым-cli--------------------------
1. Обновление CLI глобально и локально
С помощью NPM (убедитесь, что у вас есть узел версии 8+ )
npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest npm i @angular/cli --save
С Помощью Пряжи
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-------------------------
таким образом, вы должны вручную обновить .
затем запустите
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.0npm install -g @angular/cli or npm install @angular/cli
ng update //update Angular Package core/common/complier... to 6.0.0
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:
ng update @angular/material //upgrade to 6.0.1
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#ngrxstoreRXJS MIGRATION
https://www.academind.com/learn/javascript/rxjs-6-what-changed/надеюсь это поможет вам :)