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

114

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

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

Абхишек Чокра
источник
7
update.angular.io
lealceldeiro

Ответы:

272

Обновление с Angular v6 до Angular v7

Вышла седьмая версия Angular. Официальная ссылка на блог Angular . Посетите официальное руководство по обновлению angular https://update.angular.io для получения подробной информации. Эти шаги будут работать для базовых приложений angular 6, использующих Angular Material.

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

Обновление с Angular v5 до Angular v6

Вышла шестая версия Angular. Официальная ссылка на блог Angular . Я упомянул общие шаги обновления ниже, но до и после обновления вам необходимо внести изменения в свой код, чтобы он работал в версии 6, для получения подробной информации посетите официальный сайт https://update.angular.io .

Шаги по обновлению (в основном взяты из официального руководства по обновлению Angular для базового приложения Angular, использующего Angular Material):

  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. Обновите все пакеты Angular framework до v6 и правильную версию RxJS и TypeScript, выполнив следующее:

    ng update @angular/core
    
  4. Обновите Angular Material до последней версии, выполнив следующее:

    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.app.json
    

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

    npm uninstall rxjs-compat
    
  6. Готово пробежать ng serveпроверять.
    Если вы получаете ошибки в сборке, обратитесь к https://update.angular.io для получения подробной информации.

Обновление с Angular v5 до Angular 6.0.0-rc.5

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

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

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

    npm uninstall -g @angular/cli
    npm cache verify
    

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

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

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

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

npm install typescript@2.7.2
Ашиш Джайн
источник
update.angular.io в настоящее время не работает в Edge. Он загружается нормально, но как только вы начинаете его немного использовать, возникает какая-то проблема, из-за которой страница не отвечает, а браузер спрашивает, хотите ли вы восстановить страницу.
Девон Холкомб
3
Шаг 5 Я получаю bash: rxjs-5-to-6-migrate: command not found. Есть предположения?
Кайл Кшески
когда я запускаю ng update @angular/coreсвою папку проекта ionic, я получаю сообщение об ошибкеInvalid range: "*"
smk
1
После всех вышеперечисленных шагов у меня возникла эта глупая проблема: не удалось найти модуль "@angular-devkit/build-angular"из ... Так что это исправлено npm install @angular-devkit/build-angular --save-dev. Кроме того , я должен был обновить библиотеки, которые использовали предыдущую rxjs-Compat, как ng update @ngx-translate/core, ng update @ng-bootstrap/ng-bootstrap, потому что некоторые из них не был должным образом обновлен.
Арсен Хачатурян
2
если вы получаете сообщение «Ваша глобальная версия Angular CLI (6.0.8) выше, чем ваша локальная версия (1.6.8). Используется локальная версия Angular CLI». используйте npm install @ angular / cli @ latest
Накрес
19

Angular 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 установить rxjs-compat
  6. нг подавать

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

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

Арджун Шанкар
источник
После шага 2 мне пришлось преобразовать следующие файлы .json (tsconfig, angular-cli.json, tslint) в UTF8 без спецификации. На этом этапе я получил ошибку недопустимого символа JSON.
Бенджамин
16

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

Обновить угловой

https://update.angular.io/

Валентин Деспа
источник
1
это действительно должен быть принятый ответ, поскольку он отвечает на все другие вопросы по обновлению
theTechRebel
8

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

  • Обновите версию узла до 8 или выше и установите глобальную версию Angular cli latest с помощью npm i -g @ angular / cli @ latest.
  • Angular 6 использует angular.json в качестве файла конфигурации вместо .anguar-cli.json. Также был изменен цлинт. Проверьте 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/, чтобы проверить, что было изменено в вашей текущей версии Angular → Angular 6. В нем описано, как их изменять / исправлять.
  • Следуйте инструкциям выше и скопируйте / обновите файл angular.json, созданный на шаге 2. Выполните npm i в своем проекте, чтобы получить все зависимости и выполнить обновление npm
  • А теперь самое главное. Обновление RxJS и разрешение конфликтов. В этом выпуске RxJS стандартизировал импорт операторов и создателей Observable. Сделайте 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 :) Проверьте мой блог здесь о том, как обновить

Удай Вуннам
источник
4

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

Крис Бонев
источник
2

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

  1. нг обновление @ 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 (удалите это наконец)
user2716958
источник
2

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

----------------- С angular-cli --------------------------

1. Обновите интерфейс командной строки глобально и локально.

  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

Angular 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/


------------------- Без angular-cli -------------------------

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

package.json снимок экрана пакетов обновления

Тогда беги

 npm update
 npm install --save rxjs-compat
 npm i -g rxjs-tslint
 rxjs-5-to-6-migrate -p src/tsconfig.app.json
Bereket Gebredingle
источник
Я получаю bash: rxjs-5-to-6-migrate: command not foundпри попытке запустить команду rxjs-5-to-6-migrate. Есть предположения?
Кайл Кшески
1
@WilliamHampshire, вы запускали npm install -g rxjs-tslint
Джо
Да, не знаю, что это за @Joe
Кайл Кшески
может у вас нет последнего цлинта?
Джо
1
Вы знаете, как это сделать без использования angular cli? В своем проекте я все делаю вручную
Даниэль
1

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

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

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

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

  npm install --save rxjs-compat  

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

Максим Б.
источник
0

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

ng update

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

Винай Кумар
источник
0

Вот как я заставляю это работать.

Моя среда:

Angular CLI Global: 6.0.0, Local: 1.7.4, Angular: 5.2, Typescript 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

необязательно, если у вас есть angular-material 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";

Проблема с угловым интерфейсом командной строки: https://github.com/angular/angular-cli/issues/10621

Райан Хуанг
источник
0

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

npm uninstall --save-dev angular-cli
npm install --save-dev @angular/cli@latest
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
https://www.academind.com/learn/javascript/rxjs-6-what-changed/

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

Адитья Кумар
источник