Practical MEAN Stack Interview Questions

Generics keep the result strongly typed. function groupBy<T, K extends keyof T>(items: T[], key: K): Record<string, T[]> { return items.reduce((acc, item) => { const group = String(item[key]); (acc[group] ||= []).push(item); return acc; }, {} as Record<string, T[]>); } interface Order { id: number; status: string } const byStatus = groupBy<Order, 'status'>(orders, 'status'); K extends keyof T ensures only real property names are accepted.

A generic wrapper avoids repeating pagination fields. export interface Paginated<T> { items: T[]; page: number; totalPages: number; } export interface Product { _id: string; name: string; price: number; tags?: string[]; } getProducts(page = 1): Observable<Paginated<Product>> { return this.http.get<Paginated<Product>>('/api/products', { params: { page } }); }

A type predicate narrows the union. type ApiError = { error: true; message: string }; type ApiSuccess<T> = { error: false; data: T }; type ApiResult<T> = ApiError | ApiSuccess<T>; function isApiError<T>(res: ApiResult<T>): res is ApiError { return res.error === true; } if (isApiError(result)) { console.error(result.message); } else { render(result.data); } Inside each branch TypeScript knows exactly which fields exist.

The never check makes the compiler flag unhandled cases. type Shape = { kind: 'circle'; r: number } | { kind: 'square'; side: number }; function area(s: Shape): number { switch (s.kind) { case 'circle': return Math.PI * s.r ** 2; case 'square': return s.side ** 2; default: { const unreachable: never = s; throw new Error(`Unknown shape ${unreachable}`); } } } Adding a triangle variant now causes a compile error until it is handled.

A typed debounce keeps argument types. function debounce<A extends unknown[]>(fn: (...args: A) => void, ms = 300) { let timer: ReturnType<typeof setTimeout> | undefined; return (...args: A) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), ms); }; } const search = debounce((term: string) => console.log('search', term), 400); search('ang'); In Angular you would usually use the RxJS debounceTime operator instead.

A typical strict configuration: { "compilerOptions": { "target": "ES2022", "module": "NodeNext", "moduleResolution": "NodeNext", "outDir": "dist", "rootDir": "src", "strict": true, "noUncheckedIndexedAccess": true, "esModuleInterop": true, "skipLibCheck": true, "sourceMap": true }, "include": ["src"] } noUncheckedIndexedAccess adds undefined to indexed lookups, catching missing keys.

Signals and built-in control flow keep it concise. import { Component, signal } from '@angular/core'; import { CurrencyPipe } from '@angular/common'; @Component({ selector: 'app-product-list', imports: [CurrencyPipe], template: ` @for (p of products(); track p.id) { <div class='card'>{{ p.name }} - {{ p.price | currency:'INR' }}</div> } @empty { <p>No products found</p> } ` }) export class ProductListComponent { products = signal([{ id: 1, name: 'Laptop', price: 55000 }]); }

The parent passes data in and listens for events. import { Component, input, output } from '@angular/core'; @Component({ selector: 'app-todo-item', template: ` <span>{{ title() }}</span> <button (click)='remove.emit(id())'>Delete</button> ` }) export class TodoItemComponent { id = input.required<number>(); title = input(''); remove = output<number>(); } // parent template // <app-todo-item [id]='t.id' [title]='t.title' (remove)='onRemove($event)' />

Host listeners handle the events. import { Directive, ElementRef, HostListener, inject, input } from '@angular/core'; @Directive({ selector: '[appHighlight]' }) export class HighlightDirective { private el = inject(ElementRef); color = input('yellow', { alias: 'appHighlight' }); @HostListener('mouseenter') onEnter() { this.el.nativeElement.style.backgroundColor = this.color(); } @HostListener('mouseleave') onLeave() { this.el.nativeElement.style.backgroundColor = ''; } } // usage: <p appHighlight='lightblue'>Hover me</p>

Pipes are standalone by default. import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'truncate' }) export class TruncatePipe implements PipeTransform { transform(value: string | null, limit = 50): string { if (!value) return ''; return value.length > limit ? value.slice(0, limit).trimEnd() + '...' : value; } } // add TruncatePipe to the component's imports, then: // {{ product.description | truncate:80 }} Because it is pure, it reruns only when the input string or limit changes.

Common commands: ng new shop-app --style=scss ng serve --open ng generate component features/product-list ng generate service core/auth ng generate guard core/auth --functional ng generate pipe shared/truncate ng build --configuration production ng test ng update @angular/core @angular/cli ng update applies official migrations automatically, which makes version upgrades much easier.

