Remove Unused Imports and Variables - Angular Schematic

This Angular schematic cleans up your TypeScript files by automatically removing unused imports and variables. It also analyzes Angular HTML templates to ensure that variables used in templates are preserved, making it a complete solution for optimizing your Angular codebase.

Features

• Automatically removes unused imports from .ts files.
• Removes unused variables from .ts files.
• Analyzes Angular templates (both inline and external) to detect variables used in the HTML.
• Traverses your Angular project to ensure a clean, optimized, and maintainable codebase.

Installation

1. Install the schematic package in your Angular project:

   npm install @schemcraft/remove  

2. Run the schematic using Angular CLI:

   ng generate @schemcraft/remove:remove-unused  

Usage

To execute the schematic on your Angular project:

ng generate @schemcraft/remove:remove-unused  

This command processes all .ts files in your project, identifies unused imports and variables, and removes them while ensuring compatibility with variables used in Angular templates.

Examples

Input File: example.component.ts

import { Component } from '@angular/core';  
import { UnusedService } from './unused.service';  

@Component({  
  selector: 'app-example',  
  templateUrl: './example.component.html',  
})  
export class ExampleComponent {  
  title = 'This is used';  
  unusedVariable = 'This is not used';  

  constructor() {  
    console.log('ExampleComponent initialized');  
  }  
}  

Input File: example.component.html

<h1>{{ title }}</h1>  

Output File: example.component.ts (After Running the Schematic)

import { Component } from '@angular/core';  

@Component({  
  selector: 'app-example',  
  templateUrl: './example.component.html',  
})  
export class ExampleComponent {  
  title = 'This is used';  

  constructor() {  
    console.log('ExampleComponent initialized');  
  }  
}  

How It Works

1. File Traversal: The schematic scans all TypeScript files (.ts) and associated HTML templates (.html) in your Angular project.
2. Analysis: It identifies:
   • Unused imports: Imports that are not referenced in the code.
   • Unused variables: Variables declared but not used in either TypeScript files or Angular templates.
3. Cleanup: Automatically removes unused imports and variables while retaining any variables referenced in templates.

Limitations

• Complex Dynamic Usage: Variables or imports referenced through dynamic techniques (like eval, dynamic object property access, or reflection) may not be detected. Such cases require manual verification.

Best Practices

• Backup Your Code: Always back up your code or use version control before running the schematic.
• Review Changes: After running the schematic, review the changes to ensure no critical code is removed.

Contributing

We welcome contributions! If you have ideas for new features, encounter a bug, or want to improve this project, feel free to:

• Open an issue on GitHub.
• Submit a pull request.

Let’s make this project even better together! 🚀

License

This project is licensed under the MIT License.

Author

Developed by Maruthupandian M ([email protected]).

Feel free to reach out for feedback, suggestions, or contributions. Happy coding! 😊