Renaming Angular Suffixes in 2026: A Pragmatic Guide for 'Legacy' Projects

Source: Dev.to

I know, I know. We’re already on Angular v21. If you’re starting a greenfield project today, you’re probably already using the latest style‑guide conventions without a second thought. But plenty of us are maintaining codebases that are at least a year old—ancient history in Angular Renaissance time.

If you’re working on one of these “legacy” projects (anything created before breakfast yesterday), you may have noticed the Angular style guide’s suggestion to drop the .component, .service, and .directive suffixes. With 500+ components, a manual rename feels impossible.

---

The Namespace Collision Problem

When you strip suffixes, you can end up with multiple files that export the same identifier:

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

After naïvely removing the suffixes:

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

Three files named user.ts each exporting a User symbol cause the compiler to scream, the linter to faint, and you to reach for git reset --hard.

---

Approach 1 – Manual Bulk Rename with Git Diff

1. Run the “Rename all Angular file types” command from the Rename Angular Component extension.
2. Git will immediately show the collisions (e.g., profile.component, profile.service, user.component).
3. Do not commit the changes yet; keep them staged or in the working tree so you can inspect the diff.
4. Revert the offending files, add them to an exclusions list, and rerun the rename.
5. For the remaining collisions, make semantic decisions (e.g., rename UserService to UserDataAccess or UserAuth).
6. The extension updates every reference, import, and template selector in less than a second.

This method is fast for a handful of problematic files and keeps you in full control.

---

Approach 2 – Let an AI Agent Resolve Collisions

When the project is large, manually deciding each rename can be tedious. The extension includes a built‑in AI‑agent prompt:

1. Run the “Rename all Angular file types” command and let the build break on collisions.

2. Summon your AI assistant (Cursor, Windsurf, etc.) with the following prompt (available in the extension docs):

   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. Review the changes the agent proposes. In my test on the Angular RealWorld Example App, the AI correctly renamed UserService to UserDataAccess based on its HTTP client usage, resolved the conflict, and generated an exportable summary.

4. Submit the resulting changes as a PR (I did this on the RealWorld repo).

The AI handles the hard naming decisions, while the extension takes care of the grunt work of updating imports, selectors, and templates.

---

Why Use a Dedicated Extension?

• Deterministic AST‑based refactoring – no guesswork, unlike generic LLM string replacements.
• Speed – renames 498 files instantly; the AI only intervenes on the few ambiguous cases.
• Safety – Git diff provides a clear audit trail of what changed.
• Comprehensive – the extension also renames individual Angular entities (components, services, directives, modules, guards, pipes, interfaces, enums, classes, functions, variables) that follow the “one concept per file” rule.

---

Getting Started

• Install Rename Angular Component from the VS Code Marketplace (or the Open VSIX Registry if you use Cursor or Antigravity).
• Right‑click any file in the Explorer panel and choose Rename Angular Component to rename a single entity, or use the Rename all Angular file types command for bulk operations.

Happy renaming!