@schemcraft/remove NPM

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

Install the schematic package in your Angular project:
```
npm install @schemcraft/remove  
```

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

File Traversal: The schematic scans all TypeScript files (.ts) and associated HTML templates (.html) in your Angular project.
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.
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.