debug:angular

Diagnose Angular runtime errors using DevTools, ng.probe, and console utilities.

9|1|Updated Jan 12, 2026

Search Tags:#debugging #angular #rxjs #change-detection #angular-devtools #ng.probe #zone.js

Ready to run

npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-angular

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: debug:angular
Source: https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin/tree/main/plugins/debug-and-refactor/skills/debug-angular
Command: npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-angular

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers often struggle to identify root causes of Angular runtime errors, wasting time on trial-and-error debugging. This Skill provides a structured, developer-friendly approach to diagnose and resolve issues quickly.

Core Features & Use Cases

Structured debugging methodology: Four-phase process to reproduce, analyze, fix, and prevent regressions.
Developer tooling guidance: How to use Angular DevTools, ng.probe, and console debugging utilities to inspect components, injectors, and change detection.
Common error handling: Guidance for DI errors, NG0100, circular dependencies, lazy loading failures, and Zone.js issues across Angular apps.
Use Case: When you encounter a runtime error such as ExpressionChangedAfterItHasBeenCheckedError, follow the steps to isolate and resolve quickly.

Quick Start

Start debugging an Angular issue by enabling Angular DevTools in development mode, reproducing the bug, and following the four-phase workflow. Then apply the recommended checks and patterns to stabilize the app.

Frequently Asked Questions about debug:angular

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix ExpressionChangedAfterItHasBeenCheckedError in Angular?▼

To fix ExpressionChangedAfterItHasBeenCheckedError in Angular, follow a four-phase debugging workflow to reproduce, analyze, fix, and prevent the change-detection conflict. Use Angular DevTools and ng.probe to inspect components and isolate the root cause.

Why does my Angular app have dependency injection errors and circular dependencies?▼

Angular dependency injection errors and circular dependencies stem from misconfigured providers or mutual reliance. Resolve these DI errors by inspecting injector trees with Angular DevTools and following a structured debugging workflow to correct provider scopes.

How do I debug RxJS memory leaks in my Angular application?▼

Debug RxJS memory leaks in your Angular application by applying a structured debugging methodology to analyze observable subscriptions. Use browser console debugging utilities and Angular DevTools to track down and resolve unreleased subscriptions causing runtime leaks.

What is the best way to troubleshoot Angular lazy-loading failures and Zone.js issues?▼

The best way to troubleshoot Angular lazy-loading failures and Zone.js issues is using a structured debugging approach with Angular DevTools. Analyze NG error codes and Zone.js interactions to isolate module loading errors and stabilize runtime behavior.

Can I use ng.probe and Angular DevTools to diagnose production runtime issues?▼

Yes, you can use ng.probe and Angular DevTools to diagnose production runtime issues across Angular applications. The structured debugging methodology covers diagnosing DI errors, change-detection problems, and common NG error codes in both development and production contexts.

How do I resolve common NG error codes from NG0100 to NG0999?▼

Resolve common NG error codes from NG0100 to NG0999 by applying a structured four-phase debugging process to reproduce and analyze the runtime issue. Use browser console debugging utilities to inspect the specific error context and apply recommended checks to prevent regressions.