d-subrahmanyam/angular

Angular Core Knowledge

Full Reference: See advanced.md for WebSocket service with signals, RxJS WebSocketSubject, Socket.IO integration, and room management patterns.

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: angular for comprehensive documentation.

When NOT to Use This Skill

Skip this skill when:

• Working with AngularJS (1.x) - legacy framework
• Building React applications (use frontend-react)
• Using Vue framework (use vue-composition)
• Working with Svelte (use svelte)
• Need only TypeScript without framework (use typescript)

Standalone Components (Angular 17+)

import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-counter',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="increment()">
      Count: {{ count() }}
    </button>
    <p>Double: {{ double() }}</p>
  `
})
export class CounterComponent {
  count = signal(0);
  double = computed(() => this.count() * 2);

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

Signals (Angular 16+)

| API | Purpose | |-----|---------| | signal() | Create reactive value | | computed() | Derived signal | | effect() | Side effects | | input() | Signal-based input | | output() | Signal-based output |

Dependency Injection

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  getUsers() {
    return this.http.get<User[]>('/api/users');
  }
}

Key Patterns

• Prefer standalone components
• Use signals over RxJS for simple state
• inject() function over constructor injection
• Lazy load routes for performance

Anti-Patterns

| Anti-Pattern | Why It's Bad | Correct Approach | |--------------|--------------|------------------| | Using NgModules for new apps | Outdated, verbose | Use standalone components | | Constructor injection only | Less flexible | Use inject() function | | Not using OnPush change detection | Poor performance | Use OnPush + signals | | Subscribing without unsubscribe | Memory leaks | Use async pipe or takeUntilDestroyed() | | Inline styles with CSP | Security issues | Use external stylesheets | | Not lazy loading routes | Large bundle size | Lazy load feature modules |

Quick Troubleshooting

| Issue | Likely Cause | Solution | |-------|--------------|----------| | Expression changed after check | Modifying state during CD | Use ChangeDetectorRef.detectChanges() | | Service not found | Wrong providedIn scope | Check @Injectable({ providedIn: 'root' }) | | Route not loading | Missing lazy load syntax | Use loadChildren: () => import() | | Signal not updating view | Not using signal setter | Use .set() or .update() | | Form not reactive | Using template-driven forms | Use ReactiveFormsModule | | HTTP call not firing | Forgot to subscribe | Subscribe to Observable |

Production Readiness

Security

// HTTP Interceptor for auth
export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = inject(AuthService).getToken();
  if (token) {
    req = req.clone({
      setHeaders: { Authorization: `Bearer ${token}` }
    });
  }
  return next(req);
};

Error Handling

// Global error handler
@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  private errorService = inject(ErrorTrackingService);

  handleError(error: Error): void {
    console.error('Unhandled error:', error);
    this.errorService.trackError(error);
  }
}

// Provide in app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
  ]
};

Performance

// Lazy loading routes
export const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/routes').then(m => m.ADMIN_ROUTES),
    canActivate: [authGuard],
  },
];

// Change detection optimization
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  ...
})
export class OptimizedComponent {
  data = signal<Data | null>(null);
}

// Defer loading
@Component({
  template: `
    @defer (on viewport) {
      <heavy-component />
    } @placeholder {
      <skeleton-loader />
    }
  `
})
export class DeferredComponent {}

Testing

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { provideHttpClientTesting } from '@angular/common/http/testing';

describe('UserComponent', () => {
  let component: UserComponent;
  let fixture: ComponentFixture<UserComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [UserComponent],
      providers: [provideHttpClientTesting()]
    }).compileComponents();

    fixture = TestBed.createComponent(UserComponent);
    component = fixture.componentInstance;
  });

  it('should update signal', () => {
    component.count.set(5);
    expect(component.count()).toBe(5);
    expect(component.double()).toBe(10);
  });
});

Monitoring Metrics

| Metric | Target | |--------|--------| | First Contentful Paint | < 1.5s | | Largest Contentful Paint | < 2.5s | | Bundle size (initial) | < 200KB | | Time to Interactive | < 3s |

Checklist

• [ ] Standalone components (Angular 17+)
• [ ] Signals for reactive state
• [ ] OnPush change detection
• [ ] Lazy loaded routes
• [ ] @defer for heavy components
• [ ] Virtual scrolling for lists
• [ ] Global error handler
• [ ] HTTP interceptors for auth
• [ ] SSR with Angular Universal
• [ ] Zone-less for max performance

Reference Documentation

Deep Knowledge: Use mcp__documentation__fetch_docs with technology: angular for comprehensive documentation.

• Signals Cheatsheet
• Component Patterns