Defining routes array in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when navigating to '/dashboard'?

Given this Angular routes array, what component will display when the user navigates to '/dashboard'?

Angular

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { DashboardComponent } from './dashboard.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent }
];

A HomeComponent is displayed

B DashboardComponent is displayed

C Both HomeComponent and DashboardComponent are displayed

D No component is displayed, navigation fails

💡 Hint

Look at the path that matches '/dashboard' in the routes array.

The route with path 'dashboard' maps to DashboardComponent, so navigating to '/dashboard' shows that component.

📝 Syntax

intermediate

Which routes array syntax is correct?

Which of the following Angular routes array definitions is syntactically valid?

A const routes: Routes = [{ path: '', component: 'HomeComponent' }];

B const routes = [{ path: '', component HomeComponent }];

C const routes: Routes = [{ path: '', component: HomeComponent }];

D const routes: Routes = [{ path: '', component: HomeComponent }]

💡 Hint

Check for correct TypeScript syntax and object property assignments.

Option C correctly declares routes with type Routes and assigns component as a class reference. Option C misses colon after component. Option C uses a string instead of a component class. Option C misses closing bracket.

🔧 Debug

advanced

Why does this route configuration cause a runtime error?

Consider this routes array. Why will navigating to '/profile' cause an error?

Angular

import { Routes } from '@angular/router';
import { ProfileComponent } from './profile.component';

export const routes: Routes = [
  { path: 'profile', component: ProfileComponent, children: [
    { path: '', component: ProfileComponent }
  ]}
];

A It works fine without errors

B It causes a syntax error due to missing comma

C It causes a runtime error because children array is empty

D It causes infinite recursion because ProfileComponent is loaded inside itself as a child route

💡 Hint

Think about what happens when a component loads itself as a child route.

Loading ProfileComponent inside its own children causes infinite recursion and runtime errors.

❓ state_output

advanced

How many routes are accessible in this array?

Given this routes array, how many distinct routes can a user navigate to?

Angular

import { Routes } from '@angular/router';
import { HomeComponent } from './home.component';
import { AboutComponent } from './about.component';
import { ContactComponent } from './contact.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
  { path: '**', redirectTo: '' }
];

A 3 routes

B 2 routes

C 4 routes

D 5 routes

💡 Hint

Count only distinct paths that load components, ignoring wildcard redirects as separate routes.

There are three distinct routes: '', 'about', and 'contact'. The wildcard '**' redirects to '', so it does not add a new route.

🧠 Conceptual

expert

What is the effect of this routes array on navigation?

Analyze this Angular routes array. What happens when a user navigates to '/settings'?

Angular

import { Routes } from '@angular/router';
import { SettingsComponent } from './settings.component';
import { NotFoundComponent } from './not-found.component';

export const routes: Routes = [
  { path: 'settings', component: SettingsComponent },
  { path: '**', component: NotFoundComponent }
];

A SettingsComponent is displayed

B Both SettingsComponent and NotFoundComponent are displayed

C Navigation fails with an error

D NotFoundComponent is displayed

💡 Hint

Consider how Angular matches routes and the role of the wildcard '**' route.

The route with path 'settings' matches exactly and loads SettingsComponent. The wildcard '**' only matches paths not matched earlier.