MEAN Stack Interview Questions &amp; Answers

Show answer

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Angular is written in TypeScript and relies on its types and decorators for components, dependency injection and templates. Types catch mistakes at compile time, improve editor autocompletion and make refactoring large codebases safer. In MEAN projects, you can share interfaces such as User or Order between the Express API and the Angular client.

What is the difference between an interface and a type alias in TypeScript?

Show answer

Both describe the shape of data. Interfaces are open, so declarations with the same name merge, and they can be extended with extends, which suits object models and class contracts. Type aliases can describe unions, intersections, tuples, primitives and mapped types, such as type Status = 'active' | 'blocked'. Many teams use interfaces for object shapes like API models and type aliases for unions and utility compositions.

What are decorators in TypeScript and how does Angular use them?

Show answer

Decorators are functions that attach metadata or behaviour to classes, properties, methods or parameters using the @ syntax. Angular uses them to mark classes as framework building blocks: @Component, @Directive, @Pipe and @Injectable, along with property decorators like @Input, @Output, @ViewChild and @HostListener. Angular's compiler reads this metadata at build time to generate efficient rendering and dependency injection code.

Explain optional chaining and nullish coalescing with examples.

Show answer

Optional chaining (?.) stops evaluation and returns undefined if the value before it is null or undefined, so user?.address?.city never throws. Nullish coalescing (??) provides a fallback only for null or undefined, unlike || which also replaces 0, empty string and false. So settings.pageSize ?? 10 keeps a real value of 0. Both work in TypeScript and in Angular templates.

What is the difference between an Observable and a Promise?

Show answer

A Promise represents one future value, starts executing immediately when created and cannot be cancelled natively. An Observable can emit zero, one or many values over time, is lazy so nothing happens until you subscribe, and can be cancelled by unsubscribing. Observables also offer operators like map, filter, debounceTime and switchMap. Angular's HttpClient, router events and reactive forms all expose Observables.

An API sometimes returns null for a nested field and the Angular app crashes with cannot read properties of undefined. How do you fix it properly?

Show answer

Model the API response accurately in TypeScript, marking the field as optional or nullable, and keep strictNullChecks on so the compiler forces you to handle it. Use optional chaining in code and templates, provide defaults with ??, and show a fallback in the UI with @if. Also agree with the backend team on the contract, and validate responses at the boundary if the data is untrusted.

You need a dropdown value that can only be 'pending', 'shipped' or 'delivered'. How do you model it so invalid values are impossible?

Show answer

Use a string literal union, type OrderStatus = 'pending' | 'shipped' | 'delivered', or a const array with as const and derive the type from it, so the list can also render the dropdown options. Type the component property and API model with OrderStatus. The compiler then rejects typos like 'shiped'. On the backend, mirror the same values with a Mongoose enum validator.

Define TypeScript interfaces for a paginated API response and use them in a service method.

Show answer

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 } }); }

Tell me about a time strong typing helped you catch a bug before it reached production.

Show answer

Situation: we renamed the field amount to totalAmount in the orders API. Task: update the Angular app before release. Action: because our shared Order interface was typed and strict templates were on, the build failed in eleven places, including a payment summary I would have missed. I fixed each usage and added the change to the API changelog. Result: the release went out with no broken screens.

Explain the any, unknown and never types in TypeScript.

Show answer

any switches off type checking, so any operation is allowed and errors move to runtime. unknown also accepts any value but forces you to narrow it with typeof, instanceof or a type guard before using it, making it the safe choice for parsed JSON or caught errors. never represents values that never occur, such as a function that always throws, and is used in exhaustive switch checks.

What are generics in TypeScript? Give an Angular-related example.

Show answer

Generics let you write reusable code that works with many types while keeping type safety, using type parameters like T. For example, an ApiResponse<T> interface can wrap any payload, and a service method get<T>(url: string): Observable<T> returns correctly typed data. Angular's HttpClient.get<User[]>() uses generics so the component knows it receives an array of users, without casting.

What are TypeScript utility types such as Partial, Pick, Omit and Record used for?

Show answer

Utility types transform existing types instead of duplicating them. Partial<User> makes all fields optional, useful for update payloads. Pick<User, 'id' | 'name'> selects fields, and Omit<User, 'password'> removes them, handy for safe API responses. Record<string, number> describes an object map with typed keys and values. Readonly<T> and Required<T> are also common, and they keep frontend and backend models consistent.

What is type narrowing and what are type guards?

Show answer

Narrowing is TypeScript refining a broad type to a more specific one inside a code block based on checks. typeof, instanceof, the in operator, equality checks and discriminated union tags all narrow types. A custom type guard is a function returning a predicate like value is Admin, which tells the compiler the type after the check. This makes handling union types, such as API success or error responses, safe.

What do the strict compiler options in tsconfig.json do?

Show answer

Setting strict to true enables a family of checks, including strictNullChecks, so null and undefined must be handled explicitly; noImplicitAny, which errors on untyped values; strictPropertyInitialization, which requires class fields to be initialised; and strictFunctionTypes. New Angular projects enable strict mode and strict templates by default, which catches many bugs early, though migrating an old non-strict project needs gradual fixes.

A teammate uses any everywhere to silence TypeScript errors. How would you address it?

Show answer

Explain that any hides real bugs and removes autocompletion, then show concrete fixes: proper interfaces for API models, unknown with narrowing for untrusted data, and generics for reusable helpers. Enable the noImplicitAny compiler option and the ESLint no-explicit-any rule as a warning, fix the most critical files first, and add a review guideline. Keep the conversation constructive by pairing on one module together.

Write a generic TypeScript function that groups an array of items by a key.

Show answer

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.

Write a custom type guard to check whether an API response is an error.

Show answer

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.

Write a debounced search helper in TypeScript using a closure.

Show answer

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.

Show the tsconfig settings you would enable for a strict Node.js Express API.

Show answer

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.

How do you approach learning a new framework version or language feature on the job?

Show answer

Situation: our team decided to adopt Angular signals in new features. Task: I had to use them in a sprint while still delivering. Action: I read the official guide, built a small sample, compared it with our RxJS patterns, then implemented one component and asked a senior to review. I shared a short note with examples for the team. Result: my component became the reference pattern for later features.

How do you set and enforce TypeScript coding standards across a development team?

Show answer

Situation: our MEAN team had inconsistent code, with some files strict and others full of any. Task: as a senior developer I was asked to standardise it. Action: I proposed a shared tsconfig with strict mode, ESLint with typescript-eslint rules, Prettier and a pre-commit hook, discussed exceptions with the team, and fixed violations module by module. Result: review comments on style dropped sharply and type-related bugs in QA reduced.

What are discriminated unions and why are they useful?

Show answer

A discriminated union is a union of object types that share a literal property, the tag, such as type Result = { status: 'ok'; data: User } | { status: 'error'; message: string }. Checking result.status narrows the type, so TypeScript knows which fields exist in each branch. Combined with a never check in the default case, the compiler warns you when a new variant is added but not handled.

Frontend and backend models keep drifting apart, causing runtime bugs. How would you keep them in sync in a MEAN project?

Show answer

Share types from a single source. In a monorepo, for example with Nx, put DTO interfaces in a shared library used by both the Express API and Angular. Alternatively generate an OpenAPI spec from the backend and generate Angular client types from it, or define schemas once with zod and infer types. Add contract tests in CI so a breaking change fails the build.

You are migrating a large JavaScript Node.js codebase to TypeScript. How would you approach it?

Show answer

Migrate gradually. Add TypeScript with allowJs so JS and TS files coexist, start with loose settings and turn on strict options step by step. Convert leaf modules such as utilities and models first, then services and routes. Install type packages like @types/express, define shared interfaces for request and response shapes, and run type checks in CI. Avoid a big-bang rewrite that blocks feature work.

Write an exhaustive switch over a union type using never.

Show answer

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.

What is Angular and how is it different from a library like React?

Show answer

Angular is a complete, opinionated front-end framework maintained by Google for building single-page applications in TypeScript. It includes routing, forms, an HTTP client, dependency injection, testing tools and a CLI out of the box, so teams follow a consistent structure. React is a UI library and relies on third-party choices for routing and state. Angular's structure suits large enterprise teams and long-lived projects.

