如何將角度項目更新為最新版本

關鍵要點

• 在嘗試更新之前，請確保已安裝最新版本的 Angular CLI，方法是運行 npm install -g @angular/cli@latest。
• 使用 Angular 更新指南確定從當前 Angular 版本更新到所需版本的具體步驟，並根據應用程序的複雜程度進行調整。
• 將 HttpModule 替換為 HttpClientModule 以利用新的 HttpClient 的自動 JSON 處理和對 HTTP 攔截器的支持。
• 通過從 rxjs/operators 導入它們並在 .pipe() 方法中應用它們來過渡到使用 RxJS 可管道操作符，從而增強 tree-shaking 並減小包大小。
• 更新後，通過運行 ng serve 並檢查 app-root 元素中的 ng-version 屬性來驗證應用程序的功能和 Angular 版本。
• 關注官方 Angular 博客和變更日誌，了解新版本和更新信息，以便使用最新的改進和功能維護您的應用程序。

本文將介紹如何將 Angular 項目更新到最新版本。

本文是 SitePoint Angular 2 教程的第 6 部分，該教程介紹如何使用 Angular CLI 創建 CRUD 應用程序。

1. 第 0 部分 — 最終的 Angular CLI 參考指南
2. 第 1 部分 — 啟動並運行我們的 Todo 應用程序的第一個版本
3. 第 2 部分 — 創建單獨的組件以顯示 Todo 列表和單個 Todo
4. 第 3 部分 — 更新 Todo 服務以與 REST API 通信
5. 第 4 部分 — 使用 Angular 路由器解析數據
6. 第 5 部分 — 添加身份驗證以保護私有內容
7. 第 6 部分 — 如何將 Angular 項目更新到最新版本

在第 1 部分中，我們學習瞭如何啟動並運行我們的 Todo 應用程序並將其部署到 GitHub Pages。這工作得很好，但不幸的是，整個應用程序都塞進了一個組件中。

在第 2 部分中，我們檢查了一個更模塊化的組件架構，並學習瞭如何將這個單個組件分解成一個結構化的較小組件樹，這些組件更容易理解、重用和維護。

在第 3 部分中，我們更新了應用程序以使用 RxJS 和 Angular 的 HTTP 服務與 REST API 後端通信。

在第 4 部分中，我們介紹了 Angular Router，並學習了路由器如何在瀏覽器 URL 更改時更新我們的應用程序，以及我們如何使用路由器從後端 API 解析數據。

在第 5 部分中，我們在應用程序中添加了身份驗證，並學習瞭如何保護應用程序的各個部分免受未經授權的訪問。

別擔心！您無需遵循本教程的第 1、2、3、4 或 5 部分即可理解第 6 部分。您可以簡單地獲取我們代碼庫的副本，查看第 5 部分的代碼，並將其用作起點。這將在下面更詳細地解釋。

啟動並運行

要開始更新 Angular 的目標，請確保已安裝最新版本的 Angular CLI。如果沒有，您可以使用以下命令安裝它：

npm install -g @angular/cli@latest

如果需要刪除先前版本的 Angular CLI，您可以：

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

之後，您需要第 5 部分的代碼副本。這在 GitHub 上可用。本系列中的每一篇文章在存儲庫中都有相應的標籤，因此您可以在這款應用程序的不同狀態之間來回切換。

我們在第 5 部分結束時使用的代碼，以及我們在本文中開始使用的代碼，標記為 part-5。我們結束本文時使用的代碼標記為 part-6。

您可以將標籤視為特定提交 ID 的別名。您可以使用 git checkout 在它們之間切換。您可以在此處閱讀更多相關信息。

因此，要啟動並運行（安裝最新版本的 Angular CLI），我們將執行以下操作：

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

然後訪問 https://www.php.cn/link/d111f133fa0ea545d48291f9b0a72b2d Todo 應用程序。

更新 Angular：我們的攻擊計劃

在本文中，當我們更新 Angular 時，我們將學習以下內容：