Cache the Observable with shareReplay so the API is called once. import { Injectable, inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable, shareReplay } from 'rxjs'; export interface Category { _id: string; name: string } @Injectable({ providedIn: 'root' }) export class CategoryService { private http = inject(HttpClient); private categories$?: Observable<Category[]>; getAll(): Observable<Category[]> { this.categories$ ??= this.http.get<Category[]>('/api/categories') .pipe(shareReplay({ bufferSize: 1, refCount: false })); return this.categories$; } }

app.routes.ts: import { Routes } from '@angular/router'; export const routes: Routes = [ { path: '', loadComponent: () => import('./home/home.component').then(m => m.HomeComponent) }, { path: 'products', loadChildren: () => import('./products/product.routes').then(m => m.PRODUCT_ROUTES) }, { path: 'login', loadComponent: () => import('./auth/login.component').then(m => m.LoginComponent) }, { path: '**', loadComponent: () => import('./not-found.component').then(m => m.NotFoundComponent) } ]; // app.config.ts providers: [provideRouter(routes, withComponentInputBinding())]

Return a UrlTree to redirect. import { inject } from '@angular/core'; import { CanActivateFn, Router } from '@angular/router'; import { AuthService } from './auth.service'; export const authGuard: CanActivateFn = (route, state) => { const auth = inject(AuthService); const router = inject(Router); return auth.isLoggedIn() ? true : router.createUrlTree(['/login'], { queryParams: { returnUrl: state.url } }); }; // { path: 'orders', canActivate: [authGuard], loadComponent: ... }

Guard factories keep it reusable. import { inject } from '@angular/core'; import { CanMatchFn, Router } from '@angular/router'; export const roleGuard = (role: string): CanMatchFn => () => { const auth = inject(AuthService); const router = inject(Router); return auth.user()?.role === role ? true : router.createUrlTree(['/forbidden']); }; export const routes = [ { path: 'admin', canMatch: [roleGuard('admin')], loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES) } ];

A functional resolver with error handling: import { inject } from '@angular/core'; import { ResolveFn, Router } from '@angular/router'; import { catchError, EMPTY } from 'rxjs'; export const productResolver: ResolveFn<Product> = (route) => { const router = inject(Router); return inject(ProductService).getById(route.paramMap.get('id')!).pipe( catchError(() => { router.navigate(['/not-found']); return EMPTY; }) ); }; // { path: 'products/:id', resolve: { product: productResolver }, loadComponent: ... } // with input binding: product = input.required<Product>();

Tokens carry non-class values. import { InjectionToken, inject, Injectable } from '@angular/core'; export interface AppConfig { apiUrl: string; pageSize: number } export const APP_CONFIG = new InjectionToken<AppConfig>('APP_CONFIG'); // app.config.ts providers: [{ provide: APP_CONFIG, useValue: { apiUrl: environment.apiUrl, pageSize: 20 } }] @Injectable({ providedIn: 'root' }) export class OrderService { private config = inject(APP_CONFIG); private http = inject(HttpClient); list() { return this.http.get(`${this.config.apiUrl}/orders`, { params: { limit: this.config.pageSize } }); } }

Signals keep simple state readable. import { Component, signal, computed, effect } from '@angular/core'; @Component({ selector: 'app-counter', template: ` <p>Count: {{ count() }} (double: {{ double() }})</p> <button (click)='increment()'>+</button> <button (click)='count.set(0)'>Reset</button> ` }) export class CounterComponent { count = signal(0); double = computed(() => this.count() * 2); constructor() { effect(() => console.log('count changed to', this.count())); } increment() { this.count.update((c) => c + 1); } }

switchMap cancels stale requests. export class SearchComponent { private api = inject(ProductService); search = new FormControl('', { nonNullable: true }); results = toSignal( this.search.valueChanges.pipe( debounceTime(300), map((t) => t.trim()), distinctUntilChanged(), filter((t) => t.length >= 2), switchMap((t) => this.api.search(t).pipe(catchError(() => of([])))) ), { initialValue: [] } ); } // template: <input [formControl]='search'> @for (p of results(); track p._id) {...}