What is an Angular component and what are its main parts?

Show answer

A component controls a piece of the screen. It is a TypeScript class decorated with @Component, which provides a selector used as an HTML tag, a template or templateUrl for the view, styles or styleUrl for scoped CSS, and imports for other standalone components, directives and pipes it uses. The class holds data and event handlers, and the template binds to them.

What are standalone components and why are they now the default?

Show answer

Standalone components declare their own dependencies in an imports array instead of belonging to an NgModule. Since Angular 19 they are the default, and the CLI generates them without NgModules. They reduce boilerplate, make lazy loading simpler with loadComponent, improve tree shaking and make components easier to understand and test. Applications bootstrap with bootstrapApplication and configure providers in app.config.ts.

Explain the four types of data binding in Angular.

Show answer

Interpolation, {{ value }}, displays component data as text. Property binding, [src]='imageUrl', sets a DOM or component property. Event binding, (click)='save()', calls a method when an event fires. Two-way binding, [(ngModel)]='name' or [(value)] with a model input, combines property and event binding so the view and component stay in sync. Data flows one way by default, which keeps changes predictable.

What is the new built-in control flow syntax in Angular templates?

Show answer

Modern Angular uses blocks instead of structural directives: @if with @else if and @else for conditions, @for with a required track expression and an optional @empty block for lists, and @switch with @case and @default. The syntax is built into the compiler, needs no imports, is easier to read and is faster than *ngIf and *ngFor. The CLI provides a migration schematic for older templates.

How do parent and child components communicate in Angular?

Show answer

A parent passes data down through inputs, declared with the input() function or the @Input decorator, and the child notifies the parent through outputs, declared with output() or @Output with an EventEmitter. For two-way binding, model() creates a writable input. A parent can access a child directly using viewChild. For unrelated components, use a shared service holding a signal or a BehaviorSubject.

The same card layout with an image, title and actions is copied across ten pages. How would you refactor it?

Show answer

Create a reusable standalone card component with inputs for title, image and data, and use content projection with ng-content and named slots, like select='[card-actions]', so each page can pass its own buttons. Put shared styles in the component. Add a directive or pipe for repeated formatting. This reduces duplication, keeps styling consistent and makes future design changes a one-place edit.

An Angular page needs to show different content for admin and normal users. How would you implement it in the template?

Show answer

Expose the current user's role from an auth service as a signal and read it in the component with a computed value such as isAdmin. In the template, use @if (isAdmin()) to render admin sections and @else for the normal view, or create a small structural directive for permission checks if this repeats. Remember to also protect routes with guards and enforce permissions on the Express API.

Write a standalone Angular component that displays a list of products using @for.

Show answer

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 }]); }

Write a custom pure pipe that shortens long text with an ellipsis.

Show answer

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.

List the Angular CLI commands you use most often in a project.

Show answer

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.

Tell me about a time you had to understand a large unfamiliar Angular codebase quickly.

Show answer

Situation: I joined a project with over 300 components and a bug fix due in three days. Task: understand the order module fast. Action: I read the routing configuration to map features, used Angular DevTools to inspect the component tree and state, traced the service calls with network logs, and asked a teammate for a thirty-minute walkthrough. Result: I fixed the bug in two days and wrote a short module guide.

Why do you want to work with the MEAN stack and Angular specifically?

Show answer

I like that Angular gives a complete, structured framework with TypeScript, dependency injection, routing and forms built in, so large teams write consistent code. Combined with Node.js, Express and MongoDB, I can build full features in one language family. Many enterprise and IT service projects in India use Angular, and I want to grow as a full stack developer who builds maintainable business applications.

What are Angular's lifecycle hooks and when is each typically used?

Show answer

ngOnChanges runs when input values change. ngOnInit runs once after the first inputs are set, used for initial data loading. ngDoCheck allows custom change detection. ngAfterContentInit and ngAfterViewInit run after projected content and the view are ready, used for DOM access. ngOnDestroy runs before removal, used for cleanup. With signals, effect, computed and DestroyRef often replace several of these hooks.

What are directives in Angular and what types exist?

Show answer

Directives add behaviour to elements. Components are directives with templates. Attribute directives change appearance or behaviour of an existing element, such as ngClass, ngStyle or a custom appHighlight using host bindings. Structural directives change the DOM layout by adding or removing elements, like the older *ngIf and *ngFor, now largely replaced by built-in control flow. Custom directives keep repeated DOM logic out of components.

What are pipes in Angular and what is the difference between pure and impure pipes?

Show answer

Pipes transform values in templates, such as {{ price | currency:'INR' }}, date, uppercase, json and async. A pure pipe, the default, runs only when its input reference or primitive value changes, so it is very efficient. An impure pipe runs on every change detection cycle, which can hurt performance, and is needed only when output depends on mutable data. Prefer pure pipes or computed signals.

How does change detection work in Angular, and what does OnPush do?

Show answer

Change detection checks component bindings and updates the DOM when data changes. Traditionally Zone.js patched async APIs and triggered a check of the whole tree after events, timers and HTTP calls. With ChangeDetectionStrategy.OnPush, a component is checked only when an input reference changes, an event fires inside it, an async pipe emits or a signal it reads changes. OnPush with immutable data greatly reduces work.

What are @defer blocks and how do they help performance?

Show answer

@defer lets you lazy load part of a template and its dependencies only when a trigger occurs, such as on viewport, on interaction, on hover, on idle, on timer or a custom condition with when. Angular automatically splits that code into a separate chunk. You can show @placeholder, @loading and @error blocks. It is ideal for heavy below-the-fold widgets like charts, comments and maps.

A product list with 2,000 rows re-renders slowly whenever any data changes. How do you optimise it?

Show answer

Use @for with a proper track expression, such as track product._id, so Angular reuses DOM nodes instead of recreating them. Switch the component to OnPush and update data immutably or with signals. Replace function calls in templates with computed signals or pure pipes. For very long lists, use virtual scrolling from the Angular CDK and paginate on the server.

Create a child component with a signal input and an output that emits when a button is clicked.

Show answer

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

Write a custom attribute directive that highlights an element on hover.

Show answer

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>

What is zoneless change detection in Angular?

Show answer

Zoneless mode removes the dependency on Zone.js. Instead of patching browser APIs to guess when something changed, Angular schedules change detection when signals used in templates update, events fire in templates, or markForCheck is called. It is stable in recent Angular versions and the default for new projects. Benefits include a smaller bundle, better performance, clearer stack traces and fewer unnecessary checks.

You see ExpressionChangedAfterItHasBeenCheckedError in development. What does it mean and how do you fix it?

Show answer

In development Angular runs an extra check to make sure a binding did not change after it was already checked in the same cycle. The error usually appears when a child or a lifecycle hook like ngAfterViewInit changes parent data during rendering. Fix it by moving the update earlier, such as into ngOnInit, deriving the value with a computed signal, or restructuring data flow, rather than hiding it with setTimeout.

Your Angular app's initial bundle is very large and the first page loads slowly. What steps would you take?

Show answer

Run a production build with source map analysis to find large dependencies. Lazy load feature routes with loadComponent or loadChildren, use @defer for heavy widgets, remove unused libraries and replace large ones, and avoid importing whole utility libraries. Check budgets in angular.json, enable server-side rendering with hydration for public pages, optimise images with NgOptimizedImage, and serve compressed assets through a CDN.

A third-party chart component inside an Angular page causes performance issues because it triggers too many change detection cycles. What can you do?

Show answer

In Zone.js apps, run the chart's frequent events outside Angular using NgZone.runOutsideAngular, then re-enter only when the UI must update. Make the host component OnPush, pass immutable inputs and use @defer so the chart loads only when visible. Moving to zoneless change detection solves the root cause, because third-party timers no longer trigger global checks.

What is a service in Angular and why should business logic live there?

Show answer

