如何将角度项目更新为最新版本

关键要点

• 在尝试更新之前，请确保已安装最新版本的 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。如果没有，您可以使用以下命令安装它：

<code class="language-bash">npm install -g @angular/cli@latest</code>

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

<code class="language-bash">npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest</code>

之后，您需要第 5 部分的代码副本。这在 GitHub 上可用。本系列中的每一篇文章在存储库中都有相应的标签，因此您可以在这款应用程序的不同状态之间来回切换。

我们在第 5 部分结束时使用的代码，以及我们在本文中开始使用的代码，标记为 part-5。我们结束本文时使用的代码标记为 part-6。

您可以将标签视为特定提交 ID 的别名。您可以使用 git checkout 在它们之间切换。您可以在此处阅读更多相关信息。

因此，要启动并运行（安装最新版本的 Angular CLI），我们将执行以下操作：

<code class="language-bash">git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve</code>

然后访问 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. 修复错误且代码保持向后兼容时，将增加修订版本：

   <code class="language-bash">npm install -g @angular/cli@latest</code>

3. 添加功能且代码保持向后兼容时，将增加次版本并将修订版本重置为零：

   <code class="language-bash">npm uninstall -g @angular/cli angular-cli
   npm cache clean
   npm install -g @angular/cli@latest</code>

4. 实现导致代码变得向后不兼容的更改（也称为重大更改）时，将增加主版本并将次版本和修订版本重置为零：

   <code class="language-bash">git clone git@github.com:sitepoint-editors/angular-todo-app.git
   cd angular-todo-app
   git checkout part-5
   npm install
   ng serve</code>

如果您不熟悉语义版本控制，请务必查看此简单的语义版本控制指南。

Angular 团队将语义版本控制与基于时间的发布周期相结合，旨在：

• 每周发布一个新的修订版本
• 每月发布一个新的次版本
• 每 6 个月发布一个新的主版本

发布计划并非一成不变，因为可能会有假期或特殊活动，但它是我们可以预期即将发布的版本的良好指标。

您可以关注官方 Angular 博客和官方变更日志，随时了解最新的发展动态。

语义版本的一个巨大好处是，我们可以安全地使用修订版本或次版本更新 Angular 应用程序，而无需担心会破坏我们的应用程序。

但是，如果出现新的主版本会怎样？

Angular 更新指南

我们已经了解到，主版本可能会带来重大更改。那么，如果我们更新它，我们如何知道我们现有的应用程序是否会中断呢？

一种方法是阅读官方变更日志并查看更改列表。

一种更容易的方法是使用 Angular 更新指南来更新 Angular。您可以选择当前的 Angular 版本和您希望升级到的版本，该应用程序会告诉您需要采取的确切步骤：

对于我们的 Angular Todo 应用程序，我们希望从 Angular 4.0 升级到 Angular 5.0。

让我们选择应用程序复杂度级别高级，以便我们看到我们需要采取的所有可能的措施：

我们获得了需要采取的所有步骤的完整概述，以更新我们的应用程序。

太棒了！

更新前

更新前 列表包含 12 个项目。没有一个项目适用于我们的 Angular Todo 应用程序，因此我们可以安全地继续下一步。

更新期间

在更新期间列表中，只有最后一项适用于我们的应用程序。我们需要更新我们的依赖项，因此让我们在项目的根目录中运行建议的命令：

<code class="language-bash">npm install -g @angular/cli@latest</code>

因为我们在启动并运行部分中将 Angular CLI 更新到最新版本，所以我们也更新了我们的本地版本：

<code class="language-bash">npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest</code>

为了验证我们的应用程序是否正确运行，我们运行：

<code class="language-bash">git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve</code>

如果 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>

使用：

<code class="language-bash">$ 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
</code>

我们将 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 };

如果我们运行：

<code class="language-bash">npm install -g @angular/cli@latest</code>

并将浏览器导航到 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></r></t></t>…

您从一个位置（在 rxjs/operators（复数！）下）提取任何需要的操作符。还建议直接提取您需要的 Observable 创建方法，如下所示，使用范围：

<code class="language-bash">npm uninstall -g @angular/cli angular-cli
npm cache clean
npm install -g @angular/cli@latest</code>

尽管这听起来很复杂，但它基本上意味着我们以前使用链式方法的地方：

<code class="language-bash">git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-5
npm install
ng serve</code>

我们现在应该从 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中文网其他相关文章！