Each request gets its own fallback. import { forkJoin, of, catchError } from 'rxjs'; loadDashboard() { return forkJoin({ sales: this.api.getSales().pipe(catchError(() => of(null))), orders: this.api.getRecentOrders().pipe(catchError(() => of([]))), users: this.api.getUserStats().pipe(catchError(() => of(null))) }); } dashboard = toSignal(this.loadDashboard()); // template: @if (dashboard(); as d) { ... d.sales ... } forkJoin emits once, after every inner Observable completes.

Expose read-only state and mutation methods. @Injectable({ providedIn: 'root' }) export class CartService { private items = signal<CartItem[]>([]); readonly cart = this.items.asReadonly(); readonly count = computed(() => this.items().reduce((n, i) => n + i.qty, 0)); readonly total = computed(() => this.items().reduce((s, i) => s + i.qty * i.price, 0)); add(product: Product) { this.items.update((list) => { const found = list.find((i) => i.id === product.id); return found ? list.map((i) => (i.id === product.id ? { ...i, qty: i.qty + 1 } : i)) : [...list, { ...product, qty: 1 }]; }); } remove(id: string) { this.items.update((l) => l.filter((i) => i.id !== id)); } }

The request reruns automatically when the id changes. import { Component, input } from '@angular/core'; import { httpResource } from '@angular/common/http'; @Component({ selector: 'app-product-detail', template: ` @if (product.isLoading()) { <p>Loading...</p> } @else if (product.error()) { <p>Could not load product</p> } @else if (product.value(); as p) { <h2>{{ p.name }}</h2> } ` }) export class ProductDetailComponent { id = input.required<string>(); product = httpResource<Product>(() => `/api/products/${this.id()}`); }

Typed controls and disabled submit while invalid. export class LoginComponent { private fb = inject(NonNullableFormBuilder); form = this.fb.group({ email: ['', [Validators.required, Validators.email]], password: ['', [Validators.required, Validators.minLength(8)]] }); submit() { if (this.form.invalid) return this.form.markAllAsTouched(); this.auth.login(this.form.getRawValue()).subscribe(); } } // template // <form [formGroup]='form' (ngSubmit)='submit()'> // <input formControlName='email'> // @if (form.controls.email.hasError('email')) { <small>Invalid email</small> } // <button [disabled]='form.invalid'>Login</button> // </form>

A ValidatorFn returns null or an error map. import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms'; export function strongPassword(): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const value = control.value as string; if (!value) return null; const ok = /[A-Z]/.test(value) && /\d/.test(value); return ok ? null : { weakPassword: true }; }; } // password: ['', [Validators.required, strongPassword()]] // @if (form.controls.password.hasError('weakPassword')) { ... }

Group validators see all child controls. export const passwordsMatch: ValidatorFn = (group: AbstractControl) => { const pass = group.get('password')?.value; const confirm = group.get('confirm')?.value; return pass && confirm && pass !== confirm ? { passwordMismatch: true } : null; }; form = this.fb.group( { password: ['', Validators.required], confirm: ['', Validators.required] }, { validators: passwordsMatch } ); // @if (form.hasError('passwordMismatch') && form.controls.confirm.touched) { ... }

Register with provideHttpClient(withInterceptors([authInterceptor])). export const authInterceptor: HttpInterceptorFn = (req, next) => { const auth = inject(AuthService); const router = inject(Router); const token = auth.token(); const authReq = token ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } }) : req; return next(authReq).pipe( catchError((err: HttpErrorResponse) => { if (err.status === 401) { auth.logout(); router.navigate(['/login']); } return throwError(() => err); }) ); };

Expose the array and helper methods. export class ContactFormComponent { private fb = inject(NonNullableFormBuilder); form = this.fb.group({ name: ['', Validators.required], phones: this.fb.array([this.fb.control('', Validators.pattern(/^\d{10}$/))]) }); get phones() { return this.form.controls.phones; } addPhone() { this.phones.push(this.fb.control('', Validators.pattern(/^\d{10}$/))); } removePhone(i: number) { this.phones.removeAt(i); } } // <div formArrayName='phones'> // @for (c of phones.controls; track $index) { // <input [formControlName]='$index'> <button type='button' (click)='removePhone($index)'>x</button> // } // </div>

Return an Observable and debounce the server call. export function emailTaken(api: UserService): AsyncValidatorFn { return (control: AbstractControl) => timer(400).pipe( switchMap(() => api.emailExists(control.value)), map((exists) => (exists ? { emailTaken: true } : null)), catchError(() => of(null)) ); } email = new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email], asyncValidators: [emailTaken(inject(UserService))], updateOn: 'blur' }); The control is PENDING while the check runs.

