Update From Angular v19 to v20: Automate File Renaming and Refactoring with This CLI Tool!
Angular v20 brought significant changes to naming conventions and project structure that go beyond the typical version update. While most Angular updates focus on API changes and new features, v20 introduced fundamental shifts in how we organize and name our files - changes that affect every component, service, directive, and model in your project.
This process is currently tedious and error-prone when done manually, which is why I created angular-v20-bulk-file-refactor - a CLI tool that completely automates the file renaming and content refactoring process for Angular v20 projects.
The Angular v20 Challenge
Angular v20's new style guide introduced systematic changes to file naming patterns. The guide removes suffixes for components, directives, and services - so user.service.ts becomes simply user.ts, while user-profile.component.ts becomes user-profile.ts. These aren't just cosmetic changes - they reflect Angular's evolving best practices for project organization and maintainability.
The challenge isn't just renaming files. When you rename a file, you also need to update every import statement that references it throughout your entire codebase. Miss one import, and your application breaks. Do this manually across hundreds of files, and you're guaranteed to make mistakes.
What angular-v20-bulk-file-refactor Actually Does
My tool tackles both sides of this problem intelligently. It scans your Angular project and performs two critical operations:
Smart File Renaming: The tool identifies files that need renaming based on Angular v20 conventions. It understands different folder contexts - knowing that a .service file in a services folder should be handled differently than one in a shared folder.
Automatic Import Updates: More importantly, it then searches through your entire codebase and updates every import statement that references the renamed files. This ensures your application continues to work after the refactoring process.
The tool is highly configurable, allowing you to specify which directories to skip, which file segments to replace or remove, and how import statements should be updated. This flexibility means it can adapt to different project structures and naming preferences.
Why I Built This Tool
As an Angular developer who has been updating projects through multiple versions, I've seen how each major release brings its own challenges. But v20 was different - the scope of file-level changes was unprecedented. I realized this was exactly the kind of repetitive, error-prone task that should be automated.
I developed and tested this tool extensively on Windows, ensuring it handles edge cases and complex project structures reliably. Understanding that the Angular community spans multiple platforms, I've also included a Linux binary, though I haven't been able to test it thoroughly yet.
Getting Started
The tool is available on npm and can be installed globally or locally within your project. Once installed, you simply point it at your Angular project directory and let it handle the heavy lifting. The tool includes sensible defaults that work for most projects, but also provides extensive configuration options for specific needs.
You can get the tool at: https://www.npmjs.com/package/angular-v20-bulk-file-refactor
https://www.youtube.com/watch?v=CU79NTqo4Mc
The Bottom Line
Manual file refactoring for Angular v20 is time-consuming and risky. This tool eliminates both problems, handling the tedious work while ensuring accuracy. Whether you're updating a small personal project or a large enterprise application, angular-v20-file-refactor saves hours of work and prevents the frustrating bugs that come from missed import updates.
Before using the refactoring tool, make sure you've completed the basic Angular v20 update process. For guidance on that foundational step, check out my guide on updating from Angular v19 to v20.
Author: Multignite (@multignite)
