我最喜欢的 Angular 2025 年配置

Angular ESLint

🚫💩 棉絮分阶段

Angular 项目设置

Angular 仍在快速发展。2025 年我们应该使用什么版本？尤其是在启动新项目时。

受 Reddit 讨论的启发，本指南分享了我对 2025 年 Angular 开发中最有效的工具、库和实践的个人看法（=有观点） 。

本文的视频版本可在 YouTube 上观看。

反应性：关注信号

Signals 代表了 Angular 响应式方法论中最重大的转变之一。虽然像 Signal Forms 这样的部分组件httpResource仍在开发中，并且effect仍处于开发者预览阶段，但我的建议很明确：全力投入 Signals 的开发。

为什么不应该等待 Signal Forms 呢httpResource？答案在于重写代码的成本。如果你现在跳过 Signal，你很可能会默认使用 RxJS 来实现响应式编程。但以后从 RxJS 过渡到 Signals 将需要进行更大规模的重写。你必须意识到，RxJS 的编程范式不同，很多方面都不同。

另一方面，通过采用 Signals，您可以确保您的应用程序与 Angular 的未来发展方向保持一致。对于尚未“信号化”的区域（例如，响应式表单或 HTTP 通信），您可以暂时不使用 Signal 的响应式机制，而是采用传统方式处理它们。例如，您可以使用 `setValue`effect来设置 `a` 的值FormGroup。

关键在于，从 Signals 入手意味着将来你只需要调整代码中未发出信号的部分。如果你现在跳过 Signals，以后将面临重构整个应用程序的艰巨任务。

也就是说，这并不意味着你应该完全用 Signals 取代 RxJS。我的建议是：先从 Signals 开始，如果 RxJS 没有带来任何显著优势，那就继续使用 Signals。否则，就选择 RxJS。

对于新应用，我也建议从一开始resource就rxResource采用这些 API。虽然这些 API 目前仍处于实验阶段，未来可能会有所改进，但等到你的应用正式上线时（通常需要 2-3 个月的初始开发时间），它们很可能已经稳定下来了。

去了解更多关于信号的知识吧，你可以看看我的视频。

Angular CLI 和 Nx

我更喜欢 Angular CLI，因为它提供了我入门所需的一切，而不会增加不必要的复杂性。虽然 Nx 提供了预配置的工具，但我发现使用 Angular CLI 手动设置所需内容非常简单，而且可以与 Schematics 或该工具自带的预配置设置工具无缝协作。

直接使用 Nx 会引入额外的抽象层，这可能会让人感到不知所措，尤其是在项目初期。它也有自身的学习曲线和迁移流程，通常需要额外的精力。以我的经验来看，先从 Angular CLI 入手，如果需要再过渡到 Nx，才是更实际的做法。

也就是说，随着应用程序的增长，Nx 的价值就体现出来了。它的高级构建工具和单体仓库管理等功能，对于大型项目来说变得不可或缺。而且，如果需要采用 Nx，过程也很简单——只需运行即可nx import。

但是，如果是库开发，我会从一开始就选择 Nx。

Angular CLI • 概述 • Angular

用于构建现代应用程序的 Web 开发框架。

angular.dev

Nx：智能 Monorepos·快速 CI

Nx 是一个针对单体仓库优化的构建系统，它拥有适用于流行框架和工具的插件，以及包括缓存和分发在内的高级 CI 功能。

nx.dev

Angular Material + Tailwind

在用户界面开发方面，我使用 Angular Material 和 Tailwind 框架。

Angular Material 提供了一个强大的组件库，可与 Angular 无缝集成。由于它是 Angular 项目（包括 Material、CLI 和框架）的一部分，因此由官方维护并始终保持同步。

对我而言，Tailwind CSS 并非 UI 库的替代品，而是 Angular Material 的完美补充。Material 可以满足我的大部分 UI 需求，而 Tailwind 则用于更精细的自定义，例如元素定位、调整边距和添加实用类。

我很少遇到独特的 UI 需求，也很少使用现有的设计系统。大多数时候，我开发的是我所谓的“UI 枯燥乏味”的企业级应用，Angular Material 和 Tailwind 的组合就足以满足需求了。

Angular Material UI 组件库

Angular Web 应用程序的 UI 组件基础架构和 Material Design 组件。

material.angular.io

Tailwind CSS - 无需离开 HTML 即可快速构建现代网站。

Tailwind CSS 是一个实用性优先的 CSS 框架，无需离开 HTML 即可快速构建现代网站。

tailwindcss.com

测试：茉莉/业力与剧作家

平心而论，目前选择合适的测试工具并非易事。既然我选择了 Angular CLI，那么我也会坚持使用唯一官方支持的测试框架：Jasmine 和 Karma 的组合。

你可能听说过这对工具已经停止维护了。其实不然。停止维护仅指 Karma，它负责在浏览器中运行测试。Karma 未来会被 Modern Web Test Runner 取代，但我们不必担心这一点。我们在测试中使用的命令是 Jasmine，它不会被替换，会继续使用。