• Angular 版本的工作原理
• 在哪裡可以找到有關如何更新 Angular 的說明
• 如何將我們的代碼從 Angular 4 更新到 Angular 5（撰寫本文時，Angular 5 是最新版本）。

在本文結束時，您將了解：

• 特定 Angular 版本的根本含義
• 在哪裡可以找到有關如何更新 Angular 應用程序的確切說明
• 如何確定 Angular 5（如果有）需要哪些代碼更改。

讓我們開始吧！

Angular 版本的含義

為了支持蓬勃發展的生態系統，Angular 需要既穩定又具有發展性。

一方面，Angular 旨在為關鍵任務應用程序提供最大的穩定性。另一方面，它需要不斷適應和發展以支持 Web 技術的最新變化。

因此，Angular 團隊決定使用基於時間的發布週期和語義版本控制。

基於時間的發布週期意味著我們可以預期每隔幾週或幾個月就會出現新的 Angular 版本（Angular 5、Angular 6、Angular 7 等）。

語義版本控制意味著 Angular 的版本號允許我們預測如果我們升級到它是否會破壞我們的應用程序。

本質上，語義版本看起來像這樣：主版本.次版本.修訂版本。

因此，版本 v1.3.8 的主版本值為 1，次版本值為 3，修訂版本值為 1。

發布新版本時，新版本隱式地指示對代碼所做的更改類型。

增加語義版本時，將應用以下規則：

1. 每次遞增都會以 1 的遞增量進行數值遞增。

2. 修復錯誤且代碼保持向後兼容時，將增加修訂版本：

   npm install -g @angular/cli@latest

3. 添加功能且代碼保持向後兼容時，將增加次版本並將修訂版本重置為零：

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

4. 實現導致代碼變得向後不兼容的更改（也稱為重大更改）時，將增加主版本並將次版本和修訂版本重置為零：

   git clone git@github.com:sitepoint-editors/angular-todo-app.git
   cd angular-todo-app
   git checkout part-5
   npm install
   ng serve

如果您不熟悉語義版本控制，請務必查看此簡單的語義版本控制指南。

Angular 團隊將語義版本控制與基於時間的發布週期相結合，旨在：

• 每週發布一個新的修訂版本
• 每月發布一個新的次版本
• 每 6 個月發布一個新的主版本

發布計劃並非一成不變，因為可能會有假期或特殊活動，但它是我們可以預期即將發布的版本的良好指標。

您可以關注官方 Angular 博客和官方變更日誌，隨時了解最新的發展動態。

語義版本的一個巨大好處是，我們可以安全地使用修訂版本或次版本更新 Angular 應用程序，而無需擔心會破壞我們的應用程序。

但是，如果出現新的主版本會怎樣？

Angular 更新指南

我們已經了解到，主版本可能會帶來重大更改。那麼，如果我們更新它，我們如何知道我們現有的應用程序是否會中斷呢？

一種方法是閱讀官方變更日誌並查看更改列表。

一種更容易的方法是使用 Angular 更新指南來更新 Angular。您可以選擇當前的 Angular 版本和您希望升級到的版本，該應用程序會告訴您需要採取的確切步驟：

對於我們的 Angular Todo 應用程序，我們希望從 Angular 4.0 升級到 Angular 5.0。

讓我們選擇應用程序複雜度級別高級，以便我們看到我們需要採取的所有可能的措施：

我們獲得了需要採取的所有步驟的完整概述，以更新我們的應用程序。

太棒了！

更新前

更新前 列表包含 12 個項目。沒有一個項目適用於我們的 Angular Todo 應用程序，因此我們可以安全地繼續下一步。

更新期間

在更新期間列表中，只有最後一項適用於我們的應用程序。我們需要更新我們的依賴項，因此讓我們在項目的根目錄中運行建議的命令：

npm install -g @angular/cli@latest

因為我們在啟動並運行部分中將 Angular CLI 更新到最新版本，所以我們也更新了我們的本地版本：

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

為了驗證我們的應用程序是否正確運行，我們運行：

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

如果 ng serve 無法啟動，請嘗試刪除您的 node_modules 目錄和 package-lock.json 文件，然後運行 npm install 以重新創建乾淨的 node_modules 目錄和 package-lock.json 文件。

