想要將項目從 Angular v5 升級到 Angular v6

Question

由於 Angular 6 在這里，我想將我的 angular 5 客戶端應用程序升級或移動到 angular 6，但我沒有得到任何教程或任何可以指導我完成的東西。

據我說，我只需要運行一個新的 Angular CLI，然后必須將我的舊源移動到新項目中。 我讀到 Angular 6 正在使用一個名為 Ivy 的新渲染器。 我是否必須根據 Ivy 更改我的項目？

Answer 1

從 Angular v6 升級到 Angular v7

Angular 7已發布官方 Angular 博客鏈接。 有關詳細信息，請訪問官方 Angular 更新指南https://update.angular.io 。 這些步驟適用於使用 Angular Material 的基本 angular 6 應用程序。

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

從 Angular v5 升級到 Angular v6

Angular 6已發布官方 Angular 博客鏈接。 我在下面提到了一般升級步驟，但在更新之前和之后，您需要更改代碼以使其在 v6 中可用，有關詳細信息，請訪問官方網站https://update.angular.io 。

升級步驟（主要來自使用 Angular Material 的基本 Angular 應用程序的官方Angular 更新指南）：

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 框架包更新到 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. 將 package.json 文件中的 angular 包版本更改為^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 Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.8.3 was found 相反”。 運行以下命令：

npm install typescript@2.7.2

Answer 2

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 更新 @angular/cli --migrate-only --from=1.7.0
4. ng更新@angular/core
5. npm 安裝 rxjs-compat
6. 服務

您可能需要更新 package.json 中的運行腳本，例如。 如果您使用“app”和“environment”等標志，它們已分別更新為“project”和“configuration”。

有關更詳細的指南，請參閱https://update.angular.io/ 。

Answer 3

只需使用官方升級指南，它會告訴您根據自己的特定需求需要做什么：

https://update.angular.io/

Answer 4

查看從 Angular 5 到 Angular 6 的逐步升級詳細信息。這些詳細信息提供了升級過程中遇到的問題以及如何解決這些問題的詳細信息。

• 將您的節點版本更新到 8 或更高版本，並通過 npm i -g @angular/cli@latest 全局安裝最新的 Angular cli。
• Angular 6 使用 angular.json 作為配置文件而不是 .anguar-cli.json。 tslint 也已更改。 檢查https://github.com/angular/angular-cli/wiki/angular-workspace以獲取最新的配置詳細信息。 您必須將任何現有配置移動到新的配置文件中。
• 為此，使用 ng new 'your-project' 和相同的默認值（例如您之前為項目使用的前綴、樣式等）使用最新的 cli 創建另一個虛擬項目。 使用 cli 創建新項目https://github.com/angular/angular-cli/wiki/new
• 使用https://update.angular.io/檢查您當前版本的 Angular → Angular 6 發生了什么變化。它提供了如何更改/修復它們的用法。
• 按照上述步驟復制/更新在步驟 2 中創建的 angular.json 文件。 在您的項目中執行 npm i 以獲取所有依賴項並執行 npm update
• 現在是最重要的部分。 RxJS 升級和解決沖突。 RxJS 在此版本中標准化了操作符和 Observable 創建者的導入。 執行 npm i -g rxjs-tslint 並在 tslint.json 中添加以下 lint 配置

{
  "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';

Observable 創建方法移至 rxjs

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

你都准備好了。 歡迎使用 Angular 6 :) 在此處查看我的博客文章，了解如何升級

Answer 5

我必須重新運行ng update @angular/cli才能將 angular-cli.json 更改為 angular.json

Answer 6

完整指南

-----------------使用angular-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

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文件。

然后運行

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

Answer 7

請運行以下評論以從 Angular 5 更新到 Angular 6

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.app.json（安裝后我們必須在我們的源代碼中將其更改為rxjs6格式）
6. npm uninstall rxjs-compat （最后刪除這個）

Answer 8

正如 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/的好文章

Answer 9

只需運行以下命令：

ng update

注意：這不會全局更新。

Answer 10

這就是我讓它工作的方式。

我的環境：

Angular CLI 全局：6.0.0，本地：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，則可選：

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 } from "rxjs/Observable"; import { of } from 'rxjs/observable/of';

至

import { Observable, of } from "rxjs";

Angular CLI 問題： https : //github.com/angular/angular-cli/issues/10621

Answer 11

將 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-c​​hanged/

希望這會幫助你:)

Answer 12

先試試這個

ng update @angular/cli @angular/core

如果有錯誤試試這個

ng update @angular/cli @angular/core --allow-dirty

看這里