A service is a class, usually decorated with @Injectable, that holds logic or data not tied to a single view, such as API calls, authentication, caching or shared state. Keeping this out of components makes components thin and focused on presentation, lets several components share the same data, and makes logic easy to unit test by injecting mock services. Services are created and supplied by Angular's dependency injection system.

Explain dependency injection in Angular.

Show answer

Dependency injection means a class asks for what it needs instead of creating it. Angular's injector creates instances based on providers and supplies them when a component or service requests them, either through constructor parameters or the inject() function. This decouples code, enables singletons, and lets tests or different environments swap implementations, for example providing a mock AuthService in unit tests.

How is routing configured in a standalone Angular application?

Show answer

You define a Routes array mapping paths to components, with redirectTo, child routes and a wildcard ** route for 404 pages, and register it with provideRouter(routes) in app.config.ts. The root template contains <router-outlet />, links use routerLink and routerLinkActive, and code navigates with Router.navigate. Features such as withComponentInputBinding let route parameters bind directly to component inputs.

How do you read route parameters and query parameters in an Angular component?

Show answer

Inject ActivatedRoute and read paramMap or queryParamMap, which are Observables, for example route.paramMap.pipe(map(p => p.get('id'))), so the component updates when the same route is reused with a new id. A snapshot gives a one-time value. With withComponentInputBinding enabled in provideRouter, route params, query params and resolver data can bind directly to component inputs, which is the simplest modern approach.

Two components on different pages need to share the selected city filter. How would you implement it?

Show answer

Create a root-provided FilterService holding the city in a signal, with methods to update it, and inject the service into both components so they share the same instance. For persistence across reloads or shareable links, sync the value to a query parameter or local storage. If many features need shared state with complex updates, consider NgRx SignalStore or NgRx Store.

After deploying the Angular app behind a load balancer, navigating directly to /orders/42 gives a 404. What is wrong?

Show answer

The Angular router handles that path in the browser, but the web server looks for a real file at /orders/42 and finds none. Configure the server to return index.html for unknown routes: try_files $uri $uri/ /index.html in Nginx, a rewrite rule in IIS or static hosting, or a catch-all route in Express that serves the built index.html after API routes. Alternatively use server-side rendering.

What does providedIn: 'root' mean and what are other ways to provide a service?

Show answer

providedIn: 'root' registers the service with the application's root injector, so one shared instance exists and it is tree-shakable, meaning it is removed from the bundle if unused. You can also provide services in a component's providers array, giving each component instance its own copy, in a route's providers for a lazy feature, or in app.config.ts. The provider location decides scope and lifetime.

What is the inject() function and how does it compare to constructor injection?

Show answer

inject() retrieves a dependency inside an injection context, such as a field initialiser, constructor, factory or functional guard. It removes long constructor parameter lists, works in plain functions like functional guards, interceptors and resolvers, and makes inheritance simpler because subclasses do not need to pass dependencies to super. Constructor injection still works, but modern Angular code and CLI templates favour inject().

What are injection tokens and when do you need them?

Show answer

An InjectionToken is a unique key for providing values that are not classes, such as configuration objects, API base URLs or feature flags. You create it with new InjectionToken<AppConfig>('APP_CONFIG'), provide it with { provide: APP_CONFIG, useValue: config }, and read it with inject(APP_CONFIG). Other provider types include useClass to swap implementations, useFactory for computed values and useExisting for aliases.

How does lazy loading work with the Angular router?

Show answer

Lazy loading defers downloading a feature's code until the user navigates to it. Use loadComponent: () => import('./admin/admin.component').then(m => m.AdminComponent) for a single component, or loadChildren to load a file of child routes. The CLI builds a separate chunk for each lazy route. You can add preloading strategies like withPreloading(PreloadAllModules) to fetch lazy chunks in the background after startup.

What are route guards and what kinds exist in modern Angular?

Show answer

Guards decide whether navigation can proceed. canActivate checks before entering a route, canActivateChild covers child routes, canDeactivate runs before leaving, often to warn about unsaved changes, and canMatch decides whether a route definition even matches, useful for role-based lazy loading. Modern guards are plain functions using inject(), returning true, false, a UrlTree for redirect, or an Observable or Promise of these.

What is a route resolver and when would you use one?

Show answer

A resolver fetches data before a route activates, so the component receives ready data instead of showing an empty state first. A functional resolver, ResolveFn<Product>, uses inject() to call a service and returns an Observable or Promise. The data is available through ActivatedRoute or bound inputs. Use it for detail pages that are useless without data, but avoid it for slow calls, because navigation waits.

Users lose a long half-filled form when they accidentally click a menu link. How would you prevent this?

Show answer

Add a canDeactivate guard on the form route. The guard checks whether the form is dirty and unsaved through a method or signal on the component, and if so asks the user to confirm leaving with a dialog. Return true to allow or false to stay. Also handle browser refresh and tab close with a beforeunload listener, and consider auto-saving drafts to local storage or the server.

Your app must call different API base URLs for development, staging and production. How do you configure this in Angular?

Show answer

Use environment files such as environment.ts and environment.prod.ts with fileReplacements in angular.json build configurations, or load a config.json at startup with provideAppInitializer so one build works in every environment. Expose the URL through an InjectionToken and inject it in services or an interceptor. Never put secrets in these files, because everything in the Angular bundle is public.

Write an injectable service that fetches and caches a list of categories.

Show answer

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$; } }

Configure routes with lazy loading, a child route and a wildcard 404 route.

Show answer

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())]

Write a functional auth guard that redirects unauthenticated users to the login page.

Show answer

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: ... }

Provide a configuration object through an InjectionToken and use it in a service.

Show answer

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 } }); } }

Tell me about a time you improved the structure of an Angular application.

Show answer

Situation: our app had one huge shared module and every page loaded everything, so the first load was slow. Task: I proposed restructuring as part of a performance goal. Action: I converted features to standalone components, split them into lazy routes with canMatch guards, moved shared logic into root services and removed dead code. Result: the initial bundle shrank by about 45 percent and new developers found features faster.

Describe how you handled a situation where requirements changed late in a sprint.

Show answer

Situation: two days before release, the client asked to add role-based access to a reporting page. Task: deliver without breaking the release. Action: I clarified the minimum needed with the product owner, implemented a canMatch guard and hid admin actions, and coordinated with the backend developer for API checks, while moving extra filters to the next sprint. Result: we released on time and the client approved the change.

What is hierarchical dependency injection in Angular?

Show answer

Angular has a tree of injectors that mirrors the application. Environment injectors come from the root and lazy routes, and element injectors come from components and directives. When a dependency is requested, Angular searches upward from the requesting element to the root. Providing a service at component level creates an isolated instance for that subtree. Modifiers like optional, self, skipSelf and host control this lookup.

Admin routes are protected by a guard, but the admin feature code is still downloaded by every user. How do you fix this?

Show answer

canActivate does not stop the route from matching, so its lazy chunk can still be downloaded, for example by a preloading strategy. Use a canMatch guard on the lazy admin route instead, so the route definition does not match for non-admin users and its code is never loaded; they fall through to another route or a not-authorised page. Keep the real security on the API, since frontend code is always visible.

Write a role-based canMatch guard that only matches admin users.

Show answer

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) } ];

Write a resolver that loads a product before the detail page opens.

Show answer

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>();

How do you decide where state should live in a large Angular application?

Show answer

Situation: our team argued over putting everything in a global store. Task: as tech lead I had to set guidelines. Action: I proposed rules: local UI state in components with signals, feature state in feature-scoped services or SignalStore, truly global data like the user and settings in root services, and server data cached in services. I documented examples and reviewed the first PRs. Result: fewer bugs and simpler components.

What are signals in Angular and why were they introduced?

Show answer

A signal is a reactive value container: you read it by calling it, count(), and update it with set or update. Angular tracks which templates, computed values and effects read a signal, so when it changes only dependent parts update. Signals give fine-grained reactivity, enable zoneless change detection and are simpler than RxJS for synchronous component state. They are stable and central to modern Angular.

What is the difference between signal, computed and effect?

Show answer