更新後

更新後 列表包含四個項目，其中第一個和最後一個適用於我們的應用程序：

• 從 HttpModule 切換到 HttpClientModule
• 從 rxjs/operators 導入 RxJS 操作符並使用 RxJS 管道操作符

讓我們逐一解決它們。

從 HttpModule 切換到 HttpClientModule

Angular 更新指南告訴我們應該從 HttpModule 切換到 HttpClientModule。

如果我們檢查 Angular 版本 5.0.0 的發行說明，我們會了解到 Angular 4.3 及更高版本附帶一個新的 HttpClient，它會自動處理 JSON 響應並支持 HTTP 攔截器。

它指出，要更新我們的代碼，我們必須將 HttpModule 替換為 HttpClientModule，注入 HttpClient 服務並刪除所有 map(res => res.json()) 調用，因為新的 HttpClient 會自動解析 JSON 響應。

讓我們打開 src/app/app.module.ts 並替換 HttpModule：

<code> v0.0.3 // 修复错误前
 v0.0.4 // 修复错误后</code>

使用 HttpClientModule：

<code> v0.2.4 // 添加新功能前
 v0.3.0 // 添加新功能后</code>

接下來，我們必須使用 HttpClient 服務而不是 Http 服務，並刪除代碼中的所有 map(res => res.json()) 調用，因為新的 HttpClient 會自動為我們解析響應。

在第 3 部分中，我們將所有與 HTTP 相關的代碼集中在一個名為 ApiService 的服務中，我們現在正在享受這種方法的好處。

因此，我們只需要更新一個文件，所以讓我們打開 src/app/api.service.ts 並替換：

<code> v7.3.5 // 实现向后不兼容的更改前
 v8.0.0 // 实现向后不兼容的更改后</code>

使用：

$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@'^5.0.0' typescript@2.4.2 rxjs@'^5.5.2'

$ npm install typescript@2.4.2 --save-exact

我們將 HttpModule 中的舊類替換為 HttpClientModule 中的新類。

更具體地說，我們替換：

• import { Http, Headers, RequestOptions, Response } from '@angular/http'; 為 import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
• 第 81 行：Response 為 HttpErrorResponse
• 第 90 行：Headers 為 HttpHeaders
• 第 93 行：return new RequestOptions({ headers }); 為 return { headers };

如果我們運行：

npm install -g @angular/cli@latest

並將瀏覽器導航到 https://www.php.cn/link/03e03424a898e574153a10db9a4db79a HttpClientModule。

是時候解決項目 2 了：從 rxjs/operators 導入 RxJS 操作符並使用 RxJS 管道操作符。

使用 RxJS 管道操作符

Angular 5 已更新為使用 RxJS 5.5.2 或更高版本。

從 5.5 版本開始，RxJS 附帶可管道操作符。官方文檔說：

可管道操作符是任何返回具有以下簽名的函數的函數：<T, R>(source: Observable<T>) => Observable<R>…

您從一個位置（在 rxjs/operators（複數！）下）提取任何需要的操作符。還建議直接提取您需要的 Observable 創建方法，如下所示，使用範圍：

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

儘管這聽起來很複雜，但它基本上意味著我們以前使用鍊式方法的地方：

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve

我們現在應該從 rxjs/operators 導入操作符並使用 .pipe() 方法來應用它們：

<code> v0.0.3 // 修复错误前
 v0.0.4 // 修复错误后</code>

可管道操作符的主要好處是：

1. 它們是可 tree-shaking 的，允許工具通過刪除未使用的代碼來減小應用程序包的大小。
2. 它們是普通函數，因此我們可以輕鬆創建自己的自定義可管道操作符。

.pipe() 方法將對我們代碼的影響降至最低。

我們的應用程序中有兩個項目需要重構：我們的 ApiService 和 TodosComponent。

首先，讓我們打開 src/app/api.service.ts 來更新我們的 ApiService：

<code> v0.2.4 // 添加新功能前
 v0.3.0 // 添加新功能后</code>

