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:

• Service not provided in any module or component

• Circular dependency between services

• Missing @Injectable() decorator

• Service provided in wrong scope (lazy-loaded module vs root)

Solutions:

// 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:

• Modifying component state in lifecycle hooks after change detection

• Child component modifying parent state

• Async operations completing during change detection

Solutions:

// 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:

// 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:

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:

• Incorrect path in loadChildren

• Missing default export

• Network/CDN issues

• Cache issues after deployment

Solutions:

// 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:

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+)

// 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

• Firefox: Install from Firefox Add-ons

Features:

• Component Explorer: Inspect component tree, inputs, outputs, and state

• Profiler: Record and analyze change detection cycles

• Dependency Injection Graph: Visualize injector hierarchy

• 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)

// 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

// 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

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

@Injectable() export class GlobalErrorHandler implements ErrorHandler { constructor(private injector: Injector) {}

handleError(error: Error | HttpErrorResponse): void { if (error instanceof HttpErrorResponse) { // Server error console.error('HTTP Error:', error.status, error.message); } else { // Client error console.error('Client Error:', error.message); console.error('Stack:', error.stack); }

// Log to external service
const loggingService = this.injector.get(LoggingService);
loggingService.logError(error);

} }

// app.module.ts @NgModule({ providers: [ { provide: ErrorHandler, useClass: GlobalErrorHandler } ] }) export class AppModule { }

HTTP Interceptor for Debugging

@Injectable() export class DebugInterceptor implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const started = Date.now();

return next.handle(req).pipe(
  tap({
    next: (event) => {
      if (event instanceof HttpResponse) {
        const elapsed = Date.now() - started;
        console.log(`${req.method} ${req.urlWithParams} - ${elapsed}ms`);
      }
    },
    error: (error) => {
      console.error(`${req.method} ${req.urlWithParams} - Error:`, error);
    }
  })
);

} }

The Four Phases of Angular Debugging

Phase 1: Reproduce and Isolate

Objective: Consistently reproduce the issue and narrow down the scope.

Steps:

• Reproduce the error - Get exact steps to trigger the issue

• Check the console - Note full error message and stack trace

• Identify the component - Which component/service is affected?

• Check recent changes - Use git diff to see what changed

Commands:

Check recent changes

git diff HEAD~5 --name-only

Check for TypeScript errors

ng build --configuration development 2>&1 | head -50

Check for lint issues

ng lint

Console Investigation:

// Add strategic logging console.group('Component State'); console.log('Inputs:', this.inputValue); console.log('State:', this.state); console.trace('Call stack'); console.groupEnd();

Phase 2: Analyze the Error

Objective: Understand exactly what is failing and why.

For DI Errors:

// Check injector hierarchy const injector = TestBed.inject(Injector); console.log('Providers:', injector);

// Verify service is provided try { const service = TestBed.inject(MyService); console.log('Service found:', service); } catch (e) { console.error('Service not found:', e); }

For Change Detection Errors:

// Enable change detection debugging import { enableDebugTools } from '@angular/platform-browser';

// In main.ts platformBrowserDynamic().bootstrapModule(AppModule) .then(ref => { const appRef = ref.injector.get(ApplicationRef); const componentRef = appRef.components[0]; enableDebugTools(componentRef); // Access via: window.ng.profiler.timeChangeDetection() });

For Template Errors:

// Use safe navigation operator {{ user?.profile?.name }}

// Use @if with else block (Angular 17+) @if (user) { <p>{{ user.name }}</p> } @else { <p>Loading...</p> }

// Use *ngIf with ng-template (legacy) <p *ngIf="user; else loading">{{ user.name }}</p> <ng-template #loading>Loading...</ng-template>

Phase 3: Apply the Fix

Objective: Implement and verify the solution.

Fix Patterns:

// Pattern 1: Safe observable handling this.data$ = this.service.getData().pipe( catchError(error => { console.error('Data fetch failed:', error); return of(null); // Return fallback }), shareReplay(1) // Cache for multiple subscribers );

// Pattern 2: Proper initialization @Input() set items(value: Item[]) { this._items = value ?? []; this.updateView(); } private _items: Item[] = [];

// Pattern 3: OnPush with immutability @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) export class OptimizedComponent { @Input() data!: ReadonlyArray<Item>;