signal() creates writable state. computed() derives a read-only value from other signals, is lazily evaluated and memoised, and recalculates only when its dependencies change, for example a cart total from cart items. effect() runs side effects whenever signals it reads change, such as logging or syncing to local storage. Use computed for derived data and keep effects for non-UI side effects, not for setting other state.

What is RxJS and why is it important in Angular?

Show answer

RxJS is a library for reactive programming with Observables, streams of values over time, combined using operators. Angular uses it in HttpClient, router events, reactive forms valueChanges and many third-party libraries. It excels at asynchronous workflows such as type-ahead search, polling, websocket streams, retries and combining multiple requests. Signals handle synchronous state well, while RxJS remains the tool for complex event streams.

Create a counter component with signal, computed and effect.

Show answer

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); } }

What is the difference between a cold and a hot Observable?

Show answer

A cold Observable starts producing values when each subscriber subscribes, and every subscriber gets its own independent execution; an HttpClient call is cold, so two subscriptions send two requests. A hot Observable produces values regardless of subscribers, and subscribers share the same stream, like mouse events or a websocket. You can make a cold Observable shared with operators like share or shareReplay.

What are Subject, BehaviorSubject, ReplaySubject and AsyncSubject?

Show answer

A Subject is both an Observable and an observer, multicasting values to subscribers but giving late subscribers nothing from the past. BehaviorSubject needs an initial value and gives the latest value to new subscribers, popular for state like the current user. ReplaySubject replays a set number of past values. AsyncSubject emits only the final value on completion. In new code, signals often replace BehaviorSubject for state.

How do you avoid memory leaks from subscriptions in Angular?

Show answer

Prefer the async pipe in templates or toSignal, which subscribe and unsubscribe automatically. For manual subscriptions, use takeUntilDestroyed() from the rxjs-interop package, which completes the stream when the component's DestroyRef fires. HttpClient requests complete on their own, but long-lived streams like intervals, store selectors, router events and websockets must be cleaned up. Avoid nested subscribe calls; use flattening operators instead.

How do toSignal and toObservable bridge RxJS and signals?

Show answer

toSignal(observable$) subscribes to an Observable and exposes its latest value as a signal, unsubscribing automatically when the injection context is destroyed; you can supply an initialValue or requireSync. toObservable(signal) creates an Observable that emits whenever the signal changes, letting you apply RxJS operators like debounceTime and switchMap. Together they let you keep simple state in signals while using RxJS for async logic.

Implement a type-ahead search box that calls the API only after the user pauses typing and ignores outdated results. Which RxJS approach would you use?

Show answer

Take the input stream from a FormControl's valueChanges or toObservable of a signal, then pipe debounceTime(300) to wait for a pause, map to trimmed text, filter out terms shorter than two characters, distinctUntilChanged to skip repeats, and switchMap to call the API, which cancels any in-flight request when a new term arrives. Add catchError inside switchMap so one failed request does not kill the stream.

Users double-click the Pay button and two payment requests are sent. How would you prevent it on the frontend?

Show answer

Disable the button while the request is pending, using an isSubmitting signal. In RxJS, model clicks as a stream and use exhaustMap, which ignores new clicks until the current payment request completes. Show a loading state and handle errors so the button re-enables. The backend must still use idempotency keys, because frontend protection alone cannot stop network retries or duplicate tabs.

A dashboard needs data from three independent APIs before it can render. How would you load them?

Show answer

Use forkJoin to run all three requests in parallel and emit once when all complete, giving an object or array of results. Handle errors per request with catchError returning a fallback value, so one failed widget does not block the whole dashboard. If any source emits repeatedly, use combineLatest instead. With signals, you could use three httpResource instances and a computed for the combined loading state.

A component subscribes to a service Observable in ngOnInit, and after navigating back and forth several times, the API is called multiple times per action. What is wrong?

Show answer

The subscriptions are never cleaned up, so each visit adds another live subscriber that reacts to every emission. Use the async pipe or toSignal in the template, or add takeUntilDestroyed() to manual subscriptions. Also check that the service does not create a new long-lived stream per call and that nested subscribes are replaced with switchMap. Angular DevTools and network logs confirm the fix.

Write a type-ahead search using a reactive FormControl and RxJS operators.

Show answer

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) {...}

Load three APIs in parallel with forkJoin and handle a failure in one of them.

Show answer

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.

Write a cart service using signals with computed totals.

Show answer

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)); } }

Tell me about a time you fixed a difficult asynchronous bug.

Show answer

Situation: users sometimes saw another customer's details after quickly switching between records. Task: find the cause in a busy sprint. Action: I reproduced it with network throttling and found nested subscribes, where slow responses for an earlier id arrived last. I replaced them with switchMap so stale requests were cancelled, and added a test with delayed responses. Result: the bug disappeared and we added a review rule against nested subscribes.

Describe a time you helped a teammate who was struggling with RxJS.

Show answer

Situation: a new teammate kept writing nested subscribes and could not follow our streams. Task: help him become productive quickly. Action: I drew marble diagrams for map, switchMap and combineLatest, paired with him to refactor one of his components, and shared a short list of the operators we use most with examples. Result: within two weeks his pull requests used flattening operators correctly and he started reviewing others.

What is linkedSignal and when would you use it?

Show answer

linkedSignal creates a writable signal whose value resets based on a source signal, while still allowing local updates. For example, selectedOption can default to the first item of an options list and reset when the list changes, but the user can still pick another option. It solves cases where computed is read-only and effect-based syncing would be awkward or cause extra change cycles.

What are the resource and httpResource APIs in Angular?

Show answer

resource and httpResource bring asynchronous data into the signal world. You give them reactive parameters, such as a signal holding a product id, and they fetch data whenever those parameters change, cancelling stale requests. They expose signals like value, isLoading, error and status, and provide reload. httpResource builds on HttpClient, so interceptors still apply. They reduce manual subscribe-and-set code in components.

Explain the difference between switchMap, mergeMap, concatMap and exhaustMap.

Show answer

All map each source value to an inner Observable but differ in concurrency. switchMap cancels the previous inner Observable, ideal for search. mergeMap runs all inner Observables in parallel, good for independent uploads. concatMap queues them and runs one at a time in order, good for sequential saves. exhaustMap ignores new values while one is active, ideal for preventing duplicate login or submit clicks.

What is NgRx and when is it worth using in an Angular application?

Show answer

NgRx is a state management library family for Angular. NgRx Store follows the Redux pattern with actions, reducers, selectors and effects for side effects, giving predictable state and powerful DevTools. NgRx SignalStore offers a lighter, signal-based way to build stores with state, computed values and methods. It is worth it for large apps with complex shared state and many developers; small apps do fine with services and signals.

A shared service exposes state through a BehaviorSubject, and components mutate the emitted object directly, causing bugs. How do you redesign it?

Show answer

Keep the writable state private and expose only a read-only view: asObservable() for a subject, or asReadonly() for a signal. Provide methods like addItem and removeItem that create new immutable objects with spread syntax and emit them. Immutable updates also work with OnPush change detection. Consider migrating the service to signals with computed selectors, or NgRx SignalStore for larger state.

You need to poll an order status API every five seconds until the order is delivered. How would you implement it?

Show answer

Use timer(0, 5000) piped into switchMap to call the status API, then takeWhile(status => status !== 'delivered', true) to stop after the final status, including it. Add takeUntilDestroyed so polling stops if the user leaves, and retry with a delay for transient errors. For long waits, server-sent events or websockets are more efficient than polling, which wastes requests.

Use httpResource to load a product whenever the selected id signal changes.

