Interview answer drill

Use this Angular interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice interview questions Follow 30-day foundations study plan Practice more Angular interview questions

What is Angular routing and how do you define routes?Frontend interview answer

HighIntermediateAngular

By FrontendAtlas Team · Updated Apr 9, 2026

Interview focus

This Angular interview question tests whether you can explain Angular routing in production: route trees, RouterOutlet, guards, and lazy loading, connect it to production trade-offs, and handle common follow-up questions.

Angular routing in production: route trees, RouterOutlet, guards, and lazy loading explanation without falling back to memorized docs wording
Routing and Navigation reasoning, edge cases, and production failure modes
How you would answer the most likely Angular interview follow-up

Practice more Angular interview questions

Interview quick answer

Angular routing is more than path-to-component mapping. The interview-ready explanation covers RouterOutlet, route trees, guards, lazy loading, and the production bugs you debug when navigation is misconfigured.

Full interview answer

Overview

Angular routing is the production navigation layer for your app, not just a syntax for URL matching. A strong answer explains how the route tree, RouterOutlet, guards, and lazy loading work together so you can debug blank screens, broken deep links, or unexpected redirects instead of only reciting Routes array syntax.

Route tree mental model
The Angular Router does not just match one path to one component. It builds a tree of activated routes. Each level of that tree needs a matching RouterOutlet. Blank screens and half-rendered pages usually mean the route tree and the outlet tree do not line up.

TYPESCRIPT

import { Routes } from '@angular/router';
import { authGuard } from './auth.guard';
import { projectResolver } from './project.resolver';
import { AppShellComponent } from './app-shell.component';
import { ProjectsPageComponent } from './projects-page.component';
import { ProjectLayoutComponent } from './project-layout.component';
import { ProjectOverviewComponent } from './project-overview.component';

export const routes: Routes = [
  {
    path: '',
    component: AppShellComponent,
    children: [
      { path: '', pathMatch: 'full', redirectTo: 'projects' },
      { path: 'projects', component: ProjectsPageComponent },
      {
        path: 'projects/:projectId',
        component: ProjectLayoutComponent,
        canActivate: [authGuard],
        resolve: { project: projectResolver },
        children: [
          { path: '', component: ProjectOverviewComponent },
          {
            path: 'settings',
            loadComponent: () =>
              import('./project-settings.component').then(m => m.ProjectSettingsComponent)
          }
        ]
      }
    ]
  },
  { path: '**', redirectTo: 'projects' }
];

RouterOutlet placement must mirror the tree
The root route renders into the app-shell outlet. Its child route renders into the outlet inside that shell. Then the settings child renders into the outlet inside ProjectLayoutComponent. If one outlet is missing, that branch of the route tree has nowhere to render.

HTML

<!-- app-shell.component.html -->
<nav>
  <a routerLink="/projects">Projects</a>
</nav>
<router-outlet></router-outlet>

<!-- project-layout.component.html -->
<aside>Project nav</aside>
<section>
  <router-outlet></router-outlet>
</section>

Guard, resolver, and lazy child all answer different questions

Guard: is the user allowed to enter this branch?
Resolver: what data should exist before this screen activates?
Lazy child: should this code be fetched only when the nested route is visited?

That is why a production route tree is about ownership and navigation timing, not just matching strings.

routerLink vs Router.navigate()
routerLink is best when the destination is a direct template concern. Router.navigate() is for workflows where navigation depends on code, such as “save succeeded, now go to the detail route with query params.” They solve different parts of the same routing flow.

TYPESCRIPT

import { Router } from '@angular/router';

constructor(private router: Router) {}

saveProject(projectId: string) {
  this.projectApi.save().subscribe(() => {
    this.router.navigate(['/projects', projectId], {
      queryParams: { tab: 'overview' }
    });
  });
}

// Meanwhile the template can still use:
// <a [routerLink]="['/projects', projectId, 'settings']">Settings</a>

Route params and resolved data
Real routes rarely need only a path segment. They often combine params, query params, and resolver output. Good Angular answers mention where each piece comes from and whether the component expects the data synchronously on activation or reacts to later stream changes.

TYPESCRIPT

{
  path: 'projects/:projectId/tasks/:taskId',
  component: TaskDetailComponent,
  resolve: { project: projectResolver }
}

TYPESCRIPT

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const projectId = this.route.snapshot.paramMap.get('projectId');
  const taskId = this.route.snapshot.paramMap.get('taskId');
  const project = this.route.snapshot.data['project'];

  console.log({ projectId, taskId, project });
}

Routing debug checklist

Blank screen: is the matching RouterOutlet actually present for that route level?
Redirect loop: are your guard and redirect rules bouncing between two routes?
Resolver never finishes: is navigation blocked by a stream that never completes?
Deep link broken on refresh: is the server configured to hand unknown paths back to the Angular app shell?
Wrong active tab or params: are you reading the right route level from ActivatedRoute?

What a strong interview answer sounds like

“Angular routing is a route tree rendered through matching RouterOutlets. The interesting production pieces are not just paths, but how guards, resolvers, params, and lazy-loaded children combine, and how you debug failures when one branch renders blank or navigation gets stuck.”

Summary

Angular routing is a route tree, not just flat path-to-component matching.
RouterOutlet placement must mirror the active route hierarchy.
Guards, resolvers, params, and lazy children solve different routing problems and often appear in the same production config.
The highest-signal routing bugs are missing outlets, redirect loops, broken deep links, and routes blocked by guards or never-completing resolvers.