Angular 身份验证：升级到 Angular 18 🚀

Angular 身份验证

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

^{封面照片由Gareth Davies拍摄，来自Unsplash。}

一个演示用户身份验证流程最佳实践的 Angular 应用程序。

作者：@nikosanif

挑战🤔

三年前，我创建了一个名为Angular Authentication 的开源项目，用于演示 Angular 应用中的身份验证和授权。该项目基于 Angular 13 构建，包含用户身份验证和授权流程、受保护路由等功能。然而，随着 Angular 的发展，新版本不断发布，带来了性能提升、新功能和增强的安全性。为了保持项目的更新并利用最新的技术进步，我决定将其从 Angular 13 升级到 Angular 18。

升级 Angular 项目可能看起来令人望而生畏，尤其是在跨越多个主要版本的情况下。然而，Angular CLI 的强大功能ng update、性能提升、新功能以及安全性增强带来的好处，都足以弥补升级过程中的付出。在本文中，我将详细介绍如何将一个开源的 Angular 身份验证项目从 Angular 13 升级到 Angular 18。我们将涵盖依赖项更新、新 Angular 功能的采用以及 UI 组件的迁移。

TL;DR 🎯

• ✅ Angular 版本： 13 ➡️ 18
• ✅依赖项：将依赖项更新到最新版本。
• ✅ UI 迁移：尝试新的 Angular Material 设计组件（Material 3）。
• ✅发布管理：迁移到release-it版本控制和变更日志生成系统。
• ✅功能：采用 Angular 18 的新特性。
• ✅内置控制流：迁移到新的控制流语法。
• ✅独立组件：利用独立组件实现模块化。
• ✅路由守卫：将路由守卫重构为函数。
• ✅打印表单：使用打印表单可以提高打印安全性。
• 🕣使用 Signal API：尝试迁移到新的信号输入、基于信号的查询和新的输出语法。
• 🕣无区域变更检测：移除 zone.js 依赖项。
• 🕣可延迟视图：使用全新的可延迟视图功能。

逐步升级流程🚀

初始设置

[步骤 1] ⏩访问 Angular 更新指南：

• Angular更新指南提供了每个版本升级的详细步骤和信息。

[步骤 2] ⏩安装 Node 16 的依赖项：

npm install

[步骤 3] ⏩切换到 Node 18：我使用 Node 版本管理器 ( nvm ) 切换到 Node 18。

nvm use 18

Angular 增量更新

【步骤 4】 ⏩更新至 Angular 14：

ng update @angular/core@14 @angular/cli@14 --force

• 该--force标志会绕过版本兼容性检查。我们稍后会手动修复相关问题。

[步骤 5] ⏩顺序更新：

ng update @angular/core@15 @angular/cli@15 --force
ng update @angular/core@16 @angular/cli@16 --force
ng update @angular/core@17 @angular/cli@17 --force

[步骤 6] ⏩切换到节点 20：

nvm use 20

[步骤 7] ⏩更新至最新 Angular 版本 (v18)：

ng update @angular/core@latest @angular/cli@latest --force

调整与比较

【步骤 8】 ⏩创建一个新的 Angular 项目以进行比较：

• 使用最新版本创建一个新的 Angular 项目，以便比较配置并确定必要的调整。

ng new new-angular-project

[步骤 9] ⏩更新开发依赖项：

• 请将所有软件包更新到最新版本。
• 修复所有 eslint 问题。
• 测试所有命令package.json以确保兼容性。

Angular 最终更新

[步骤 10] ⏩强制使用 Node 版本 20：

• 更新该engines字段package.json以确保使用 Node 20.x。

"engines": {
  "node": "20.x"
}

[步骤 11] ⏩隔离特征和组件：

• 将各项功能隔离出来，并逐一迁移到 Angular 18。这种方法有助于发现问题并逐步修复。- 使用 Angular CLI 原理图生成包含最新 Angular 18 功能的新组件和服务。例如：

ng g @angular/core:control-flow # Migration to the new control flow

UI 和依赖项迁移

[步骤 12] ⏩将 UI 从 TaigaUI 迁移到 Angular MDC：

• 过渡到 Angular Material Design Components (MDC)。虽然 TaigaUI 是一个很棒的库，但新的 Material 3 组件现在已经稳定，所以我决定尝试一下。
• 将 TaigaUI 组件替换为 MDC 组件。

[步骤 13] ⏩移除已弃用的依赖项：

• 移除angular-in-memory-web-api并更新项目，以使用替代数据模拟解决方案或真正的后端服务。
• 实现自定义HTTP拦截器来处理API请求和响应。

[步骤 14] ⏩采用独立组件：

• 利用 Angular 的独立组件功能简化模块管理并提高代码模块化程度。

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-standalone',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './standalone.component.html',
  styleUrls: ['./standalone.component.css'],
})
export class StandaloneComponent {}

[步骤 15] ⏩使用新的内置控制流：

• 使用 Angular 18 中引入的全新内置控制流功能，简化异步操作并提高代码可读性。更具体地说，使用@if关键字代替 `and` ，使用 ` ngIfand`@for代替 ` ngFor.`。

[步骤 16] ⏩将守卫代码重构为函数：

• 将路由守卫重构为函数，以简化代码并提高可维护性。

export const canActivate = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot
) => {
  // Guard logic
};

[步骤 17] ⏩打印表单：

• 使用文本输入方式可以提高输入安全性并减少表单处理中的错误。

loginForm = new FormGroup({
  username: new FormControl(/* ... */),
  password: new FormControl(/* ... */),
});

其他改进

[步骤 18] ⏩将版本迁移到release-it：

• 由于该项目standard-version已弃用，我决定迁移到其他release-it系统进行版本控制和变更日志生成。
• 使用 简化发布流程release-it，它可自动生成版本控制和变更日志。

npm install --save-dev release-it

• release-it使用文件进行配置.release-it.json：

{

  "git": {

    "commitMessage": "chore(release): ${version}",

    "requireBranch": ["main"]

  }

  // ... other configurations

}

未来改进方向💡

• 采用更多新的 Angular 特性：探索 Angular 18 中引入的新特性和改进，例如增强的性能、更新的 API 和改进的工具。
• 使用独立组件：移除组件中的所有@NgModule声明，并使用独立组件以实现更好的模块化。
• 无区域变更检测：考虑迁移到无区域的 Angular 以提高性能并减少开销。
• 使用 Signal API：探索 Angular 18 中引入的全新 Signal API，以简化异步操作。
• 可延迟视图：实现可延迟视图以提高渲染性能和用户体验。

结论✅

将 Angular 项目从版本 13 升级到版本 18 涉及多个步骤，包括更新依赖项、修复问题和采用新功能。遵循这种结构化的方法，您可以确保平稳升级并充分利用 Angular 的最新进展。

如果您觉得这篇文章对您有帮助，请点赞❤️🦄🔖，帮助更多人看到它。🙏

如有任何疑问，请随时联系我——请在下方留言或通过 X @nikosanif或LinkedIn私信我。