Оскільки Angular 6 є тут, я хочу оновити або перемістити свою програму клієнта для кутових 5 до кутової 6, але я не отримую жодного підручника чи нічого, що може мене провести.

На мою думку, мені просто потрібно запустити новий Angular CLI, а потім перенести своє старе джерело на новий проект. Я читаю, що Angular 6 використовує новий рендер під назвою Ivy. Чи доведеться міняти свій проект відповідно до Ivy?

Оновлення від Angular v6 до Angular v7

Версія 7 Angular була випущена Офіційним посиланням на блог Angular . Щоб отримати детальну інформацію, відвідайте офіційний посібник з оновлення кутів https://update.angular.io . Ці кроки будуть працювати для основних кутових 6 додатків із використанням кутового матеріалу.

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

Оновлення від Angular v5 до Angular v6

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

Етапи оновлення (в основному взяті з офіційного Посібника з оновлення для основного додатка 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. Оновіть кутовий матеріал до останньої версії, виконавши наступну:

   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+ (для цього потрібна кутова версія 6)

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

   npm uninstall -g @angular/cli
   npm cache verify
   

   якщо версія npm <5, тоді використовуйте npm cache clean

   npm install -g @angular/cli@next
   

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. Наступне оновлення локального пакету 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 змінено з кутової версії 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 typescript@2.7.2

Кутовий 6 щойно вийшов.

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

Ось, що працювало на один з моїх менших проектів

1. npm встановити -g @ angular / cli
2. npm встановити @ angular / cli
3. оновлення @ angular / cli - лише для міграції - від = 1.7.0
4. ng update @ angular / core
5. npm встановити rxjs-compat
6. ng служити

Можливо, вам доведеться оновити свої сценарії запуску в package.json Наприклад, наприклад. якщо ви використовуєте такі прапори, як "app" та "Environment", вони були оновлені відповідно до "project" та "configure".

Детальнішу інструкцію див. У https://update.angular.io/ .

Просто скористайтеся офіційним посібником з оновлення, який розповість, що вам потрібно зробити для власних потреб:

https://update.angular.io/

Перевірте покрокові деталі оновлення з кутового 5 до кутового 6. Тут ви знайдете детальну інформацію про проблеми, з якими ви стикаєтесь під час оновлення та способи їх вирішення.

• Оновіть версію вузла до 8 або вище та встановіть кутовий кліт останнім у всьому світі за допомогою npm i -g @ angular / cli @ latest.
• Angular 6 використовує angular.json як файл конфігурації замість .anguar-cli.json. Також змінено tslint. Перевірте https://github.com/angular/angular-cli/wiki/angular-workspace для отримання останніх відомостей про конфігурацію. Вам потрібно перенести будь-яку існуючу конфігурацію в новий файл конфігурації.
• Для цього створіть ще один фіктивний проект із останнім кліпом, використовуючи новий 'ваш-проект' та ті самі за замовчуванням, як префікс, стиль тощо, які ви використовували раніше для свого проекту. Створіть новий проект за допомогою https://github.com/angular/angular-cli/wiki/new
• Використовуйте https://update.angular.io/, щоб перевірити, що було змінено з вашої поточної версії Angular → Angular 6. У ньому передбачено використання способів їх зміни / виправлення.
• Виконайте наведені вище дії та скопіюйте / оновіть файл angular.json, створений у step2. Зробіть npm я у своєму проекті, щоб отримати всі залежності та зробіть 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
  }
}

• Тепер запустіть nint lint --fix. Це виправляє декілька елементів, але більшість решти питань буде висвітлено, і вам доведеться виправити це вручну.

Зміна імені операторів:

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

Усі оператори перейшли до rxjs / операторів

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

Спостерігаючі способи створення переміщуються до rxjs

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

Ви все налаштовані. Ласкаво просимо до Angular 6 :) Перегляньте тут мій пост у блозі про те, як оновити

Мені довелося повторно запустити оновлення @ angular / cli для того, щоб angular-cli.json було змінено на angular.json

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

1. оновлення @ angular / cli
2. ng update @ angular / core
3. npm встановити 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 видаліть rxjs-compat (видаліть остаточно)

Повне керівництво

----------------- З кутовим-клипом --------------------------

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 тепер залежить від 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/

------------------- Без кутового кліп -------------------------

Тому вам доведеться вручну оновити package.jsonфайл.

Потім бігайте

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

Як зазначив Vinay Kumar, він не буде оновлювати глобально встановлений 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/

просто запустіть таку команду:

ng update

зауважте: глобально це не оновиться.

Ось як я змушую це працювати.

Моє середовище:

Кутовий 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-переклад 9.1.1, ng-bootstrap / ng-bootstrap 1.1.1:

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

4. 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/isissue/10621

Існує кілька кроків для оновлення 2/4/5 до кутового 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

Зберігати MIGRATION
https://github.com/ngrx/platform/blob/master/MIGRATION.md#ngrxstore

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

Сподіваючись, що це допоможе вам :)