Ace Your Interviews 🎯

MongoDB (document database), Express.js (Node.js web framework), Angular (frontend application framework), Node.js (JavaScript server runtime). MongoDB stores data, Express + Node.js build the REST API, Angular renders the SPA frontend with TypeScript.

React is a UI library — you choose your own routing, HTTP client, state management, and form handling. Angular is a complete framework that ships with all of these: Router, HttpClient, ReactiveFormsModule, and DI system. Angular enforces architectural structure; React gives flexibility. Enterprise teams prefer Angular's consistency.

TypeScript is a typed superset of JavaScript that compiles to plain JS. Angular requires it because decorators (@Component, @Injectable, @NgModule) are a TypeScript feature. TypeScript's compile-time type checking catches bugs before runtime — critical for large Angular applications.

An Observable is an RxJS stream that emits values over time. Angular's HttpClient returns Observables for HTTP calls. Components subscribe to receive data. Unlike Promises (single value), Observables can emit multiple values and support operators like map, filter, switchMap to transform streams.

A class decorated with @NgModule that declares components, directives, pipes (declarations), imports other modules (imports), exports components for other modules (exports), and registers services (providers). AppModule is the root — every feature should have its own module, ideally lazy-loaded.

Angular's DI system provides instances of services to components automatically. When a component declares a service in its constructor, Angular's injector looks it up and provides the singleton instance. This decouples components from service creation and makes testing trivial via mock injection.

Template-Driven forms define logic in HTML with two-way binding [(ngModel)] — simple but hard to test and type-check. Reactive Forms define the form model in TypeScript with FormGroup and FormControl — testable, type-safe, and composable. Always use Reactive Forms in production MEAN apps.

Cross-Origin Resource Sharing — browsers block requests from Angular (localhost:4200) to Express (localhost:5000) without explicit CORS headers. Install the cors npm package on Express: app.use(cors({ origin: 'http://localhost:4200' })). In production, set origin to the Angular app's deployed domain.

A service that implements HttpInterceptor to intercept outgoing HTTP requests or incoming responses. Used to attach JWT tokens to every request (AuthInterceptor), handle 401 errors globally (redirect to login), log API timing, or transform responses. Define once in AppModule providers — applies automatically to all HttpClient calls.

A class implementing CanActivate, CanLoad, or CanDeactivate that Angular Router calls before allowing navigation. AuthGuard blocks unauthenticated users from protected routes. RoleGuard restricts routes by user role. canLoad prevents lazy-loaded module bundles from even downloading for unauthorized users.

User action in Angular component → service method called → HttpClient creates HTTP request → AuthInterceptor attaches JWT → request reaches Express → middleware pipeline runs (CORS, auth verify, body parse, validate) → route handler executes → Mongoose queries MongoDB → Express sends JSON → Observable emits → Angular component subscription handler updates state → template re-renders via change detection.

The async pipe subscribes to an Observable in the template and auto-unsubscribes when the component is destroyed, eliminating memory leaks. It also triggers OnPush change detection automatically. Manual subscribe requires explicit ngOnDestroy cleanup with takeUntil or Subscription.unsubscribe().

switchMap: cancels the previous inner Observable when a new emission arrives — ideal for HTTP search (only last query matters). mergeMap: runs all inner Observables concurrently — for parallel independent operations. concatMap: queues inner Observables sequentially — for ordered operations like uploading files one by one.

Backend: accept page and limit query params, use Mongoose .skip((page-1)*limit).limit(limit), return total count. Frontend: Angular component tracks currentPage in a BehaviorSubject, passes it as HttpParams, subscribes to paginated results, renders Angular Material Paginator or custom pagination UI.

populate() replaces an ObjectId reference field with the actual referenced document — equivalent to a SQL JOIN. Post.find().populate('author', 'name email') replaces the author ObjectId with the full User object containing only name and email. Multiple populations are possible in one query.

OnPush tells Angular to only re-render a component when its @Input references change or an Observable it subscribes to emits (via async pipe). Default change detection checks every component on every event, which is expensive. Apply OnPush to list items, data display components, and any component that doesn't need to react to external events.

