Services, Dependency Injection and Routing Interview Questions for MEAN Stack
25 Services, Dependency Injection and Routing questions with answers for mean stack roles — 6 easy, 14 medium, 5 hard.
About Services, Dependency Injection and Routing
This topic explains how Angular applications are organised beyond components. It covers services, dependency injection, providedIn root, the inject function, injection tokens, hierarchical injectors, the router, lazy loading, functional guards such as canActivate, canMatch and canDeactivate, resolvers and route parameters. Interviewers use it to judge whether you can structure large, maintainable Angular apps.
Sheet progressStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
✓ 3 questions free • Unlock the rest in seconds
01
What is a service in Angular and why should business logic live there?
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.
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.
03
How is routing configured in a standalone Angular application?
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.
04
How do you read route parameters and query parameters in an Angular component?
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.
05
Two components on different pages need to share the selected city filter. How would you implement it?
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.
06
After deploying the Angular app behind a load balancer, navigating directly to /orders/42 gives a 404. What is wrong?
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.
07
What does providedIn: 'root' mean and what are other ways to provide a service?
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.
08
What is the inject() function and how does it compare to constructor injection?
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().
09
What are injection tokens and when do you need them?
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.
10
How does lazy loading work with the Angular router?
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.
11
What are route guards and what kinds exist in modern Angular?
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.
12
What is a route resolver and when would you use one?
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.
13
Users lose a long half-filled form when they accidentally click a menu link. How would you prevent this?
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.
14
Your app must call different API base URLs for development, staging and production. How do you configure this in Angular?
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.
15
Write an injectable service that fetches and caches a list of categories.
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.
20
Describe how you handled a situation where requirements changed late in a sprint.
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.
21
What is hierarchical dependency injection in Angular?
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.
22
Admin routes are protected by a guard, but the admin feature code is still downloaded by every user. How do you fix this?
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.
23
Write a role-based canMatch guard that only matches admin users.
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.
Frequently asked questions
How important is Services, Dependency Injection and Routing in MEAN Stack interviews?
This topic explains how Angular applications are organised beyond components. It covers services, dependency injection, providedIn root, the inject function, injection tokens, hierarchical injectors, the router, lazy loading, functional guards such as canActivate, canMatch and canDeactivate, resolvers and route parameters. Interviewers use it to judge whether you can structure large, maintainable Angular apps.
How should I use the Services, Dependency Injection and Routing sheet?
Go top to bottom — easy to hard. Answer before opening each answer, tick what you solved and save misses to Last-Minute Revision.