Generics type params and response bodies. import { Router, Request, Response } from 'express'; import { Product } from '../models/product.model'; const router = Router(); router.get('/:id', async (req: Request<{ id: string }>, res: Response) => { const product = await Product.findById(req.params.id).lean(); if (!product) { return res.status(404).json({ message: 'Product not found' }); } res.json(product); }); export default router; // app.use('/api/products', router);

Reusable middleware with typed output. import { z, ZodSchema } from 'zod'; import { RequestHandler } from 'express'; export const validateBody = (schema: ZodSchema): RequestHandler => (req, res, next) => { const parsed = schema.safeParse(req.body); if (!parsed.success) { return res.status(400).json({ errors: parsed.error.flatten().fieldErrors }); } req.body = parsed.data; next(); }; const createOrder = z.object({ items: z.array(z.object({ productId: z.string(), qty: z.number().int().min(1) })).min(1), address: z.string().min(10) }); router.post('/orders', validateBody(createOrder), ordersController.create);

proxy.conf.json in the Angular project: { "/api": { "target": "http://localhost:3000", "secure": false, "changeOrigin": true, "logLevel": "debug" } } angular.json, under serve options: "proxyConfig": "proxy.conf.json" Then call relative URLs in services, such as this.http.get('/api/products'), and run ng serve. The browser talks only to the dev server, so no CORS setup is needed locally.

API first, static files next, fallback last. import express from 'express'; import path from 'node:path'; const app = express(); app.use(express.json()); app.use('/api', apiRouter); const dist = path.join(process.cwd(), 'dist/shop/browser'); app.use(express.static(dist, { maxAge: '1y', index: false })); app.get('/*splat', (req, res) => { res.sendFile(path.join(dist, 'index.html')); }); app.listen(process.env.PORT || 3000); The named wildcard follows Express 5 path syntax.

Server side: io.on('connection', (socket) => { socket.on('join', (orderId) => socket.join(`order:${orderId}`)); }); // when status changes io.to(`order:${order.id}`).emit('status', { id: order.id, status: order.status }); Angular service: @Injectable({ providedIn: 'root' }) export class OrderSocketService { private socket = io(environment.wsUrl); watch(orderId: string) { this.socket.emit('join', orderId); return new Observable<OrderStatus>((sub) => { this.socket.on('status', (s) => sub.next(s)); return () => this.socket.off('status'); }); } }

Producer in the API, worker in a separate process. import { Queue, Worker } from 'bullmq'; const connection = { host: process.env.REDIS_HOST, port: 6379 }; export const emailQueue = new Queue('emails', { connection }); // in the signup controller await emailQueue.add('welcome', { to: user.email }, { attempts: 3, backoff: { type: 'exponential', delay: 2000 } }); // worker.ts new Worker('emails', async (job) => { await mailer.send(job.data.to, 'Welcome!', templates.welcome()); }, { connection }); Failed jobs retry automatically with backoff.

Chain query helpers and run count in parallel. const filter = { category: req.query.category, price: { $gte: Number(req.query.min) || 0 }, isActive: true }; const [items, total] = await Promise.all([ Product.find(filter) .select('name price images rating') .sort({ rating: -1, _id: 1 }) .skip((page - 1) * limit) .limit(limit) .lean(), Product.countDocuments(filter) ]); Adding _id to the sort keeps the order stable between pages.

Interface, methods type and schema together. import { Schema, model, Model } from 'mongoose'; import bcrypt from 'bcrypt'; interface IUser { name: string; email: string; password: string; role: 'user' | 'admin' } interface IUserMethods { comparePassword(plain: string): Promise<boolean> } type UserModel = Model<IUser, {}, IUserMethods>; const userSchema = new Schema<IUser, UserModel, IUserMethods>({ name: { type: String, required: true }, email: { type: String, required: true, unique: true, lowercase: true }, password: { type: String, required: true, select: false }, role: { type: String, enum: ['user', 'admin'], default: 'user' } }, { timestamps: true }); userSchema.method('comparePassword', function (plain: string) { return bcrypt.compare(plain, this.password); }); export const User = model<IUser, UserModel>('User', userSchema);

