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.

Practice

1. What does the routes array in Angular define?

easy

A. It defines the styles for each component.

B. It lists all services used in the app.

C. It tells Angular which component to show for each URL path.

D. It sets the database connection strings.

Solution

1. Step 1: Understand the purpose of routes array

   The routes array maps URL paths to components so Angular knows what to display.

2. Step 2: Eliminate unrelated options

   Styles, services, and database connections are not handled by routes.

3. Final Answer:

   It tells Angular which component to show for each URL path. -> Option C

4. Quick Check:

   Routes array = component mapping [OK]

Hint: Routes array links URL paths to components [OK]

Common Mistakes:

• Confusing routes with styles or services
• Thinking routes handle backend connections
• Assuming routes define component logic

2. Which of the following is the correct way to define a route for path 'home' with component HomeComponent?

easy

A. { path: 'home', component: HomeComponent }

B. { path: 'home', redirectTo: HomeComponent }

C. { route: 'home', component: HomeComponent }

D. { path: 'home', component: 'HomeComponent' }

Solution

1. Step 1: Check correct property names

   The route object must have path and component properties.

2. Step 2: Verify component value type

   The component value should be the component class, not a string or redirect.

3. Final Answer:

   { path: 'home', component: HomeComponent } -> Option A

4. Quick Check:

   Use path and component keys correctly [OK]

Hint: Use component class, not string or redirectTo for components [OK]

Common Mistakes:

• Using 'route' instead of 'path'
• Setting component as a string
• Using redirectTo instead of component for components

3. Given this routes array:

const routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: NotFoundComponent }
];

What component will Angular show when the URL path is '/contact'?

medium

A. HomeComponent

B. AboutComponent

C. No component, error occurs

D. NotFoundComponent

Solution

1. Step 1: Match URL path to routes

   Path '/contact' does not match '' or 'about'.

2. Step 2: Use wildcard '**' route

   The '**' path catches all unmatched URLs and shows NotFoundComponent.

3. Final Answer:

   NotFoundComponent -> Option D

4. Quick Check:

   Wildcard '**' = NotFoundComponent [OK]

Hint: Unmatched paths go to '**' route component [OK]

Common Mistakes:

• Assuming empty path matches all URLs
• Thinking unmatched paths cause errors
• Confusing wildcard '**' with empty path

4. Identify the error in this routes array:

const routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', redirectTo: 'user' },
  { path: 'user', component: UserComponent }
];

What is wrong with the route for 'profile'?

medium

A. redirectTo should be used with pathMatch property.

B. redirectTo cannot be used in routes array.

C. component is missing for 'profile' route.

D. Path 'user' should be capitalized.

Solution

1. Step 1: Check redirectTo usage

   When using redirectTo, Angular requires a pathMatch property to specify matching strategy.

2. Step 2: Confirm missing pathMatch causes error

   Without pathMatch, Angular cannot decide when to redirect, causing routing errors.

3. Final Answer:

   redirectTo should be used with pathMatch property. -> Option A

4. Quick Check:

   redirectTo needs pathMatch [OK]

Hint: Always add pathMatch with redirectTo routes [OK]

Common Mistakes:

• Omitting pathMatch with redirectTo
• Thinking redirectTo needs component
• Assuming path names must be capitalized

5. You want to define routes so that:
- The home page shows HomeComponent at path ''.
- The about page shows AboutComponent at path 'about'.
- Any unknown path redirects to home.

Which routes array correctly implements this?

hard

A. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '' }
]

B. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '', pathMatch: 'full' }
]

C. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '*', redirectTo: '', pathMatch: 'full' }
]

D. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', component: HomeComponent }
]

Solution

1. Step 1: Check wildcard path for unknown URLs

   The wildcard path for unknown URLs is '**', not '*'.

2. Step 2: Confirm redirectTo usage with pathMatch

   Redirect routes must include pathMatch: 'full' to work properly.

3. Step 3: Verify redirect target and components

   Redirecting '**' to '' sends unknown URLs to home page correctly.

4. Final Answer:

   [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '', pathMatch: 'full' } ] -> Option B

5. Quick Check:

   Use '**' with redirectTo and pathMatch 'full' [OK]

Hint: Use '**' wildcard with redirectTo and pathMatch 'full' [OK]

Common Mistakes:

• Using '*' instead of '**' for wildcard
• Omitting pathMatch in redirectTo routes
• Using component instead of redirectTo for redirects