updateData() { // Create new reference to trigger CD this.data = [...this.data, newItem]; } }

Verify the Fix:

Run affected tests

ng test --include="**/affected.component.spec.ts"

Run e2e tests

ng e2e --spec="affected.e2e-spec.ts"

Build to check for compilation errors

ng build --configuration production

Phase 4: Prevent Regression

Objective: Add tests and monitoring to prevent recurrence.

Write Targeted Tests:

describe('BugfixComponent', () => { it('should handle null input gracefully', () => { component.data = null; fixture.detectChanges(); expect(component.displayData).toEqual([]); });

it('should unsubscribe on destroy', () => { const subscription = component['subscription']; spyOn(subscription, 'unsubscribe'); component.ngOnDestroy(); expect(subscription.unsubscribe).toHaveBeenCalled(); });

it('should handle HTTP errors', fakeAsync(() => { spyOn(service, 'getData').and.returnValue( throwError(() => new Error('Network error')) ); component.loadData(); tick(); expect(component.error).toBe('Failed to load data'); })); });

Add Error Boundary:

// error-boundary.component.ts @Component({ selector: 'app-error-boundary', template: @if (hasError) { <div class="error-fallback"> <h2>Something went wrong</h2> <button (click)="retry()">Retry</button> </div> } @else { <ng-content></ng-content> } }) export class ErrorBoundaryComponent implements OnInit, ErrorHandler { hasError = false;

handleError(error: Error): void { this.hasError = true; console.error('Error caught:', error); }

retry(): void { this.hasError = false; } }

Quick Reference Commands

Development

Start development server

ng serve

Start with specific configuration

ng serve --configuration=development

Start with SSL

ng serve --ssl

Open browser automatically

ng serve --open

Specify port

ng serve --port 4201

Disable host check (for mobile testing)

ng serve --host 0.0.0.0 --disable-host-check

Building

Development build (with source maps)

ng build --configuration development

Production build

ng build --configuration production

Build with stats for bundle analysis

ng build --stats-json

Analyze bundle

npx webpack-bundle-analyzer dist/my-app/stats.json

Testing

Run all tests

ng test

Run tests once (CI mode)

ng test --no-watch --code-coverage

Run specific test file

ng test --include="**/my.component.spec.ts"

Run with specific browsers

ng test --browsers=ChromeHeadless

Debug tests in browser

ng test --browsers=Chrome

E2E tests

ng e2e

Linting and Code Quality

Run ESLint

ng lint

Fix auto-fixable issues

ng lint --fix

Check specific files

ng lint --files="src/app/my.component.ts"

Generating Code

Generate component with tests

ng generate component my-component

Generate service

ng generate service my-service

Generate module with routing

ng generate module my-module --routing

Dry run (preview changes)

ng generate component my-component --dry-run

Cache Management

Clear Angular cache

ng cache clean

Clear npm cache

npm cache clean --force

Reinstall dependencies

rm -rf node_modules package-lock.json npm install

Debugging Specific Issues

Check Angular version

ng version

Update Angular

ng update @angular/core @angular/cli

Check for outdated packages

npm outdated

Check TypeScript configuration

npx tsc --showConfig

Check for circular dependencies

npx madge --circular src/

Profile memory usage

node --inspect node_modules/.bin/ng serve

Performance Debugging

Profiling Change Detection

// Enable profiling in main.ts import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

platformBrowserDynamic().bootstrapModule(AppModule) .then(moduleRef => { const appRef = moduleRef.injector.get(ApplicationRef); const componentRef = appRef.components[0];

// Enable debug tools
enableDebugTools(componentRef);

// In console: ng.profiler.timeChangeDetection()

});

OnPush Optimization

@Component({ changeDetection: ChangeDetectionStrategy.OnPush }) export class PerformantComponent { // Use signals (Angular 16+) for reactive state count = signal(0); doubled = computed(() => this.count() * 2);

// Or use observables with async pipe data$ = this.service.getData().pipe( shareReplay({ bufferSize: 1, refCount: true }) ); }

TrackBy for Lists

@Component({ template: @for (item of items; track item.id) { <app-item [item]="item" /> } }) export class ListComponent { items: Item[] = [];

// Legacy ngFor syntax trackById(index: number, item: Item): number { return item.id; } }

Resources

• Angular Error Encyclopedia

• Angular DevTools Documentation

• Angular Error Handling Best Practices

• RxJS Debugging Guide

• Zone.js Documentation