Jest 或 Vitest 怎么样？官方有计划支持 Jest。我希望是 Vitest，毕竟它是更现代的工具，但我担心 Angular 团队更倾向于 Jest。

此外，我还使用了基于 Jasmine 的 Angular 测试库。它通过以下方式增强了测试体验：

• 提供实用函数，通过面向用户的选择器（例如角色或标签）来选择元素，而不是依赖于类名等实现细节data-testid。
• TestingModule它通过一个函数简化了配置render。
• 它可以处理异步任务并自动触发变更检测。

Angular 测试库 | 测试库

Angular 测试库

testing-library.com

由于我不为每个文件编写测试（即单元测试），而是针对整个功能编写测试，因此我禁用了 CLI 中的自动生成测试。

还有一个关于“不要为每个文件编写测试”的视频。

对于端到端 (E2E) 测试，我将使用 Playwright。如果没有现成的代码，我看不出有什么理由使用其他工具。Playwright 速度快、功能先进且可靠。

遗憾的是，Playwright 目前还没有计划支持 Angular 组件测试，但我可以告诉你，相关工作正在幕后进行。这项功能或许会在未来推出，可能以社区驱动的形式实现。

猜猜看，我那里还有一段关于剧作家的视频😅

为现代 Web 应用提供快速可靠的端到端测试 | Playwright

针对现代 Web 应用的跨浏览器端到端测试

剧作家开发

代码规范指南：ESLint、Prettier、Husky、Lint-Staged 和 Sheriff

遵循清晰的代码规范对于创建干净、一致的代码库至关重要。

对于代码检查，angular-eslint 提供的 ESLint 仍然是标准配置。它与 Angular 深度集成，这意味着它也遵循 Angular 样式指南。我还引入了 eslint-plugin-unused-imports 库，顾名思义，它可以自动移除未使用的导入语句。

虽然 Prettier 有 ESLint 插件，但我并不想用它。我不希望格式错误显示为代码检查错误，导致编辑器里所有代码都变成红色。所以我使用 lint-staged 在每次提交之前运行 Prettier。为了确保 Git 钩子能够正确执行，我依赖 Husky。

在强制执行架构规则（特别是模块边界和模块间依赖关系规则）方面，我使用 Sheriff。它还与 ESLint 集成。

Prettier · 有主见的代码格式化工具

有主见的代码格式化程序

prettier.io

npm install --save-dev lint-staged # requires further setup

$ git commit

✔ Backed up original state in git stash (5bda95f)
❯ Running tasks for staged files...
  ❯ packages/frontend/.lintstagedrc.json — 1 file
    ↓ *.js — no files [SKIPPED]
    ❯ *.{json,md} — 1 file
      ⠹ prettier --write
  ↓ packages/backend/.lintstagedrc.json — 2 files
    ❯ *.js — 2 files
      ⠼ eslint --fix
    ↓ *.{json,md} — no files [SKIPPED]
◼ Applying modifications from tasks...
◼ Cleaning up temporary files...

警长 | 警长

TypeScript 项目的模块化

sheriff.softarc.io

状态管理：信号存储

Angular 引入 Signals 极大地简化了状态管理，因此我也选择了一个基于 Signals 构建的状态管理库。对我来说，那就是 NgRx SignalStore。

我使用 SignalStore 进行本地和全局状态管理。我什么时候会引入它呢？当我发现自己正在编写一个服务，该服务持有一个更大的 Signal 并包含围绕它的逻辑时，

SignalStore 并非千篇一律，而是提供了一个清晰的标准。

至于 NgRx Global Store 与 Redux 的结合，我认为它更适合需要事件驱动系统的情况。说实话，这种情况对我来说极其罕见。即使真的需要，我也会等待 SignalStore 即将推出的事件驱动扩展。

如果您还没有机会试用 SignalStore，这里有一个快速入门指南。

NgRx 工具包 | NgRx 工具包

NgRx SignalStore 的扩展

ngrx-toolkit.angulararchitects.io

inject构造函数

关于依赖注入方式（inject 或基于构造函数）的选择，一直存在激烈的争论。在我的 Java/Spring 应用中，我使用基于构造函数的依赖注入，但在 Angular 中，我选择使用依赖注入。

inject它还能在函数内部使用，这是一个很大的优势。我的 HTTP 拦截器和路由守卫已经依赖于它了，而且谁知道呢——未来或许会出现一种不需要类的替代编写格式。

使用 `<T>` 还有其他原因inject，例如类型安全的注入标记，或者它无需使用尚未标准化的属性装饰器。但对我个人而言，最关键的论点是它支持在函数中使用。

原理图

我尽量保持组件的简洁性。一旦组件变得庞大，我就会将其拆分成一个容器组件和多个展示组件。逻辑则放在服务中。

由于我的组件只有大约 100 行代码，因此我认为没有必要使用单独的 CSS 和 HTML 文件。相反，我更喜欢使用内联样式和模板。为了简化这种方法，我重写了 angular.json 文件中的 schematics 属性：