Group, sort, limit, then join. db.orders.aggregate([ { $match: { status: 'paid' } }, { $group: { _id: '$customerId', spend: { $sum: '$total' }, orders: { $sum: 1 } } }, { $sort: { spend: -1 } }, { $limit: 5 }, { $lookup: { from: 'users', localField: '_id', foreignField: '_id', as: 'customer' } }, { $unwind: '$customer' }, { $project: { _id: 0, name: '$customer.name', spend: 1, orders: 1 } } ]) Joining after $limit means only five lookups run.

withTransaction retries on transient errors. const session = await mongoose.startSession(); try { await session.withTransaction(async () => { const res = await Product.updateOne( { _id: productId, stock: { $gte: qty } }, { $inc: { stock: -qty } }, { session } ); if (res.modifiedCount === 0) throw new Error('Out of stock'); await Order.create([{ userId, productId, qty }], { session }); }); } finally { await session.endSession(); } Transactions require a replica set, which Atlas provides by default.

Text search with scores: db.articles.createIndex({ title: 'text', body: 'text' }, { weights: { title: 5, body: 1 } }) db.articles.find( { $text: { $search: 'angular signals' } }, { score: { $meta: 'textScore' }, title: 1 } ).sort({ score: { $meta: 'textScore' } }).limit(10) Weights make title matches rank higher. A collection can have only one text index, so include all searchable fields in it.

Useful diagnostic commands: db.orders.getIndexes() db.orders.find({ status: 'pending', city: 'Pune' }) .sort({ createdAt: -1 }) .explain('executionStats') db.setProfilingLevel(1, { slowms: 100 }) db.system.profile.find().sort({ ts: -1 }).limit(5) db.orders.createIndex({ status: 1, city: 1, createdAt: -1 }) Compare totalDocsExamined with nReturned before and after creating the index.

Test what the user sees. import { TestBed } from '@angular/core/testing'; import { CounterComponent } from './counter.component'; describe('CounterComponent', () => { it('increments when the button is clicked', async () => { const fixture = TestBed.createComponent(CounterComponent); await fixture.whenStable(); const el: HTMLElement = fixture.nativeElement; el.querySelector('button')!.click(); await fixture.whenStable(); expect(el.querySelector('p')!.textContent).toContain('Count: 1'); }); }); Standalone components need no testing module declarations.

Capture and flush the request. describe('ProductService', () => { let service: ProductService; let httpMock: HttpTestingController; beforeEach(() => { TestBed.configureTestingModule({ providers: [provideHttpClient(), provideHttpClientTesting()] }); service = TestBed.inject(ProductService); httpMock = TestBed.inject(HttpTestingController); }); it('fetches products', () => { service.getAll().subscribe((p) => expect(p.length).toBe(1)); const req = httpMock.expectOne('/api/products'); expect(req.request.method).toBe('GET'); req.flush([{ _id: '1', name: 'Pen' }]); httpMock.verify(); }); });

Extend the request type with the user. import jwt from 'jsonwebtoken'; import { Request, Response, NextFunction } from 'express'; export interface AuthRequest extends Request { user?: { id: string; role: string } } export function auth(req: AuthRequest, res: Response, next: NextFunction) { const token = req.headers.authorization?.split(' ')[1]; if (!token) return res.status(401).json({ message: 'Unauthorized' }); try { req.user = jwt.verify(token, process.env.JWT_SECRET!) as AuthRequest['user']; next(); } catch { res.status(401).json({ message: 'Token invalid or expired' }); } }

Build in Node, ship only static files. FROM node:22-alpine AS build WORKDIR /app COPY package*.json ./ RUN npm ci COPY . . RUN npx ng build --configuration production FROM nginx:alpine COPY nginx.conf /etc/nginx/conf.d/default.conf COPY --from=build /app/dist/shop/browser /usr/share/nginx/html EXPOSE 80 The final image contains no Node.js or source code. nginx.conf should include try_files $uri /index.html for Angular routes.

One domain, no CORS needed. server { listen 80; server_name shop.example.com; root /usr/share/nginx/html; location /api/ { proxy_pass http://api:3000; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location / { try_files $uri $uri/ /index.html; } location ~* \.(js|css|woff2)$ { expires 1y; add_header Cache-Control "public, immutable"; } } Angular hashed file names make long caching safe.

Typical CI for the frontend: name: web-ci on: [pull_request] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: node-version: 22 cache: npm - run: npm ci - run: npx ng lint - run: npx ng test --watch=false - run: npx ng build --configuration production - uses: actions/upload-artifact@v4 with: name: web-dist path: dist/ The artifact can be deployed by a later job after approval.