What tools does this skill help me utilize?

It provides expert instructions for using Angular DevTools for component inspection, the ng.probe console utility for runtime debugging, and configuring source maps in angular.json.

Is there a structured process for debugging included?

Yes, the skill follows a proven four-phase methodology: Reproduce and Isolate, Analyze the Error, Apply the Fix, and Verify the Solution, ensuring a systematic approach to every bug.

Does it provide guidance on memory management?

Absolutely, it includes specific strategies for detecting and fixing RxJS subscription leaks using takeUntilDestroyed and other modern interop utilities to prevent performance degradation.

Can I use this for both legacy and modern Angular versions?

Yes, the skill covers legacy RxJS and Zone.js patterns as well as modern Angular 17/18+ features like Signals, the @if/@for syntax, and Zoneless application support.

How does this skill help with NG0100 errors?

It identifies the root cause of the ExpressionChangedAfterItHasBeenCheckedError and provides targeted solutions such as utilizing ChangeDetectorRef, deferring updates via setTimeout, or migrating to async pipes.

Angular Debugger Pro

Name: Angular Debugger Pro
Author: SnakeO

bySnakeO

セキュリティとテスト

Diagnoses and resolves complex Angular application errors using systematic debugging techniques and expert-level diagnostic patterns.

概要

This Claude Code Skill provides a comprehensive framework for troubleshooting modern Angular applications, ranging from traditional modules to the latest zoneless and signal-based architectures. It guides users through resolving notorious issues like ExpressionChangedAfterItHasBeenCheckedError (NG0100), dependency injection failures, and memory leaks from RxJS subscriptions. By integrating a structured four-phase diagnostic methodology with deep-dives into Angular DevTools and console utilities, it helps developers pinpoint performance bottlenecks and runtime errors with precision.

主な機能

Systematic four-phase debugging methodology for isolation and resolution
0 GitHub stars
Comprehensive fixes for common NG error codes (NG0100 to NG0999)
Support for modern Angular features including Signals and Zoneless mode
RxJS subscription leak detection and memory management strategies
Expert guidance on using Angular DevTools and ng.probe console utilities

ユースケース

Troubleshooting complex NullInjectorError and circular dependency issues
Fixing hydration mismatches and SSR-specific runtime errors
Optimizing change detection performance in large-scale applications

概要

主な機能

Systematic four-phase debugging methodology for isolation and resolution
0 GitHub stars
Comprehensive fixes for common NG error codes (NG0100 to NG0999)
Support for modern Angular features including Signals and Zoneless mode
RxJS subscription leak detection and memory management strategies
Expert guidance on using Angular DevTools and ng.probe console utilities

ユースケース

Troubleshooting complex NullInjectorError and circular dependency issues
Fixing hydration mismatches and SSR-specific runtime errors
Optimizing change detection performance in large-scale applications