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.