DEV Community

jcarloscandela
jcarloscandela

Posted on

Detect and remove unused Angular code

#angular #cleancoding #npm #frontend

Ever wonder if your Angular project is bloated with unused components, directives, pipes, or services? Say hello to ngx-unused — a powerful CLI tool that helps you find and eliminate unused Angular classes in your codebase.

If you're working on a large codebase or an Nx monorepo, ngx-unused can be a game-changer for code hygiene and performance.

🔍 What is ngx-unused?

ngx-unused is a utility that scans your Angular project and detects declared but unused classes that are decorated with:

  • @Component
  • @Directive
  • @Pipe
  • @Injectable

It analyzes the usage of these classes across your project and flags anything that isn't actually used — helping you identify dead code that can be removed safely.

🚀 Installation & Usage

You don’t even need to install it globally. Just run:

npx ngx-unused <directory> -p <tsconfig-path>
Enter fullscreen mode Exit fullscreen mode

🔧 Options:

Option Description
<directory> Directory (or directories) to scan. You can pass multiple by separating with space.
-p, --project Path to your main tsconfig file. For Nx projects, this is usually tsconfig.base.json.
-h, --help Show help message.

📌 Note: The source root(s) and the tsconfig file must live under the same root directory.

🧪 Examples

Scan everything:

npx ngx-unused . -p tsconfig.base.json
Enter fullscreen mode Exit fullscreen mode

Scan only specific libraries and apps:

npx ngx-unused libs apps/my-app -p tsconfig.base.json
Enter fullscreen mode Exit fullscreen mode

🛠 How Does It Work?

  • It finds all classes decorated with Angular decorators (@Component, @Directive, @Pipe, @Injectable).

  • It checks if those classes are actually used in:

    • TypeScript code
    • Module metadata (declarations, providers, etc.)

  • It ignores:

    • Test files (*.spec.ts)
    • Simple imports/exports
    • Usages in useClass or useExisting (these are considered used)

If a class isn't referenced in any meaningful way, it gets flagged.

📦 Output

Results are printed in the terminal, grouped by file. Here's an example:

✔ Scanning source files...
⚠ Unused Services:
  - src/app/shared/my-unused.service.ts → MyUnusedService
  - libs/util/logger.service.ts → LoggerService
Enter fullscreen mode Exit fullscreen mode

✅ Exit Codes

Code Meaning
0 No unused classes detected
1 Unused component/directive/pipe/service found
2 Invalid configuration

💡 Why You Should Use It

  • Keep your codebase lean and maintainable
  • Improve performance by eliminating dead code
  • Catch forgotten legacy files that are no longer needed
  • Great companion during refactors or audits
  • Simplify Angular version upgrades — removing unused code helps reduce complexity and potential migration issues when updating Angular versions (especially major ones)

🧼 Conclusion

ngx-unused is a minimalistic yet incredibly helpful tool for Angular developers looking to declutter their projects. Whether you’re working on a growing monorepo or tidying up a legacy app, it’s a must-have in your toolbox.

Give it a try:

npx ngx-unused . -p tsconfig.base.json
Enter fullscreen mode Exit fullscreen mode

Let your Angular codebase breathe!

✍️ Have you used ngx-unused? Got tips or improvements to suggest? Drop a comment below!

Top comments (0)