npm package: @schemcraft/remove
Description: A schematic to remove unused imports and variables from an angular project
Author: Maruthupandian M
Latest version: 1.8.0

# 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:  

   ```bash  
   npm install @schemcraft/remove  
   ```  

2. Run the schematic using Angular CLI:  

   ```bash  
   ng generate @schemcraft/remove:remove-unused  
   ```  

---

## Usage  

To execute the schematic on your Angular project:  

```bash  
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`  

```typescript  
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`  

```html  
<h1>{{ title }}</h1>  
```  

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

```typescript  
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](https://opensource.org/licenses/MIT).  

---

## Author  

Developed by **Maruthupandian M** (<maruthupandian72@gmail.com>).  

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

---