Express: centralized 4-parameter error middleware catches all next(err) calls and returns consistent JSON error shapes. Angular: ErrorInterceptor (HTTP Interceptor) catches all HTTP errors globally — shows toasts for 4xx, redirects for 401, logs for 5xx. Angular's ErrorHandler class can catch runtime Angular errors globally.

Lazy loading delays downloading a feature module's JavaScript until the user navigates to that route. The initial bundle only contains AppModule and immediately-needed code. A 10-feature app might reduce initial bundle from 2MB to 400KB. Configure with loadChildren in the router — Angular CLI automatically creates separate chunks.

In a monorepo, create a /shared folder with interfaces (Product, User, ApiResponse). Angular imports from '../../shared/types' and Express imports from '../shared/types'. Both compile to JavaScript separately, but development-time type checking uses the same interface definitions.

HTTP Interceptor catches all 401 responses globally. In the error handler: clear token from localStorage, call AuthService.logout() which sets currentUser BehaviorSubject to null, and navigate to /login. This ensures any expired-token API call across any service in the app triggers the same clean logout flow.

Monorepo with Nx. Core feature module pattern — each team owns a lazy-loaded feature module with its own routing, NgRx store slice, services, and components. Shared module for reusable UI. CoreModule for singletons (auth, logging, notification). Strict linting (Angular ESLint), module boundary enforcement, shared TypeScript path aliases, and CI that runs affected tests only.

NgRx implements Redux for Angular: single immutable state tree, unidirectional data flow. Actions: plain objects describing events. Reducers: pure functions that compute new state from action + current state. Selectors: memoized state queries. Effects: RxJS-based async operations (API calls). Use NgRx when state is shared across unrelated components, mutations come from multiple sources, or debugging with time-travel is valuable.

Angular Universal adds Server-Side Rendering (SSR) — Node.js pre-renders Angular components to HTML before sending to the browser. Benefits: SEO (search engines see real content not empty HTML), faster First Contentful Paint. MEAN apps with Angular Universal run the Angular app on the Express server for first render, then hydrate the browser app. Required for marketing pages and content-driven MEAN apps.

Add Socket.io to Express. Create an Angular SocketService that wraps socket.io-client — connect in the service, expose typed Observables using fromEvent(). Components inject SocketService and subscribe to room-specific or user-specific event streams. NgRx Effects can dispatch actions on socket emissions to update the global store. For horizontal scaling, use socket.io-redis adapter.

User documents contain an orgId field. Every Mongoose query is scoped with { orgId: req.user.orgId }. A tenant middleware attaches orgId from the JWT to req. At the Angular level, the auth token carries orgId and Angular guards prevent cross-tenant navigation. Data isolation is enforced at the MongoDB query layer — never trust Angular-sent tenant IDs alone.

Fetching N documents and running a separate query per document for related data results in N+1 queries. Fix with populate() (MongoDB $lookup under the hood — one query). For aggregations, use the $lookup stage in MongoDB's aggregation pipeline. For many-to-many relationships, batch with $in instead of individual findById calls.

Backend: Jest + Supertest — make real HTTP requests against Express, use a test MongoDB database (mongodb-memory-server), mock external services. Frontend: Angular Testing Module for unit tests (component + service isolation with TestBed), HttpClientTestingModule to mock HTTP calls. E2E: Cypress or Playwright for full user flow tests across the deployed stack.

Angular 14+ standalone components remove NgModule dependency. Migration: add standalone: true to components, replace NgModule imports with direct imports in the component decorator, update routing to use loadComponent for lazy loading. Angular's ng generate now creates standalone by default. NgRx and HttpClient work with standalone — use importProvidersFrom in bootstrapApplication.

Horizontal Node.js scaling with PM2 cluster mode or Kubernetes pods behind NGINX load balancer. MongoDB Atlas with read replicas — route read-heavy queries to replicas. Redis for session caching, rate limiting state, and frequently-queried data. Bull queues for background jobs (email, reports, webhooks). CDN for Angular static assets. Database indexes on all filter fields. Connection pooling. Circuit breakers for downstream services.

Subject: emits to current subscribers only — new subscribers miss previous emissions. BehaviorSubject: requires an initial value, emits the last value to new subscribers immediately — ideal for auth state, current user, cart count. ReplaySubject(n): replays the last n emissions to new subscribers — useful for caching the last n events or UI notifications that late-rendered components need to display.