我們從 rxjs/operators 導入 map 可管道操作符，並將所有 map(fn) 的出現更新為 pipe(map(fn))。

接下來，讓我們打開 src/app/todos/todos.component.ts 以將相同的更改應用於 TodosComponent：

<code> v7.3.5 // 实现向后不兼容的更改前
 v8.0.0 // 实现向后不兼容的更改后</code>

同樣，我們從 rxjs/operators 導入 map 可管道操作符，並將 map(fn) 更新為 pipe(map(fn))。

就是這樣！我們應用程序中的鍊式操作符已被可管道操作符替換，就像 Angular 更新指南指示我們做的那樣。

如果我們導航到 https://www.php.cn/link/668c7d9d4728fc9eebbe7a8202c95c26。

為了驗證我們確實正在運行 Angular 5，我們可以打開元素檢查器：

Angular 將 ng-version 屬性添加到 app-root，其值為它正在運行的版本。我們看到 ng-version="5.2.9"，表明我們正在運行 Angular 5.2.9。

任務完成！我們的應用程序已成功升級到 Angular 5.2.9。

我們涵蓋了很多內容，所以讓我們回顧一下我們學到的東西。

總結

在第一篇文章中，我們學習瞭如何：

• 使用 Angular CLI 初始化我們的 Todo 應用程序
• 創建一個 Todo 類來表示單個 todo
• 創建一個 TodoDataService 服務來創建、更新和刪除 todo
• 使用 AppComponent 組件顯示用戶界面
• 將我們的應用程序部署到 GitHub Pages。

在第二篇文章中，我們重構了 AppComponent 以將其大部分工作委派給：

• 一個 TodoListComponent 來顯示 todo 列表
• 一個 TodoListItemComponent 來顯示單個 todo
• 一個 TodoListHeaderComponent 來創建一個新的 todo
• 一個 TodoListFooterComponent 來顯示還剩下多少 todo。

在第三篇文章中，我們學習瞭如何：

• 創建一個模擬 REST API 後端
• 將 API URL 存儲為環境變量
• 創建一個 ApiService 來與 REST API 通信
• 更新 TodoDataService 以使用新的 ApiService
• 更新 AppComponent 以處理異步 API 調用
• 創建一個 ApiMockService 以在運行單元測試時避免實際的 HTTP 調用。

在第四篇文章中，我們學習了：

• 為什麼應用程序可能需要路由
• JavaScript 路由器是什麼
• Angular Router 是什麼，它是如何工作的以及它能為您做什麼
• 如何設置 Angular 路由器和配置應用程序的路由
• 如何告訴 Angular 路由器在哪裡在 DOM 中放置組件
• 如何優雅地處理未知 URL
• 如何使用解析器讓 Angular 路由器解析數據。

在第五篇文章中，我們學習了：

• cookie 和令牌之間的區別
• 如何創建一個 AuthService 來實現身份驗證邏輯
• 如何創建一個 SessionService 來存儲會話數據
• 如何使用 Angular 反應式表單創建一個登錄表單
• 如何創建一個路由守衛來防止未經授權訪問應用程序的部分
• 如何在 HTTP 請求中將用戶的令牌作為授權標頭髮送到您的 API
• 為什麼您永遠不應該將用戶的令牌發送給第三方。

在這篇關於如何更新 Angular 的文章中，我們學習了：

• Angular 版本的工作原理
• 語義版本號的含義
• 語義版本控制如何保護我們免於盲目地將重大更改引入我們的應用程序
• Angular 更新指南如何幫助我們找到有關如何更新 Angular 的詳細說明
• 如何將 HttpModule 替換為 HttpClientModule
• 如何使用可管道操作符更新我們的 RxJS 代碼
• ng-version 屬性如何讓我們驗證我們正在運行哪個版本的 Angular。

在即將發布的版本中，Angular CLI 將引入 ng update 命令來幫助更新 Angular 應用程序。一旦有更多詳細信息可用，我們將提供一篇後續文章，介紹這個新命令如何使我們的生活更輕鬆。

