RouterModule configuration in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you navigate to '/dashboard' with this RouterModule setup?

Given this Angular RouterModule configuration, what component will display when the URL is '/dashboard'?

Angular

const routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
  { path: '**', component: NotFoundComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

A DashboardComponent is displayed

B No component is displayed, navigation fails

C NotFoundComponent is displayed

D HomeComponent is displayed

💡 Hint

Check which route matches the path '/dashboard' exactly.

The route with path 'dashboard' matches the URL '/dashboard' exactly, so DashboardComponent is displayed.

📝 Syntax

intermediate

Identify the syntax error in this RouterModule configuration

Which option correctly identifies the syntax error in this Angular routing setup?

Angular

const routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

A Missing 'pathMatch: "full"' in redirect route causes error

B Component names must be strings, not identifiers

C RouterModule.forRoot() requires a second argument for options

D Routes array must be declared inside the @NgModule decorator

💡 Hint

Redirect routes need a pathMatch property to work correctly.

Redirect routes require pathMatch: 'full' to specify how the path is matched. Without it, Angular throws an error.

❓ state_output

advanced

What is the value of 'activatedRoute.snapshot.params.id' after navigation?

Consider this route configuration and navigation to '/product/42'. What will activatedRoute.snapshot.params.id contain?

Angular

const routes = [
  { path: 'product/:id', component: ProductComponent }
];

// Navigation happens to '/product/42'

// Inside ProductComponent constructor:
constructor(private activatedRoute: ActivatedRoute) {
  const id = this.activatedRoute.snapshot.params.id;
}

A null

B "42" (string)

C undefined

D 42 (number)

💡 Hint

Route parameters are always strings in Angular.

Route parameters are parsed as strings, so id will be the string "42".

🔧 Debug

advanced

Why does this lazy-loaded module fail to load?

Given this RouterModule configuration, why does the lazy-loaded module fail to load?

Angular

const routes = [
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

A loadChildren must be a string, not a function

B AdminModule is missing the @NgModule decorator

C The import path './admin/admin.module' is incorrect or file missing

D RouterModule.forRoot() cannot be used with lazy loading

💡 Hint

Check the import path and file existence for lazy loading.

If the import path is wrong or the file does not exist, the lazy-loaded module cannot be loaded.

🧠 Conceptual

expert

What is the effect of 'pathMatch: "prefix"' in a redirect route?

In Angular RouterModule, what happens when a redirect route uses pathMatch: "prefix" instead of "full"?

Angular

const routes = [
  { path: '', redirectTo: 'home', pathMatch: 'prefix' },
  { path: 'home', component: HomeComponent }
];

A Redirect is ignored and the empty path loads no component

B Redirect only triggers when the full URL matches '', working as expected

C Redirect triggers only for URLs starting with 'home'

D Redirect triggers for every URL starting with '', causing an infinite redirect loop

💡 Hint

Think about what matching the prefix '' means for all URLs.

Using pathMatch: 'prefix' with an empty path matches every URL, causing the redirect to trigger repeatedly and create an infinite loop.

Practice

1. What is the main purpose of RouterModule.forRoot(routes) in an Angular app?

easy

A. To create a new Angular component

B. To configure the app's routes and enable navigation based on URL paths

C. To style the app's components

D. To fetch data from a server

Solution

1. Step 1: Understand RouterModule role

   RouterModule is used to manage navigation and views based on URL paths in Angular.

2. Step 2: Role of forRoot method

   The forRoot method sets up the routes for the whole app, telling Angular which component to show for each path.

3. Final Answer:

   To configure the app's routes and enable navigation based on URL paths -> Option B

4. Quick Check:

   RouterModule.forRoot sets routes [OK]

Hint: Remember: forRoot sets main routes once per app [OK]

Common Mistakes:

• Confusing forRoot with creating components
• Thinking RouterModule styles components
• Assuming it fetches data

2. Which of the following is the correct syntax to import RouterModule with routes in an Angular module?

easy

A. RouterModule(routes)

B. imports: RouterModule.forRoot(routes)

C. imports: [RouterModule.forRoot(routes)]

D. RouterModule.import(routes)

Solution

1. Step 1: Check Angular module imports syntax

   Angular modules expect an array for the imports property.

2. Step 2: Correct use of RouterModule.forRoot

   RouterModule.forRoot(routes) returns a module configured with routes and must be inside an array.

3. Final Answer:

   imports: [RouterModule.forRoot(routes)] -> Option C

4. Quick Check:

   Imports must be an array with forRoot call [OK]

Hint: Always wrap RouterModule.forRoot in an array for imports [OK]

Common Mistakes:

• Omitting the array brackets in imports
• Using RouterModule.import which doesn't exist
• Calling RouterModule as a function directly

3. Given this route configuration:

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

What component will Angular display when the URL path is /about?

medium

A. AboutComponent

B. HomeComponent

C. No component, shows error

D. Both HomeComponent and AboutComponent

Solution

1. Step 1: Match URL path to route

   The URL path '/about' matches the route with path 'about'.

2. Step 2: Identify component for matched route

   The route with path 'about' uses AboutComponent.

3. Final Answer:

   AboutComponent -> Option A

4. Quick Check:

   Path '/about' shows AboutComponent [OK]

Hint: Match URL path exactly to route path to find component [OK]

Common Mistakes:

• Assuming empty path '' matches '/about'
• Thinking multiple components show at once
• Expecting error for valid path

4. Identify the error in this RouterModule configuration:

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'profile' component: ProfileComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

medium

A. Routes array should be inside imports array

B. RouterModule.forRoot should be RouterModule.forChild

C. AppRoutingModule should not export RouterModule

D. Missing comma between 'profile' path and component property

Solution

1. Step 1: Check routes array syntax

   Between 'path: 'profile'' and 'component: ProfileComponent' a comma is missing, causing syntax error.

2. Step 2: Verify RouterModule usage and exports

   Using RouterModule.forRoot(routes) and exporting RouterModule is correct here.

3. Final Answer:

   Missing comma between 'profile' path and component property -> Option D

4. Quick Check:

   Comma missing in object properties causes error [OK]

Hint: Check commas between object properties in routes [OK]

Common Mistakes:

• Confusing forRoot and forChild usage
• Placing routes array incorrectly
• Removing exports of RouterModule

5. You want to add a default route that redirects empty path '' to '/home' using RouterModule. Which configuration is correct?

hard

A. { path: '', redirectTo: '/home', pathMatch: 'full' }

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

C. { path: '', component: HomeComponent, redirectTo: '/home' }

D. { redirectTo: '/home', path: '', pathMatch: 'prefix' }

Solution

1. Step 1: Understand redirectTo usage

   To redirect from '' path, use redirectTo with full path and specify pathMatch as 'full' to match exact empty path.

2. Step 2: Check options for correct syntax

   { path: '', redirectTo: '/home', pathMatch: 'full' } correctly uses redirectTo with '/home' and pathMatch: 'full'. { path: '', redirectTo: 'home' } misses pathMatch, C wrongly combines component and redirectTo, D uses 'prefix' which causes partial matching issues.

3. Final Answer:

   { path: '', redirectTo: '/home', pathMatch: 'full' } -> Option A

4. Quick Check:

   Redirect empty path with pathMatch 'full' [OK]

Hint: Use pathMatch: 'full' when redirecting empty path [OK]

Common Mistakes:

• Omitting pathMatch property
• Combining component with redirectTo
• Using pathMatch: 'prefix' for empty path redirect