Show answer

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()}`); }

100

How would you convince your team to adopt signals in an existing RxJS-heavy codebase?

Show answer

Situation: our team was hesitant to change working RxJS patterns. Task: I wanted to reduce subscription bugs and prepare for zoneless mode. Action: I built a proof of concept converting one complex component, measured fewer lines and change detection cycles, and proposed a gradual plan: signals for component state, RxJS kept for streams, toSignal at boundaries. Result: the team agreed to use signals in all new features.

101

What is the difference between template-driven and reactive forms in Angular?

Show answer

Template-driven forms build the form model from directives in the template, mainly ngModel, and suit small, simple forms. Reactive forms define the model explicitly in the component with FormControl, FormGroup and FormArray, giving synchronous access, strong typing, easier dynamic fields, observable valueChanges and simpler unit testing. Most enterprise Angular applications use reactive forms for complex or validated forms.

102

What are FormControl, FormGroup, FormArray and FormBuilder?

Show answer

FormControl tracks the value and validation state of a single input. FormGroup groups named controls into an object, such as a registration form. FormArray holds a dynamic list of controls or groups, such as multiple phone numbers or order items. FormBuilder, usually NonNullableFormBuilder, is a helper service that creates these with shorter syntax, for example fb.group({ email: ['', Validators.required] }).

103

How do built-in and custom validators work in reactive forms?

Show answer

Validators are functions that take a control and return null when valid or an error object like { required: true } when invalid. Built-ins include Validators.required, email, minLength, maxLength, pattern, min and max. A custom validator follows the same ValidatorFn signature, for example rejecting weak passwords. Group-level validators can compare fields, such as password and confirm password. Errors are read through control.errors and control.hasError.

104

What is HttpClient and how is it set up in a standalone Angular app?

Show answer

HttpClient is Angular's service for making HTTP requests. It returns Observables, automatically parses JSON, supports typed responses with generics, interceptors, progress events and request cancellation by unsubscribing. In a standalone app you register it with provideHttpClient() in app.config.ts, optionally with withInterceptors([...]) and withFetch() to use the Fetch API, which is recommended for server-side rendering.

105

A registration form must check that password and confirm password match. How would you implement this?

Show answer

Add a cross-field validator at the FormGroup level, because a single control cannot see the other field. The validator reads both values and returns { passwordMismatch: true } when they differ. Show the error under the confirm field when the group has the error and the field is touched. Also validate password strength with a pattern or custom validator, and check it again on the Express backend.

106

Build a reactive login form with validation using NonNullableFormBuilder.

Show answer

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>

107

How do you handle disagreements with a UI designer about how a form should behave?

Show answer

Situation: a designer wanted validation errors only after submit, but users were missing errors on long forms. Task: reach an agreement quickly. Action: I shared quick screen recordings comparing both approaches and pointed to accessibility guidelines, then proposed validation on blur with a summary at the top on submit. Result: the designer agreed, we tested it with users and the pattern became part of our design system.

108

What are typed reactive forms?

Show answer

Since Angular 14, reactive forms are strongly typed. A FormControl<string> knows its value type, so form.value and getRawValue return typed objects and the compiler catches wrong field names. Controls are nullable by default because reset sets them to null; using nonNullable: true or NonNullableFormBuilder resets to the initial value instead. Typed forms make it safe to map form values directly to API request interfaces.

109

What are async validators and when do you use them?

Show answer

Async validators return an Observable or Promise of validation errors, used when validity needs a server check, such as whether a username or email is already taken. Angular runs them only after synchronous validators pass, and the control's status is PENDING meanwhile. Use updateOn: 'blur' or debounce inside the validator to avoid a request on every keystroke, and still enforce uniqueness on the backend.

110

What are HTTP interceptors and what are common use cases?

Show answer

Interceptors sit between HttpClient and the server and can modify every request and response. Modern Angular uses functional interceptors of type HttpInterceptorFn registered through withInterceptors. Common uses are attaching an Authorization header, adding a base URL, showing a global loading indicator, logging, retrying failed requests, refreshing expired tokens and mapping errors to user-friendly messages. Interceptors run in the order they are listed.

111

How should HTTP errors be handled in an Angular application?

Show answer

Handle them at two levels. A global error interceptor catches HttpErrorResponse, redirects to login on 401, shows a toast for 500 errors and logs details. Component or service code uses catchError to provide fallbacks or show specific messages, such as field errors from a 422 response. Use retry with a delay for transient network failures, and never leave errors unhandled so the UI shows a blank state.

112

What is the difference between valueChanges and statusChanges, and what does updateOn do?

Show answer

valueChanges is an Observable that emits the new value whenever a control or group changes, useful for dependent fields or type-ahead search. statusChanges emits when validation status changes between VALID, INVALID, PENDING and DISABLED. The updateOn option controls when value and validation update: change by default, blur to validate when the field loses focus, or submit to validate only on form submission.

113

An order form lets users add any number of items with product, quantity and price. How do you build it?

Show answer

Use a FormArray of FormGroups, each with product, quantity and price controls and validators like min(1). Provide addItem and removeItem methods that push or removeAt on the array, and render rows with @for over items.controls. Calculate the total from valueChanges or a computed signal. On submit, send getRawValue() typed as the order DTO, and disable the submit button while invalid or pending.

114

Users complain that the app shows a blank screen whenever the backend is down. How do you improve this?

Show answer

Add a global error interceptor that maps network and 5xx errors to a friendly toast or banner, with retry for transient failures. In each data component, handle loading, error and empty states explicitly, using httpResource status signals or catchError with fallback values. Show a retry button, keep cached data visible if available, and log errors to monitoring. A health check banner helps during outages.

115

A form must show fields based on earlier answers, such as company name only when employment type is salaried. How would you build it?

Show answer

Subscribe to the employment type control's valueChanges, or use a signal, and enable or disable the dependent controls accordingly; disabled controls are excluded from value and validation. Show the fields in the template with @if. For forms driven by configuration, build controls dynamically from a JSON schema into a FormGroup. Remember to clear stale values when a field is hidden.

116

Users upload large documents and want to see upload progress. How do you implement it in Angular?

Show answer

Send a FormData body with HttpClient post and options reportProgress: true and observe: 'events'. Filter the event stream for HttpEventType.UploadProgress to calculate percent from loaded and total, and for HttpEventType.Response to get the final result. Show a progress bar bound to a signal, allow cancelling by unsubscribing, and validate size and type before upload. For very large files, upload directly to storage with pre-signed URLs.

117

Write a custom validator that rejects passwords without a number and an uppercase letter.

Show answer

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')) { ... }

118

Write a group validator that checks password and confirm password match.

Show answer

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) { ... }

119

Write a functional HTTP interceptor that adds a JWT and handles 401 errors.

Show answer

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); }) ); };

120

Tell me about a complex form you built and the challenges you solved.

Show answer

Situation: I built a loan application form with five steps and over sixty fields. Task: make it reliable and user friendly. Action: I used typed reactive forms split into step groups, cross-field validators for income rules, a FormArray for co-applicants, auto-saved drafts every thirty seconds and mapped server validation errors back to fields. Result: drop-offs reduced noticeably and QA found very few form bugs.

121

What is a ControlValueAccessor and why would you implement one?

Show answer

ControlValueAccessor is the interface that connects a form control to a UI element. Implementing it, with writeValue, registerOnChange, registerOnTouched and setDisabledState, and providing NG_VALUE_ACCESSOR, lets your custom component, such as a star rating, date picker or phone input, work with formControlName and ngModel like a native input, including validation and touched state. It is essential for reusable form component libraries.

122

What are Signal Forms in Angular?

Show answer

Signal Forms are a newer, experimental forms API introduced in recent Angular versions that builds the form model on signals. You create a form from a signal holding the data model, and field values, validity and errors are all exposed as signals, with schema-based validation rules. They aim to reduce boilerplate and fit zoneless, signal-based apps. Reactive forms remain the stable choice for production projects today.

123

Every API request needs a JWT header, and expired tokens should trigger a refresh without logging the user out. How do you implement this?

Show answer

Write an auth interceptor that clones each request with the Authorization header from the auth service. In the response path, catch 401 errors, call the refresh endpoint once, store the new access token, and retry the original request. Use a shared refresh Observable with shareReplay or a flag so parallel failed requests wait for one refresh. If refresh fails, clear the session and redirect to login.

124

Build a dynamic FormArray for adding and removing phone numbers.

Show answer

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>

125

Write an async validator that checks whether an email is already registered.

Show answer

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.

126

Why is Node.js a good fit for the backend in a MEAN application?

Show answer

Node.js runs JavaScript or TypeScript on the server with a non-blocking, event-driven model, so it handles many concurrent I/O-heavy requests efficiently. The team uses one language family across Angular and the API, can share TypeScript models, and has access to the large npm ecosystem. It is ideal for REST APIs, real-time features and microservices, but CPU-heavy tasks should move to workers or separate services.

127

How do you set up an Express project with TypeScript?

Show answer

Install express and types with npm i express and npm i -D typescript @types/express @types/node. Create a tsconfig with strict mode and a module setting like NodeNext, write code in src and compile to dist with tsc. For development, run TypeScript directly with tsx watch, and use node dist/server.js in production. Type request bodies, params and responses with Request and Response generics or validated schemas.

128

What is middleware in Express, and what kinds of middleware are there?

Show answer

Middleware is a function with access to req, res and next that runs in order for matching requests. Kinds include application-level middleware registered with app.use, router-level middleware on an express.Router, built-in middleware like express.json and express.static, third-party middleware such as cors, helmet and morgan, and error-handling middleware with four arguments. Middleware can end the response or pass control with next().

129

How do you design REST endpoints for a resource like orders, including nested data?

Show answer

Use plural nouns and HTTP methods: GET /orders, GET /orders/:id, POST /orders, PATCH /orders/:id and DELETE /orders/:id. For related data, use shallow nesting like GET /users/:id/orders. Express actions that are not CRUD as sub-resources or clear verbs, such as POST /orders/:id/cancel. Support filtering, sorting and pagination with query parameters, return proper status codes and document the API with OpenAPI.

130

How do you validate request data in an Express API, and why is it necessary even with Angular validation?

Show answer

Frontend validation improves user experience, but anyone can call the API directly with tools like Postman or curl, so the server must validate everything. Use a schema library such as zod, Joi or express-validator in middleware to check types, required fields, lengths and formats, reject unknown fields and return 400 with clear field errors. Mongoose validation is a second layer close to the data.

131

What is the difference between PUT and PATCH?

Show answer

PUT replaces the entire resource with the representation sent, so missing fields may be removed or reset, and it is idempotent. PATCH applies a partial update, changing only the fields provided, such as updating only an order's status. In a MEAN API, PATCH with $set in MongoDB is the common choice for edit forms. Validate PATCH bodies so clients cannot modify protected fields like role or price.

132

Angular calls the Express API on a different port during development and gets CORS errors. What are your options?

Show answer

In development, the cleanest fix is an Angular dev server proxy: a proxy.conf.json mapping /api to http://localhost:3000, so the browser sees same-origin requests. Alternatively enable the cors middleware in Express with the Angular origin allowed. In production, serve both under one domain through Nginx or configure CORS with an explicit allowlist, enabling credentials only when cookies are used.

133

Write a typed Express route in TypeScript that returns a product by id.

Show answer

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

134

Configure an Angular dev server proxy to forward API calls to Express.

Show answer

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.

135

Tell me about a time you worked closely with a frontend developer to define an API.

Show answer

Situation: our Angular developer and I were starting a new invoices module. Task: agree on the API before coding in parallel. Action: I drafted an OpenAPI spec with sample responses, we reviewed it together, adjusted field names and pagination to match the screens, and I provided a mock server so she could start immediately. Result: integration took one day instead of a week and we had almost no rework.

136

How does the Node.js event loop affect the way you write Express route handlers?

Show answer

Every request handler runs on the same main thread, so any synchronous heavy work, such as a large loop, JSON parsing of huge payloads, sync file reads or bcrypt with sync methods, blocks all other requests. Write handlers with async I/O, keep CPU work small, stream large data, and offload heavy jobs to worker threads or a queue. Monitor event-loop lag in production to catch blocking code.

137

What is the role of a controller-service-repository structure in an Express API?

Show answer

Controllers handle HTTP: they read request data, call services and format responses with status codes. Services contain business rules, such as checking stock before creating an order, and are independent of Express. Repositories or models encapsulate database access through Mongoose. This separation makes code easier to test, lets you reuse services in jobs or other transports, and stops route files from turning into large unmaintainable blocks.

138

How do you serve an Angular build and an Express API from the same Node server?

Show answer

Build Angular with ng build, which outputs static files to dist/project/browser. In Express, register API routes under /api first, then serve the static files with express.static, and finally add a catch-all GET route that returns index.html so Angular routing works on refresh. In larger deployments, Nginx or a CDN usually serves the Angular files while Express handles only the API.

139

How do real-time features work in a MEAN application?

Show answer

Use WebSockets, commonly through Socket.IO on the Express server and its client library in an Angular service that exposes events as Observables or signals. The server emits events, such as new chat messages or order status changes, to rooms of interested users. For scaling across instances, add a Redis adapter. Server-sent events are a simpler option for one-way updates like notifications or live dashboards.

140

An Express endpoint generates a large PDF report and the whole API slows down while it runs. How do you fix it?

Show answer

PDF generation is CPU-heavy and blocks the event loop. Move it to a background job: the endpoint creates a job in a queue such as BullMQ with Redis and immediately returns 202 Accepted with a job id. A separate worker generates the PDF, uploads it to storage and updates the job status. Angular polls the status or receives a websocket notification, then downloads the file.

141

Your API needs to send welcome emails and SMS after signup, but this makes signup slow. What would you change?

Show answer

Do not make the user wait for third-party providers. After saving the user, publish an event or add jobs to a queue and return the response immediately. Workers send the email and SMS with retries and backoff, and failures are logged without affecting signup. An EventEmitter is enough for a quick in-process version, but a persistent queue survives restarts and scales across instances.

142

Your Express API is used by thousands of users and occasionally crashes due to an unhandled promise rejection. How do you make it more resilient?

Show answer

Find the root cause from logs and fix missing await or catch blocks. Use Express 5, which forwards async errors to error middleware, or an async wrapper in Express 4. Add a central error handler, log unhandledRejection and uncaughtException and then exit cleanly. Run under PM2 or a container orchestrator with multiple instances and health checks so a crash restarts one instance while others keep serving.

143

Write a zod validation middleware for an Express route in TypeScript.

Show answer

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

144

Serve the built Angular app and the API from one Express server.

Show answer

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.

145

What is the difference between a monolith and microservices for a Node.js backend?

Show answer

A monolith is one deployable API containing all modules, which is simpler to build, test and deploy, and is right for most early-stage products. Microservices split domains like orders, payments and notifications into separate services communicating over HTTP or message queues, allowing independent scaling and deployments, but adding network failures, distributed data and operational complexity. Many teams start with a modular monolith and split later.

146

A mobile team and the Angular team both consume your API, and you need to change a response field. How do you avoid breaking clients?

Show answer

Make additive changes first: add the new field alongside the old one, mark the old field as deprecated in the OpenAPI docs and inform both teams. Track usage, and remove the old field only after all clients have migrated. For larger breaking changes, introduce a new version such as /api/v2 and run both versions in parallel. Contract tests in CI catch accidental breaking changes.

147

How do you design an API endpoint that returns a dashboard summary quickly when the underlying data is large?

Show answer

Avoid heavy aggregation on every request. Precompute summaries with scheduled jobs or on write events and store them in a summary collection, cache the response in Redis with a short TTL, and return only the fields the dashboard needs. Use indexes for any live queries, add pagination for detail lists, and expose a separate endpoint for drill-down data so the first load stays fast.

148

Write a Socket.IO server event and an Angular service that listens for it.

Show answer

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'); }); } }

149

Write a BullMQ queue and worker to send emails in the background.

Show answer

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.

150

Describe a time you had to optimise a slow backend under pressure.

Show answer

Situation: during a sales campaign our order API latency jumped to five seconds. Task: fix it while traffic was high. Action: I checked metrics, found a report query running on every order, moved it to a cached summary updated every minute, and added a missing index. I communicated progress to the support team every thirty minutes. Result: latency returned below 300 ms within two hours and the campaign continued smoothly.

151

Why is MongoDB a natural fit for a JavaScript stack like MEAN?

Show answer

MongoDB stores data as JSON-like BSON documents, which map directly to JavaScript and TypeScript objects used in Express and Angular, so there is little translation between layers. Its flexible schema helps when requirements change quickly, and features like rich queries, aggregation, indexes, replication and Atlas cloud hosting cover most web application needs. Mongoose adds schemas, validation and TypeScript support on top of the driver.

152

What are databases, collections and documents in MongoDB?

Show answer

A MongoDB deployment holds multiple databases, each database contains collections, and each collection contains documents. A document is a BSON object with fields, arrays and nested sub-documents, identified by a unique _id. Collections are roughly like tables but do not force all documents to share the same fields, although schema validation can enforce rules. A single document can be up to 16 MB in size.

153

What query and comparison operators do you use most in MongoDB?

Show answer

Comparison operators include $eq, $ne, $gt, $gte, $lt, $lte, $in and $nin, for example { price: { $gte: 500, $lte: 2000 } }. Logical operators are $and, $or, $not and $nor. Element operators $exists and $type check fields, $regex matches patterns, and array operators $all, $size and $elemMatch query inside arrays. Projections choose returned fields, and sort, skip and limit shape the result.

154

What is MongoDB Atlas and what features does it offer?

Show answer

MongoDB Atlas is the fully managed cloud service for MongoDB on AWS, Azure and Google Cloud. It handles provisioning, replica sets, automated backups, scaling, monitoring, security features like network access lists and encryption, and performance advice such as index suggestions. It also offers Atlas Search, Vector Search and data federation. A free tier makes it popular for learning projects and MEAN prototypes.

155

OTP codes must automatically expire ten minutes after creation. How would you implement this with MongoDB?

Show answer

Store each OTP in its own collection with a createdAt date field and create a TTL index, db.otps.createIndex({ createdAt: 1 }, { expireAfterSeconds: 600 }). MongoDB's background task removes expired documents automatically, though deletion can lag by about a minute, so also check the timestamp during verification. Store a hash of the code rather than plain text, and limit verification attempts.

156

Write Mongoose queries to filter, sort, paginate and select fields for a products listing.

Show answer

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.

157

How do you explain database trade-offs, such as choosing MongoDB over SQL, to a client?

Show answer

Situation: a client asked why we proposed MongoDB instead of the SQL database they knew. Task: explain clearly without jargon. Action: I mapped their product catalogue with varying attributes to documents, showed how it reduced joins and schema changes, admitted where SQL would be better, like complex financial reports, and proposed a reporting export. Result: the client approved MongoDB with confidence in the plan.

158

How do you use Mongoose with TypeScript?

Show answer

Define a TypeScript interface for the document, then create a Schema typed with that interface and a model with model<IUser>('User', userSchema). Mongoose infers types for queries, so findById returns a typed document. For lean queries, results are plain typed objects. Schema options like timestamps add createdAt and updatedAt, and you can type instance methods, statics and virtuals through additional generic parameters.

159

What are Mongoose virtuals, instance methods and statics?

Show answer

Virtuals are computed properties not stored in MongoDB, such as fullName from firstName and lastName, or a virtual populate that links related documents. Instance methods are functions available on each document, like user.comparePassword(). Statics are functions on the model itself, like User.findByEmail(email). Virtuals are excluded from JSON output unless you enable toJSON: { virtuals: true } in schema options.

160

What types of indexes does MongoDB support?

Show answer

MongoDB supports single-field and compound indexes, multikey indexes for array fields, text indexes for keyword search, geospatial 2dsphere indexes for location queries, hashed indexes for sharding, wildcard indexes for unpredictable fields, TTL indexes that delete documents after a time, and unique, partial and sparse options. Atlas also provides Atlas Search for full-text relevance and Vector Search for AI similarity queries.

161

How does $lookup work in an aggregation pipeline?

Show answer

$lookup performs a left outer join with another collection in the same database. The basic form matches localField to foreignField and writes matching documents into an array field. The pipeline form lets you add conditions, filtering and projections on the joined collection using let variables. Often you follow it with $unwind to flatten the array. Index the foreign field so the join stays efficient.

162

You are building an e-commerce product catalogue where each category has different attributes, such as size for clothes and RAM for laptops. How would you model it in MongoDB?

Show answer

Store common fields like name, price, category and stock at the top level, and keep variable specifications in an attributes array of { key, value } pairs, the attribute pattern. Create a compound index on attributes.key and attributes.value so filters work on any attribute. This avoids dozens of sparse fields and lets new categories be added without schema changes, while Mongoose validates the common fields.

163

Users can search products by name, and a regex query has become very slow. What would you do?

Show answer

A regex without an anchored prefix cannot use a normal index efficiently and scans the collection. For simple word search, create a text index and use $text with a relevance score. For a better search experience with typo tolerance, autocomplete and facets, use Atlas Search or a dedicated search engine. Paginate results, limit fields with projection and debounce requests from the Angular search box.

164

A list API that uses Mongoose populate on three references has become slow. How would you improve it?

Show answer

Check how many queries populate triggers and how much data each returns. Select only needed fields in populate, use lean(), and add indexes on the referenced fields. If the list always needs a customer name, store it with the extended reference pattern to avoid the join entirely. For complex filtering on related data, switch to one aggregation with $lookup and $project, and paginate.

165

Define a typed Mongoose model in TypeScript with an instance method.

Show answer

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

166

Write an aggregation that finds the top five customers by total spend with their names.

Show answer

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.

167

Create a text index and run a relevance-sorted search in MongoDB.

Show answer

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.

168

Write mongosh commands to inspect a slow query and the indexes on a collection.

Show answer

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.

169

Tell me about a data modelling decision you made and how it worked out.

Show answer

Situation: in a learning portal, I first embedded all quiz attempts inside each user document. Task: attempts grew quickly and user loads became slow. Action: I moved attempts to their own collection with an index on userId and quizId, kept a small summary of best scores on the user, and wrote a migration script. Result: profile pages became much faster and reporting queries became simpler.

170

What schema design patterns are common in MongoDB?

Show answer

Common patterns include embedding for one-to-few relations, referencing for one-to-many and many-to-many, the subset pattern that embeds only the most recent items, the extended reference pattern that copies frequently needed fields like a customer name into orders, the computed pattern that stores precalculated totals, the bucket pattern that groups time-series readings, and the outlier pattern for rare documents with huge arrays.

171

What are read concern and write concern in MongoDB?

Show answer

Write concern controls how many replica set members must acknowledge a write before it is considered successful; w: 'majority' protects against losing data on failover, while w: 1 is faster but riskier. Read concern controls the consistency of data read, such as local for the latest on one node or majority for data acknowledged by most members. Choose stronger settings for payments and orders.

172

What are change streams in MongoDB and how can a MEAN app use them?

Show answer

Change streams let an application subscribe to real-time inserts, updates and deletes on a collection, database or deployment, using the oplog of a replica set. A Node.js service can watch the orders collection and push status changes to Angular clients over Socket.IO, or sync data to search indexes and caches. Streams are resumable using a resume token after a restart.

173

Wallet balance updates sometimes produce wrong totals when two purchases happen at the same time. How do you fix this?

Show answer

Reading the balance, changing it in code and saving it creates a lost-update race. Use an atomic update instead: updateOne({ _id: userId, balance: { $gte: amount } }, { $inc: { balance: -amount } }) and check modifiedCount to confirm funds were sufficient. If the operation also writes a transaction record, wrap both in a multi-document transaction. Optimistic concurrency with a version field is another option.

174

Your MongoDB collection of sensor readings is growing by millions of documents per day. How would you design for it?

Show answer

Use a time series collection, which stores readings efficiently in compressed buckets with a timeField and metaField such as deviceId. Set expireAfterSeconds to drop old raw data, and keep hourly or daily aggregates in a separate collection for dashboards. Index on metaField and time, write in batches with insertMany, and plan sharding by device or a hashed key if a single replica set cannot keep up.

175

Use a MongoDB transaction in Mongoose to place an order and reduce stock together.

Show answer

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.

176

How does JWT-based authentication work end to end in a MEAN application?

Show answer

The user submits credentials from an Angular form to an Express login route. The server verifies the bcrypt password hash and signs a short-lived access token containing the user id and role, often with a refresh token in an httpOnly cookie. Angular stores the access token in memory, an interceptor attaches it to requests, Express middleware verifies it, and guards control which routes the user can open.

177

Which security measures should every Express API in a MEAN app have?

Show answer

Use HTTPS, helmet for security headers, a strict CORS allowlist, input validation on every route, rate limiting on auth endpoints, body size limits, parameterised queries and stripped MongoDB operators, bcrypt for passwords, secrets in environment variables, and least-privilege database users. Keep dependencies updated with npm audit or Dependabot, log security events and never return stack traces in production.

178

How do you test Express APIs and MongoDB logic in a MEAN project?

Show answer

Write unit tests for services with Jest or Vitest, mocking external providers. For integration tests, use Supertest to send requests to the exported Express app and mongodb-memory-server or a disposable Docker MongoDB for realistic queries, seeding and cleaning data around each test. Test validation errors, auth failures and permissions, not only happy paths. Run tests in CI on every pull request.

179

What are the main steps to deploy a MEAN application to production?

Show answer

Build Angular with ng build to produce optimised static files and compile the TypeScript API. Host the Angular files on a CDN, static host or Nginx, and run the API on a VM, container service or Kubernetes with environment variables. Use MongoDB Atlas or a managed replica set. Configure HTTPS, domain DNS, CORS, logging and monitoring, and automate everything through a CI/CD pipeline.

180

Write an Express JWT verification middleware in TypeScript.

Show answer

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' }); } }

181

How does Angular protect against cross-site scripting?

Show answer

Angular treats all values as untrusted by default and sanitises them before inserting into the DOM: interpolation escapes HTML, and binding to innerHTML, styles or URLs is sanitised to strip dangerous content. Bypass methods in DomSanitizer, like bypassSecurityTrustHtml, should be used only for trusted content. Avoid direct DOM manipulation through ElementRef with user data, and add a Content Security Policy for defence in depth.

182

What testing tools are used in Angular projects today?

Show answer

Angular's CLI has moved to Vitest as the default unit test runner for new projects, replacing the deprecated Karma, while many existing projects still run Karma with Jasmine or have switched to Jest. TestBed configures components and services for tests, HttpTestingController mocks HTTP calls, and component harnesses from the CDK simplify interaction tests. Playwright or Cypress handle end-to-end tests.

183

What is TestBed and how is it used to test an Angular component?

Show answer

TestBed is Angular's testing utility that creates a test environment similar to the application's. You call TestBed.configureTestingModule with the standalone component in imports and any mock providers, then createComponent to get a ComponentFixture. The fixture gives access to the component instance and its rendered DOM. Call fixture.detectChanges() or await fixture.whenStable() to update the view, then assert on the DOM or component state.

184

How do you test an Angular service that makes HTTP calls?

Show answer

Provide provideHttpClient() and provideHttpClientTesting() in TestBed, then inject the service and HttpTestingController. Call the service method and subscribe, use httpMock.expectOne('/api/products') to capture the request, assert its method and body, and flush a fake response. Finally call httpMock.verify() to ensure no unexpected requests remain. This tests the service logic without a real backend.

185

How do containers and orchestration fit into deploying a MEAN stack?

Show answer

Docker packages the Express API and an Nginx image serving the Angular build into portable images with all dependencies. docker compose runs them with MongoDB locally. In production, services like AWS ECS, Azure Container Apps or Kubernetes run multiple replicas, perform rolling updates, restart failed containers and scale on load. Images are built and pushed to a registry by the CI pipeline, tagged by commit.

186

A penetration test report says your API returns other users' invoices when the invoice id is changed. How do you fix it?

Show answer

This is broken object-level authorization, the top API risk in the OWASP list. Fix every query to scope by the authenticated user, for example Invoice.findOne({ _id: id, userId: req.user.id }), and return 404 when not found. Centralise ownership checks in services or middleware, add tests that try cross-user access, and review similar endpoints. Avoid relying on unguessable ids as protection.

187

An npm audit shows several high-severity vulnerabilities in the Express project. How do you handle it?

Show answer

Read each advisory to see whether the vulnerable code path is actually used in production or only in dev tooling. Run npm audit fix for safe updates, upgrade direct dependencies that pull vulnerable transitive packages, and use overrides in package.json if a fix is not yet released upstream. Test thoroughly after upgrading, enable Dependabot or Renovate for continuous updates and track any accepted risks.

188

After a new release, a bug affects many users. How do you respond and prevent a repeat?

Show answer

First limit the impact: roll back to the previous version or disable the feature with a flag, and communicate status to support. Then reproduce the bug, fix it with a test that covers the case, and redeploy through the normal pipeline. Afterwards, run a blameless post-mortem to find gaps, such as missing tests, review or monitoring, and add the actions to the backlog.

189

Write a unit test for an Angular component using TestBed.

Show answer

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.

190

Test an Angular service's HTTP call with HttpTestingController.

Show answer

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(); }); });

191

Write a multi-stage Dockerfile that builds Angular and serves it with Nginx.

Show answer

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.

192

Write an Nginx server block that serves Angular and proxies /api to Node.

Show answer

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.

193

Tell me about a time you improved test coverage or quality in a project.

Show answer

Situation: our MEAN project had almost no tests and every release broke something. Task: I volunteered to improve this. Action: I set up Supertest with an in-memory MongoDB for critical APIs, added component tests for checkout, wrote a short testing guide and made tests required in CI. I started with the five most bug-prone areas. Result: production bugs per release dropped sharply within three months.

194

Walk me through the MEAN project you are most proud of.

Show answer

Situation: for my final-year project I built a hospital appointment system. Task: let patients book slots and doctors manage schedules. Action: I designed MongoDB collections with indexes for slots, built a TypeScript Express API with JWT and role checks, and an Angular frontend with reactive forms, guards and signals. I added tests and deployed with Docker on a cloud VM. Result: our college clinic used it for a semester.

195

What is CSRF and how do Angular and Express handle it?

Show answer

Cross-site request forgery abuses cookies the browser sends automatically to make unwanted requests. Angular's HttpClient supports the double-submit cookie pattern: it reads a token from a cookie named XSRF-TOKEN and sends it in the X-XSRF-TOKEN header on mutating requests, which the server verifies. Combined with SameSite cookies and not using GET for changes, this protects cookie-based auth. Header-based JWTs are not vulnerable in the same way.

196

What is Angular SSR and why would you enable it?

Show answer

Angular server-side rendering renders pages to HTML on a Node.js server, so users and search engines see content immediately. The browser then hydrates the page, attaching Angular to the existing DOM; incremental hydration can hydrate parts only when needed using @defer triggers. Route-level render modes allow some pages to be prerendered at build time and others rendered per request. It improves SEO and first load for public pages.

197

The security team asks you to move JWTs out of localStorage in the Angular app. What design would you propose?

Show answer

Issue a short-lived access token kept only in memory in an Angular auth service, and a refresh token in an httpOnly, Secure, SameSite cookie scoped to the refresh path. On page load, call the refresh endpoint to get a new access token. An interceptor attaches the access token and refreshes on 401. Rotate refresh tokens and store their hashes server-side so they can be revoked.

198

Your Angular unit tests take fifteen minutes in CI and developers stop running them. What would you do?

Show answer

Measure which suites are slow. Migrate from Karma to Vitest for faster runs, avoid importing heavy shared modules in TestBed, mock HTTP and large child components, and replace real timers with fake ones. Run only affected tests on pull requests using Nx affected or similar, parallelise jobs in CI and cache dependencies. Move slow browser flows to a focused E2E suite run separately.

199

Your MEAN app must handle a festival sale with ten times normal traffic. How do you prepare?

Show answer

Load test the main flows with k6 or JMeter at expected peak. Serve Angular assets from a CDN, scale API instances horizontally with autoscaling, cache catalogue and home page data in Redis, and scale the MongoDB cluster tier with proper indexes. Move emails and invoices to queues, add rate limiting, set alerts on latency and errors, and freeze risky deployments during the sale.

200

Write a GitHub Actions job that tests and builds the Angular app.