我2025年的Angular開發(fā)最愛配置
Angular 仍在迅速发展。到2025年我们应该用什么呢？特别是当我们开始一个新项目时。
受Reddit上的一个讨论启发，这里分享我个人的观点，关于2025年Angular开发中最有用的工具、库和实践。
这篇文章的视频版本可以在YouTube上找到。
此处省略文字
反应性：响应信号信号代表了 Angular 在响应式开发方面的一个重要转变。虽然一些组件如 Signal Forms 和 httpResource 仍在开发中，而 effect 仍处于开发者预览阶段，因此我的建议很明确：全力投入信号。
为什么你现在不应该等待Signal Forms和httpResource？答案其实是因为重写成本的问题。如果你现在不使用Signals，你可能会转而使用RxJS来做响应式编程。但将来从RxJS转向Signals可能需要更广泛的重写工作。你得明白，使用RxJS时，很多东西都不一样，包括一些基本的范式。
另一方面，通过采用Signals，你可以确保你的应用程序与Angular的未来保持一致。对于还未“信号化”的领域（比如响应式表单或HTTP通信），你可以暂时不用Signal的反应性，用传统方式处理。例如，你可以使用effect来设置FormGroup的值，比如将某个值赋给它。
关键是，从Signals开始意味着将来你只需要调整代码中未被标识的部分。如果你现在跳过Signals，将来你将不得不面对重构整个应用的艰巨任务。
说起来，这并不意味着你应该完全用Signals取代RxJS。我的建议是：先试试Signals，如果RxJS没有给你带来任何显著的优势，那就继续用Signals好了。否则，那就用RxJS吧。
对于新的应用，我也会推荐从一开始就使用 resource 或 rxResource。虽然这些 API 目前还在试验阶段，并且可能会发生变化，但等到你的应用上线时（这通常远远超出最初的 2-3 个月开发期），它们很可能已经稳定下来。
你可以看我的视频，了解更多关于Signals的信息。
Angular CLI 和 Nx我更喜欢 Angular CLI，因为它提供了我开始开发所需的一切，而不增加不必要的复杂度。虽然 Nx 提供了预配置的工具，但我发现手动设置这些工具非常简单。此外，Angular CLI 可以与 Schematics 或其他预配置的工具无缝协作。
从 Nx 开始会引入一层额外的抽象层，这在项目初期可能会让人感到有些不知所措，尤其是在项目初期。它还伴随着自己的学习曲线和迁移过程，通常需要额外的努力。根据我的经验，从 Angular CLI 开始，如果之后需要转向 Nx，是一种更为实际的做法。
话说回来，随着应用程序的增长，Nx 提供了价值。它的功能，如高级构建工具功能和单一仓库管理，在大规模项目中变得不可或缺。而到了需要采用 Nx 的时候，这个过程相当简单——只需运行这个命令 nx import。
对于图书馆的发展而言，我一开始就决定选择Nx。
(https://angular.dev/tools/cli)
构建现代应用程序的 Web 开发框架。
angular.dev
Nx 是一个专为单仓库优化的构建系统，内置流行框架和工具的插件，并具备如缓存和分发等高级持续集成功能。
nx.dev
当谈到UI开发时，我使用 Angular Material 和 Tailwind。
Angular Material 提供了一个强大的组件库，可以与 Angular 无缝集成。由于它是 Angular 项目（包括 Material、CLI 和框架组件）的一部分，因此它由官方维护，并始终与 Angular 项目同步。
对我来说，Tailwind CSS 并不是用来替代 UI 库的，而是与 Angular Material 配套使用，可以更好地互补。虽然 Angular Material 已经满足了我的大部分 UI 需求，我用 Tailwind 进行细粒度的自定义，比如调整元素位置、微调边距和添加工具类。
我很少遇到独特UI需求，更不用说与现有设计系统合作了。大多数时候，我开发的是我称之为"UI无聊"的企业应用程序，在这种情况下，Angular Material和Tailwind的组合已经够用了。
Angular Material UI 组件库
Angular网页应用的UI组件基础设施和Material Design组件。
material.angular.io
Tailwind CSS 是一个基于实用类的 CSS 框架，帮助你快速构建现代网站，无需离开 HTML 代码。
"尾风CSS网站的 favicon"（这是尾风CSS的网站：tailwindcss.com）
说真的，目前选择合适的测试工具并不容易。既然选择了 Angular CLI，我将使用官方支持的唯一测试框架：Jasmine 和 Karma 组合。
你可能听说这一套已经到了退役。这并不正确。退役这一说法只适用于Karma，它负责在浏览器中运行测试。Karma将被Web测试运行器取代，但这与我们无关。我们在测试中用到的是Jasmine，而Jasmine将一直保持原状。
关于 Jest 或者 Vitest 呢？计划正式支持 Jest。我希望会是 Vitest，它是更现代的工具，但我猜测 Angular 团队可能更倾向于 Jest。
另外，我还使用 Angular Testing Library，它基于 Jasmine 运行。它能增强测试体验。
- 提供实用功能，通过用户界面选择器（例如角色或标签）来选择元素，而不是依赖实现细节，如类名或
data-testid。 - 它通过
render函数简化了对TestingModule的配置。 - 它处理异步任务并自动触发变更检测流程
(https://testing-library.com/docs/angular-testing-library/intro/)
(Note: There is a minor formatting issue in the source text's link structure. Keeping the original intent, the link should be separated properly as follows:
However, based on the provided format, the translation aims to closely reflect the original structure.)
Angular 测试工具
测试库的 favicon 和网址如下：
testing-library.com 测试库网站
因为我不是按文件（也就是单元测试）来写测试，而是为整个功能编写测试，所以我禁用了CLI自动生成测试。
也有一个视频讲到不要为每个文件都写测试代码。
对于端到端（E2E）测试，我将选择Playwright。如果没有现有的代码，我看不到使用其他工具的理由。Playwright不仅速度快，而且现代化且可靠。
很遗憾，目前没有计划在 Angular 中通过 Playwright 支持组件测试，不过我可以告诉你，有些幕后工作正在进行。这有可能实现，也许会以社区驱动的形式出现。
猜猜看，我还有一件事情，我还有一段关于Playwright的视频呢 😅
针对现代 web 应用的端到端的测试，支持跨浏览器。
网站图标 playwright.dev，一个提供网页自动化工具的网站。
遵守清晰的代码规范对于确保代码库的干净和一致性是必不可少的。
使用 ESLint 结合 angular-eslint 仍然是代码检查的标准。它与 Angular 有很强的集成，因此它也包含了 Angular 的样式指南。我还使用了 eslint-plugin-unused-imports 这个库，它可以自动移除未使用的导入项，正如其名字所描述的那样。
虽然有 ESLint 的 Prettier 插件，但我避免使用它。我不希望格式错误显示为 lint 错误，导致编辑器中的代码全部变红。相反，我使用 lint-staged 在每次提交前运行 Prettier 格式化，以确保 git hooks 能正确运行。我依赖 Husky。
谈到强制执行架构规则，尤其是模块边界和它们之间的依赖规则时，我会用Sheriff工具。它还能与ESLint一起使用。
角度 ESLint / angular-eslint
✨ 与 Angular 和 ESLint 相关的所有工具的单仓库项目
用于支持 ESLint 校验 Angular 项目中代码的相关工具的单仓库
目录内容这个项目得以实现要感谢 不断的努力投入到了https://github.com/typescript-eslint/typescript-eslint，以及https://github.com/mgechev/codelyzer上的TSLint规则的出色实现工作。
- 快速入门
- 支持的 Angular CLI 版本
- 支持的 ESLint 版本
- 本项目包含的包
- 包版本
- 向现有没有现有代码检查器的 Angular CLI 项目添加 ESLint 配置
- 在生成工作区的新项目时默认使用 ESLint
- 配置 ESLint
- 有关强制执行代码格式规则的准则
- 使用 VSCode 的 ESLint 扩展进行代码检查
- 在没有 Angular CLI 构建器和 eslintrc 风格配置的情况下使用 ESLint
- 性能注意事项
- 在 Angular 模板中使用
eslint-disable注释进行代码检查 - 从 Codelyzer 和 TSLint 迁移 Angular CLI 项目
-
参照本地环境和工作区设置指南来安装 Angular CLI
2。 创建一个新的 Angular CLI 项目…
访问 prettier.io 网站了解更多。点击链接查看更详细的信息。
有争议的代码格式器
prettier.io，这是一个用于代码格式化的工具。
lint-staged (代码检查工具)
🚫💩 — 在 git 暂存区的文件上运行代码检查器
🚫💩 lint-staged](https://badge.fury.io/js/lint-staged)
运行格式化器和代码检查工具等任务以检查暂存区的 Git 文件，并防止💩混入你的代码库！
请运行以下命令：```
npm install --save-dev lint-staged # 需要进一步配置
切换到全屏模式 退出全屏
$ git commit
✔ 已将原始状态备份到git stash (5bda95f)
❯ 正在为暂存的文件运行任务...
❯ packages/frontend/.lintstagedrc.json — 1个文件
↓ *.js — 没有文件 [跳过不处理]
❯ *.{json,md} — 1个文件
⠹ 执行 prettier --write
↓ packages/backend/.lintstagedrc.json — 2个文件
❯ *.js — 2个文件
⠼ 执行 eslint --fix
↓ *.{json,md} — 没有文件 [跳过不处理]
◼ 应用任务中的修改...
◼ 清理临时文件夹...
观看 "asciinema" 的视频
[](https://asciinema.org/a/199934) [视频展示](https://asciinema.org/a/199934)
## 为什么呢？
代码质量相关的任务，如代码格式化和代码审查，在提交代码前运行更有意义。通过这样做，你可以确保不会有任何错误进入仓库并强制统一代码风格。但是，在整个项目上运行这些任务可能会很慢，而且像代码审查这样具有较强主观性的任务有时会等等。
[前往 GitHub 查看](https://github.com/lint-staged/lint-staged)
[ typicode.github.io ](https://typicode.github.io/husky/)
[](https://sheriff.softarc.io/)
## [sheriff | 警长](https://sheriff.softarc.io/)
为 TypeScript 项目实现模块化设计
 sheriff.softarc.io
## 状态管理：信号存储
Angular引入的Signals大大简化了状态管理，这也是为什么我会选择一个基于Signals的状态管理库。对我来说，这就是NgRx SignalStore，
我使用SignalStore来进行本地和全局的状态管理。我什么时候会决定使用它？当我正在编写一个包含较大Signal的服务，并且需要围绕它编写逻辑时。
SignalStore 不是简单的模板，而是提供了一个清晰的标准。
关于NgRx全局存储在Redux中的使用，我认为它在需要事件驱动系统时很有用。说实话，这种情况对我来说非常少见。即使有这样的需求，我也会等待即将推出的SignalStore事件扩展功能。
如果你还没试过 SignalStore，这里有个快速入门
[ ngrx.io ](https://ngrx.io/)
[](https://ngrx-toolkit.angulararchitects.io/ "请点击这里查看ngrx-toolkit")
## [NgRx 工具包](https://ngrx-toolkit.angulararchitects.io/)
NgRx SignalStore 的扩展
一个用于展示ngrx-toolkit的网址和图标  ngrx-toolkit.angulararchitects.io
## 使用 `inject` 而不是构造函数
一个有争议的话题是构造器依赖注入与注入之间的区别。我通常在我的Java/Spring项目中选择构造器依赖注入，但在Angular项目中则选择注入。
在函数内部使用`inject`也是一个很大的优势。我的 HTTP 拦截器和路由守卫已经依赖于它，未来可能会有不依赖类的其他编写格式，也不一定。
还有其他使用 `inject` 的原因，比如类型安全的注入标记或消除对属性装饰器的需求，属性装饰器没有标准化。但对我来说，最关键的理由是它能在函数中使用。
## 示意图
我尽量让我的组件保持小巧。只要某个组件变得太大了，我就会将其拆分为一个容器组件和多个展示组件。逻辑部分会放到服务里。
因为我的组件大约有100行代码，因此我认为不需要单独的CSS和HTML文件。相反，我更喜欢使用内联样式和模板。为了简化这种做法，我在angular.json文件中修改了schematics属性：
"schematics": {
"@schematics/angular:component": {
"inlineTemplate": true, // 使用内联模板
"inlineStyle": true, // 使用内联样式
"style": "scss", // 样式文件格式为scss
"skipTests": true, // 跳过测试
"flat": true, // 平铺结构
"changeDetection": "OnPush" // 更改检测策略为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 中定义的实时模板或代码片段更快。这种方式对我来说更快。
对我来说，这种方法比在命令行里输入指令并修改生成的文件快多了。
## 无区域模式 & OnPush
正如其名，启用无区模式后，zone.js将不再发挥作用。相反，`markForCheck`函数——对采用`OnPush`策略的组件一直很重要——现在直接触发变更检测过程。
我采用无区模式。虽然它仍然处于实验阶段，一些应用，比如<https://angular.dev>，已经开始在生产环境中使用这个模式。这一点与`rxResource`的说法相同：如果你今天开始一个新的应用程序，你可能最终会用上无区模式的预览版甚至稳定版。
我也将我的组件设置为 `OnPush`。`OnPush` 不应该会在无区（Zoneless）模式下引起任何问题。局部变更检测是必要的，这可以提供额外的性能提升。只有当组件设置为 `OnPush` 并且模板中的信号发生变化时，才会触发局部变更检测。局部变更检测只会检查该组件本身，而不会检查其父组件，这使得过程更加快速。
关于变化检测，我推荐看看我的视频。
## SSR，补水，和增量补水
服务器端渲染（SSR）、hydration（hydration）和增量渲染对任何需要快速初始加载和良好 SEO 优化的互联网应用程序都至关重要。
在加入Angular Architects之前，我曾在一个项目上工作，如果有这些功能，对我们来说将会是彻底改变游戏规则的存在。如果我们当时能用到增量式 hydration，对我们来说简直就像是天堂。
话虽如此，这些功能特性是有代价的。它们增加了开发和部署流程的复杂度。
所以，如果你的应用程序确实需要SSR，那就一定要用。
**你可能需要再检查一下这部分。哦，说不定很快这里就会出现一个视频呢？**
## 最后的笔记：工具与喜好
谈到包管理器时，我更倾向于使用**pnpm**而不是npm或yarn。它更快，处理依赖关系更优。yarn也不错，但我不想使用yarn的旧版本。
[  ](https://pnpm.io/)
图片链接指向的是PNPM项目官网，PNPM是一个用于JavaScript项目的依赖管理工具。
## [快速且节省磁盘空间的包管理器 | pnpm](https://pnpm.io/)
快速又省空间的包管理器
访问 pnpm.io 网站
AI？当然了。它已经成为一种必需品。我用CoPilot和ChatGPT作为AI工具来提升生产力。至于我的IDE，我还是基于我Java背景的选择，使用IntelliJ……，我还是用浅色主题 😅。
[](https://copilot.microsoft.com/)
## [微软的Copilot：你的智能助手](https://copilot.microsoft.com/)
微软的Copilot是你的好帮手，帮助你了解资讯、娱乐和启发。获得建议、反馈和简洁的答案。现在就来试试Copilot吧。
 copilot.microsoft.com
<https://openai.com/>
## 2025年的前景展望
我个人来说，特别想试试用 Bun 替换掉 Node.js。
一个网站 [bun.sh](https://bun.sh/) 。
我也想使用 Angular（TanStack）Query 这个工具，它正变得越来越流行，是一款强大的工具，可用于处理服务器状态和缓存数据。还可以与 SignalStore 结合使用。
[tanstack.com](https://tanstack.com/query/latest/docs/framework/angular/overview) （见此链接）
还有，Analog，我需要用它来做ng-news网站，我打算做ng-news网站有一段时间了。
## [类比 | Analog](https://analogjs.org/)
全栈 Angular 开发框架
 analogjs.org
我听说很多人都说这个叫Cursor的AI IDE很好，我也想试一试。
对于 Angular，我期待着新的功能，比如 `httpResource` 和 **信号表单**，这些功能承诺将使反应式编程更加贴合核心 Angular 模式。
* * *
就这样吧。如果你还有其他选择，或者知道哪些我不了解的工具，请告诉我。
我也提供了一个GitHub仓库链接，里面已经装好了所有这些工具。
##  [雷纳尔·哈克内坎普](https://github.com/rainerhahnekamp) / [Angular启动项目](https://github.com/rainerhahnekamp/angular-starter)
### 一个现代 Angular 应用的入门项目
# Angular 项目搭建
## 安装：
pnpm create @angular@latest -s -t -S --experimental-zoneless --ssr false --style scss [项目名]
进入全屏 退出全屏
手动添加以下配置项到 angular.json，路径如下 `projects.[项目名称].schematics.@schematics/angular:component`
* "changeDetection": "变更检测"
* "flat": "扁平化"
## 用户界面
要安装Angular Material和一些CSS工具，你可以运行如下命令：
pnpm ng add @angular/material
pnpm install -D tailwindcss postcss autoprefixer
pnpm tailwindcss init
点击全屏模式/退出全屏
打开 `tailwind.config.js` 文件，并在 `module.exports` 中添加以下代码：
module.exports = {
// ...
content: ["./src/**/*.{html,ts}"],
};
全屏模式 退出全屏
在 `styles.scss` 文件的开头添加以下代码。
[@tailwind](https://dev.to/tailwind) 基础样式;
[@tailwind](https://dev.to/tailwind) 组件;
[@tailwind](https://dev.to/tailwind) 实用工具;
点击进入全屏模式，点击退出全屏模式
## 测试一下
安装 Angular 测试库，以及用户事件库：
pnpm i -D @testing-library/angular @testing-library/dom @testing-library/user-event
全屏 退出全屏
安装Playwright（一个自动化工具）及其配套的浏览器。
pnpm i -D @playwright/test # 安装依赖项 @playwright/test
pnpm playwright install # 安装 playwright 测试框架
点击全屏 点击退出全屏
* * *
## 代码的质量
为了代码质量，我们安装了以下工具：`angular-eslint`、`eslint-plugin-unused-imports`、`husky`、`prettier`、`lint-staged`和Sheriff。
pnpm ng add @angular-eslint/schematics # 添加 Angular ESLint 模式
pnpm i -D eslint-plugin-unused-imports husky prettier lint-staged @softarc/{sheriff-core,eslint-plugin-sheriff} # 安装依赖项和工具，包括 ESLint 插件、husky、prettier 和 lint-staged
全屏 退出全屏
整合……
[查看 GitHub 上的內容:](https://github.com/rainerhahnekamp/angular-starter)
* * *
大家的反馈和意见一如既往地非常受欢迎。共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