在此之前，您可以將本文用作有關如何將 Angular 應用程序更新到最新版本的指南。

本文中的所有代碼都可以在 GitHub 上找到。

祝您一切順利！

關於更新 Angular 項目的常見問題解答 (FAQ)

更新我的 Angular 項目的先決條件是什麼？

在開始更新 Angular 項目之前，請確保已安裝最新版本的 Node.js 和 npm。您可以通過在終端中運行 node -v 和 npm -v 來檢查您的版本。如果您沒有安裝它們，或者您的版本已過期，請訪問官方 Node.js 網站下載並安裝它們。另外，請確保您的 Angular CLI 為最新版本。您可以通過在終端中運行 npm install -g @angular/cli 來更新它。

如何將我的 Angular 項目更新到特定版本？

要將您的 Angular 項目更新到特定版本，您可以使用 ng update 命令，後跟包名稱和版本號。例如，如果您想更新到 Angular 9，您將在終端中運行 ng update @angular/core@9 @angular/cli@9。請記住，在運行更新命令之前提交對項目的任何更改，以免丟失任何工作。

如果在更新過程中遇到錯誤，我該怎麼辦？

如果您在更新過程中遇到錯誤，首先嘗試理解錯誤消息。它通常包含有關哪裡出錯的線索。如果您無法解決問題，請考慮尋求 Angular 社區的幫助。 StackOverflow 等網站上有許多經驗豐富的開發人員可以幫助您排除問題。請記住，提供有關您的問題的盡可能多的詳細信息，包括錯誤消息和您在遇到錯誤之前採取的步驟。

如何將我的 Angular 項目降級到以前的版本？

將 Angular 項目降級到以前的版本可能有點棘手，因為它通常不僅僅是更改 package.json 文件中的版本號。您可能還需要降級其他依賴項並調整您的代碼以使其與舊版本兼容。如果您需要降級，請考慮尋求 Angular 社區的幫助或聘請專業開發人員以確保該過程順利進行。

如何跟踪每次 Angular 更新中的更改？

Angular 團隊在其官方網站上為每次更新提供詳細的發行說明。這些說明包括更新中引入的更改、錯誤修復和新功能的摘要。您還可以使用帶有 --dry-run 選項的 ng update 命令來查看將在您的項目中進行哪些更改，而無需實際應用它們。

更新後如何測試我的 Angular 項目？

更新 Angular 項目後，務必徹底測試它，以確保一切仍然按預期工作。您可以使用 Angular CLI 的內置測試工具（例如 Karma 和 Protractor）在您的項目上運行單元測試和端到端測試。如果您遇到任何問題，請參考錯誤消息和 Angular 文檔，了解如何解決這些問題。

我應該多久更新一次 Angular 項目？

更新頻率取決於項目的具體要求以及您使用的 Angular 版本的穩定性。但是，通常最好使用最新的穩定版本來保持更新，以利用最新的功能和改進。請記住，在每次更新後徹底測試您的項目，以確保一切仍然按預期工作。

更新 Angular 項目時可以跳過版本嗎？

是的，更新 Angular 項目時可以跳過版本。但是，建議一次更新一個主版本，以避免潛在的問題。如果您要從非常舊的版本更新，請考慮尋求 Angular 社區的幫助或聘請專業開發人員以確保該過程順利進行。

更新 Angular 項目的好處是什麼？

更新 Angular 項目可以讓您受益於最新的功能、改進和錯誤修復。它還有助於確保您的項目安全並與其他現代技術兼容。但是，請記住在每次更新後徹底測試您的項目，以確保一切仍然按預期工作。

如何自動化 Angular 項目的更新過程？

您可以使用 Jenkins 或 Travis CI 等持續集成 (CI) 工具來自動化 Angular 項目的更新過程。每當您將更改推送到存儲庫時，這些工具都可以自動運行 ng update 命令和您的測試。這可以幫助確保您的項目始終是最新的並且正常工作。

以上是如何將角度項目更新為最新版本的詳細內容。更多資訊請關注PHP中文網其他相關文章！