2026 年重命名 Angular 后缀：面向“Legacy”项目的实用指南

Source: Dev.to

我知道，我知道。我们已经在使用 Angular v21。如果你今天开始一个全新的项目，可能已经在不假思索的情况下采用了最新的风格指南约定。但我们中有不少人仍在维护至少一年历史的代码库——在 Angular 复兴时代，这已经算是古老的历史了。

如果你正在处理这些“遗留”项目（即昨天早餐前创建的任何项目），你可能已经注意到 Angular 风格指南建议去掉 .component、.service 和 .directive 后缀。面对 500 多个组件，手动重命名几乎是不可能的任务。

命名空间冲突问题

当你去掉后缀时，可能会出现多个导出相同标识符的文件：

user.component.ts   // class UserComponent
user.service.ts      // class UserService
user.interface.ts    // interface User

朴素地去除后缀后：

user.ts   // class User
user.ts   // class User
user.ts   // interface User

三个名为 user.ts 的文件各自导出一个 User 符号，会导致编译器报错，linter 失效，而你只能使用 git reset --hard。

方法 1 – 使用 Git Diff 手动批量重命名

1. 运行 “Rename all Angular file types” 命令，该命令来自 Rename Angular Component 扩展。
2. Git 会立即显示冲突（例如 profile.component、profile.service、user.component）。
3. 不要提交这些更改；保持它们已暂存或在工作区中，以便检查 diff。
4. 还原有问题的文件，将它们加入 exclusions list（排除列表），然后重新运行重命名。
5. 对于剩余的冲突，做出语义上的决定（例如，将 UserService 重命名为 UserDataAccess 或 UserAuth）。
6. 该扩展会在不到一秒的时间内更新所有引用、导入和模板选择器。

此方法对少量有问题的文件非常快速，并且让你保持完全控制。

方法 2 – 让 AI 代理解决冲突

当项目规模较大时，手动决定每一次重命名会非常繁琐。该扩展内置了一个 AI 代理提示：

1. 运行 “Rename all Angular file types” 命令，让构建在冲突处中断。

2. 召唤你的 AI 助手（Cursor、Windsurf 等），使用以下提示（可在扩展文档中找到）：

   I just broke my build by renaming everything to User. Please look at the usage.
   If a service has HTTP calls, rename it UserDataAccess.
   If it has Signals, rename it UserState.
   Fix the imports.

3. 审核代理提出的更改。在我对 Angular RealWorld 示例应用 的测试中，AI 根据 HTTP 客户端的使用情况，正确地将 UserService 重命名为 UserDataAccess，解决了冲突，并生成了可导出的摘要。

4. 将生成的更改提交为 PR（我在 RealWorld 仓库中完成了此操作）。

AI 负责 困难 的命名决策，而扩展则处理更新导入、选择器和模板等 繁重工作。

为什么使用专用扩展？

• 基于确定性AST的重构 – 不需要猜测，不同于通用LLM字符串替换。
• 速度 – 能瞬间重命名498个文件；AI仅在少数模糊情况介入。
• 安全性 – Git diff提供了清晰的变更审计记录。
• 全面性 – 该扩展还会重命名符合“一文件一个概念”规则的 Angular 各类实体（组件、服务、指令、模块、守卫、管道、接口、枚举、类、函数、变量）。

入门指南

• 从 VS Code Marketplace 安装 Rename Angular Component（如果使用 Cursor 或 Antigravity，则从 Open VSIX Registry 安装）。
• 在 Explorer 面板中右键单击任意文件，选择 Rename Angular Component 重命名单个实体，或使用 Rename all Angular file types 命令进行批量操作。

祝您重命名愉快！