debug:angular

What this skill does

# Angular Debugging Guide

This guide provides a systematic approach to debugging Angular applications, covering common error patterns, debugging tools, and structured resolution phases.

## Common Error Patterns

### NullInjectorError

**Symptoms:**
- `NullInjectorError: No provider for <ServiceName>`
- `StaticInjectorError: No provider for <ServiceName>`
- Service injection fails at runtime

**Root Causes:**
1. Service not provided in any module or component
2. Circular dependency between services
3. Missing `@Injectable()` decorator
4. Service provided in wrong scope (lazy-loaded module vs root)

**Solutions:**
```typescript
// Solution 1: Provide in root (recommended for singletons)
@Injectable({
  providedIn: 'root'
})
export class MyService { }

// Solution 2: Provide in specific module
@NgModule({
  providers: [MyService]
})
export class FeatureModule { }

// Solution 3: Provide in component (new instance per component)
@Component({
  providers: [MyService]
})
export class MyComponent { }
```

### ExpressionChangedAfterItHasBeenCheckedError (NG0100)

**Symptoms:**
- Error appears only in development mode
- Typically occurs in `ngAfterViewInit` or `ngAfterContentInit`
- Value changes during change detection cycle

**Root Causes:**
1. Modifying component state in lifecycle hooks after change detection
2. Child component modifying parent state
3. Async operations completing during change detection

**Solutions:**
```typescript
// Solution 1: Use setTimeout to defer change
ngAfterViewInit() {
  setTimeout(() => {
    this.value = 'new value';
  });
}

// Solution 2: Use ChangeDetectorRef
constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.value = 'new value';
  this.cdr.detectChanges();
}

// Solution 3: Use async pipe (preferred for observables)
// In template: {{ value$ | async }}
value$ = this.service.getValue();
```

### Common NG Error Codes (NG0100-NG0999)

| Error Code | Description | Common Fix |
|------------|-------------|------------|
| NG0100 | Expression changed after checked | Use `detectChanges()` or `setTimeout` |
| NG0200 | Circular dependency in DI | Refactor service dependencies |
| NG0201 | No provider for service | Add to providers array or use `providedIn` |
| NG0300 | Multiple components match selector | Make selectors more specific |
| NG0301 | Export not found | Check export name in directive/component |
| NG0302 | Pipe not found | Import module containing pipe |
| NG0303 | No matching element | Check selector syntax |
| NG0500 | Hydration mismatch (SSR) | Ensure server/client render same content |
| NG0910 | Unsafe binding | Sanitize or use `bypassSecurityTrust*` |
| NG0912 | Component ID collision | Unique component selectors |

### RxJS Subscription Leaks

**Symptoms:**
- Memory leaks in long-running applications
- Console warnings about destroyed components
- Multiple HTTP requests for same data
- Performance degradation over time

**Detection:**
```typescript
// Use takeUntilDestroyed (Angular 16+)
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({...})
export class MyComponent {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    this.service.getData()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(data => this.data = data);
  }
}

// Legacy approach with Subject
private destroy$ = new Subject<void>();

ngOnInit() {
  this.service.getData()
    .pipe(takeUntil(this.destroy$))
    .subscribe();
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}
```

**RxJS Debugging Operators:**
```typescript
import { tap } from 'rxjs/operators';

this.data$.pipe(
  tap({
    next: v => console.log('Value:', v),
    error: e => console.error('Error:', e),
    complete: () => console.log('Complete')
  })
).subscribe();
```

### Lazy Loading Failures

**Symptoms:**
- `ChunkLoadError` in console
- Module fails to load on navigation
- Network errors for chunk files

**Common Causes:**
1. Incorrect path in `loadChildren`
2. Missing default export
3. Network/CDN issues
4. Cache issues after deployment

**Solutions:**
```typescript
// Correct lazy loading syntax (Angular 14+)
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module')
      .then(m => m.FeatureModule)
  },
  // Standalone components (Angular 15+)
  {
    path: 'standalone',
    loadComponent: () => import('./standalone/standalone.component')
      .then(c => c.StandaloneComponent)
  }
];

// Handle chunk load errors
// In app.component.ts or error handler
constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationError) {
      if (event.error.name === 'ChunkLoadError') {
        window.location.reload();
      }
    }
  });
}
```

### Zone.js Issues

**Symptoms:**
- Change detection not triggering
- UI not updating after async operations
- `runOutsideAngular` causing update issues

**Solutions:**
```typescript
constructor(private ngZone: NgZone) {}

// Force change detection inside Angular zone
ngOnInit() {
  someExternalLibrary.onEvent((data) => {
    this.ngZone.run(() => {
      this.data = data;
    });
  });
}

// Optimize by running outside zone (for performance-critical code)
runHeavyComputation() {
  this.ngZone.runOutsideAngular(() => {
    // Heavy computation that doesn't need CD
    const result = this.compute();

    // Re-enter zone when updating UI
    this.ngZone.run(() => {
      this.result = result;
    });
  });
}
```

### Zoneless Angular (Angular 18+)

```typescript
// For zoneless applications, use signals
import { signal, computed, effect } from '@angular/core';

@Component({
  selector: 'app-zoneless',
  template: `<p>Count: {{ count() }}</p>`
})
export class ZonelessComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(c => c + 1);
  }
}
```

## Debugging Tools

### Angular DevTools

**Installation:**
- Chrome: Install from [Chrome Web Store](https://chrome.google.com/webstore/detail/angular-devtools)
- Firefox: Install from [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/angular-devtools/)

**Features:**
1. **Component Explorer**: Inspect component tree, inputs, outputs, and state
2. **Profiler**: Record and analyze change detection cycles
3. **Dependency Injection Graph**: Visualize injector hierarchy
4. **Router Tree**: Debug routing configuration

**Requirements:**
- Application must be in development mode (`ng serve`)
- For deployed apps, build with `optimization: false`

### ng.probe() (Console Debugging)

```javascript
// In browser console

// Get component instance from DOM element
ng.getComponent($0);

// Get directive instances
ng.getDirectives($0);

// Get owning component
ng.getOwningComponent($0);

// Get injector
ng.getInjector($0);

// Trigger change detection
ng.applyChanges(component);

// Get context (for embedded views)
ng.getContext($0);

// Angular 14+ debugging utilities
const appRef = ng.getInjector(document.querySelector('app-root'))
  .get(ng.coreTokens.ApplicationRef);
appRef.tick(); // Force global change detection
```

### Source Maps Configuration

```json
// angular.json
{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "development": {
              "sourceMap": true,
              "optimization": false,
              "extractLicenses": false,
              "namedChunks": true
            },
            "production": {
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "hidden": true,
                "vendor": false
              }
            }
          }
        }
      }
    }
  }
}
```

### Custom Error Handler

```typescript
// global-error-handler.ts
import { ErrorHandler, Injectable, Injector } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

@Injectable()
export class Globa