"schematics": {
  "@schematics/angular:component": {
    "inlineTemplate": true,
    "inlineStyle": true,
    "style": "scss",
    "skipTests": true,
    "flat": true,
    "changeDetection": "OnPush"
  },
  "@schematics/angular:class": {
    "skipTests": true
  },
  "@schematics/angular:directive": {
    "skipTests": true
  },
  "@schematics/angular:guard": {
    "skipTests": true
  },
  "@schematics/angular:interceptor": {
    "skipTests": true
  },
  "@schematics/angular:pipe": {
    "skipTests": true
  },
  "@schematics/angular:resolver": {
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  },
}

说实话，我已经不再使用 Angular CLI 来创建组件或服务了。因为我更喜欢使用单文件架构，并结合内联模板和样式，所以我发现手动创建文件，然后使用我在 IDE 中定义的实时模板/代码片段会更快。

对我来说，这种方法比运行 CLI 命令和调整生成的文件要快得多。

无区域和推送

顾名思义，zone.js 在无区域模式下不再发挥作用。取而代之的是，该函数markForCheck（对于使用该策略的组件来说一直至关重要OnPush）现在直接触发变更检测。

我选择使用无区域模式。虽然它仍处于实验阶段，但一些应用程序，例如https://angular.dev，已经在生产环境中使用它了。原因与之前相同rxResource：如果你今天开发一个新应用程序，很有可能你会直接在生产环境中使用无区域模式的开发者预览版，甚至是稳定版本。

我还设置了组件的属性OnPush。OnPush这应该不会对无区域模式造成任何问题。这是为了实现一项名为“本地变更检测”的额外性能提升。只有当组件处于启用状态OnPush且模板中的信号发生更改时，才能启用本地变更检测。启用本地变更检测后，只会检查组件本身，而不会检查其父组件，从而大大加快处理速度。

有关变化检测的更多信息，我推荐您观看我的视频。

SSR、水合作用和渐进式水合作用

服务器端渲染 (SSR)、水合和增量水合对于任何对初始加载性能和良好 SEO 有较高要求的面向互联网的应用程序都至关重要。

在加入 Angular Architects 之前，我曾参与开发一个应用，如果当时能用上这些功能，那将会是颠覆性的改变。如果我们当时就能使用增量式水合（Incremental Hydration），那对我们来说简直就是天堂。

也就是说，这些功能是有代价的。它们会增加开发和部署流程的复杂性。

因此，我建议仅在应用程序真正需要时才使用 SSR，但如果确实需要，则绝对应该使用。

你可能需要再检查一下这部分。这里可能很快就会出现一段视频……

最后说明：工具和偏好设置

说到包管理器，我更喜欢用pnpm而不是 npm 和 yarn。对我来说，pnpm 速度更快，依赖管理也更好。yarn 也不错，但我不想用 1.0 版本。

快速、节省磁盘空间的软件包管理器 | pnpm

快速、节省磁盘空间的软件包管理器

pnpm.io

人工智能？当然。它已经成为必需品。我使用 CoPilot 和 ChatGPT 这两款人工智能工具来提高工作效率。至于我的集成开发环境 (IDE)，我仍然坚持使用 IntelliJ，这源于我的 Java 背景……而且我仍然在使用浅色主题😅。

微软 Copilot：您的 AI 伙伴

Microsoft Copilot 是您获取信息、娱乐和启发灵感的好帮手。获取建议、反馈和简洁明了的答案。立即试用 Copilot。

copilot.microsoft.com

https://openai.com/

2025年展望

我个人非常渴望尝试使用 Bun 作为 Node.js 的替代方案。

我还想使用 Angular (TanStack) Query，它作为一种强大的服务器状态处理和缓存工具正越来越受欢迎。此外，它还可以与 SignalStore 结合使用。

还有 Analog，我需要它来搭建 ng-news 网站，我一直想做这个网站。

模拟 | 模拟

全栈 Angular 元框架

analogjs.org

我听说Cursor这款人工智能集成开发环境（IDE）评价很好，也想试试看。

对于 Angular，我期待着诸如httpResourceSignal Forms之类的新功能，这些功能有望使响应式设计更接近 Angular 的核心模式。

就这些了。如果你有其他选择，或者知道一些我不知道的工具，请告诉我。

我还提供了一个 GitHub 代码库，其中已经安装并配置了所有这些工具。

pnpm create @angular@latest -s -t -S --experimental-zoneless --ssr false --style scss [yourProjectName]

pnpm ng add @angular/material
pnpm install -D tailwindcss postcss autoprefixer
pnpm tailwindcss init

module.exports = {
  // ...
  content: ["./src/**/*.{html,ts}"],
};

@tailwind base;
@tailwind components;
@tailwind utilities;

pnpm i -D @testing-library/angular @testing-library/dom @testing-library/user-event

pnpm i -D @playwright/test
pnpm playwright install

pnpm ng add @angular-eslint/schematics
pnpm i -D eslint-plugin-unused-imports husky prettier lint-staged @softarc/{sheriff-core,eslint-plugin-sheriff}

一如既往，非常欢迎大家提出反馈/意见。