Rename Angular Component

Rename Angular components, directives, and services - including their filenames, class names and selectors all in one go

Works with these Angular features:

• components
• directives
• services
• guards
• modules

How to use

Right-click the Angular file or its associated sibling file (.html, .scss, .spec.ts).

Click 'Rename Angular Component' and then enter a new name.

The extension converts the text you enter into kebab case for the filename, capital case for the class name, the correct case for the type of selector, and then adds all the existing pre and postfixes back on.

Features

Based on the same naming convention in the Angular Style Guide and following the file pattern created by the Angular CLI, this extension will:

• Rename the files files associated with the component, directive or service whilst retaining their original postfixes
• Rename the containing folder if it has the same name as the original file selected
• Rename the class name of the component, directive or service to match the new file name (provided the class name follows the same naming convention)
• Rename the element, attribute or class selectors inside the class decorator meta data, and in all html templates in the repo (provided the selector follows the correct naming convention)
• Fix all import paths and their class names

Example - Changes to Component file after rename:

Example - Changes to an element selector in a parent template:

Extension Settings

This extension contributes the following settings:

• renameAngularComponent.debugLog: Enable/disable debug logging to file for optional submission with new issue posts
• renameAngularComponent.useLocalDirectPaths: Update imports/exports with direct local paths even if wildcard path exists

Known Issues

1. Feature request: Limit rename selector in templates to VSCode's current workspace multi-folder root
2. Extension does not support WSL

Support

If you have a problem using the extension or you find a bug, please raise an issue

Thanks

Thanks to Max Mumford for help finding bugs after initial release.

Thanks to Aristeidis Bampakos for feature guidance.

Thanks to you for reading this.

Release Notes

Latest version: [3.0.0] - 2024-02-27

• Update to latest VSCode extension lib deps
• Add styleUrl decorator attribute to import edits
• Replace string class names in test files per issue 34
• Create new extension icon using latest ng 17 logo