RouterModule configuration in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import RouterModule with routes in an Angular standalone component.

Angular

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

@Component({
  standalone: true,
  imports: [[1]],
  template: `<router-outlet></router-outlet>`
})
export class AppComponent {}

Drag options to blanks, or click blank then click option'

ARouterModule

BRouterModule.forChild(routes)

CRouterModule.forRoot(routes)

DRouterModule.withRoutes(routes)

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterModule without calling forRoot or forChild

Using forChild in the root module

Use RouterModule.forRoot(routes) to configure the main application routes.

2fill in blank

medium

Complete the code to define a route path for the HomeComponent.

Angular

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

Drag options to blanks, or click blank then click option'

AMainComponent

BHomeComponent

CRouterModule

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterModule as a component

Using AppComponent instead of HomeComponent

The empty path ('') usually points to the HomeComponent as the default page.

3fill in blank

hard

Fix the error in the route configuration to lazy load AdminModule.

Angular

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

Drag options to blanks, or click blank then click option'

Athen(m => m.adminmodule)

Bthen(m => m.adminModule)

Cthen(m => m.Adminmodule)

Dthen(m => m.AdminModule)

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase module names

Misspelling the module class name

The module class name is case sensitive and usually starts with a capital letter, so use AdminModule.

4fill in blank

hard

Fill both blanks to configure RouterModule with routes and enable initial navigation.

Angular

imports: [RouterModule.[1](routes, { [2]: 'enabled' })]

Drag options to blanks, or click blank then click option'

AforRoot

BinitialNavigation

CforChild

DenableTracing

Attempts:

3 left

💡 Hint

Common Mistakes

Using forChild instead of forRoot

Confusing initialNavigation with enableTracing

Use forRoot to set up routes and initialNavigation to enable navigation on app start.

5fill in blank

hard

Fill all three blanks to create a route with a parameter and a guard.

Angular

const routes = [
  { path: 'user/:id', component: UserComponent, canActivate: [[1]], data: { role: [2] } }
];

imports: [RouterModule.[3](routes)]

Drag options to blanks, or click blank then click option'

AAuthGuard

B'admin'

CforRoot

DUserGuard

Attempts:

3 left

💡 Hint

Common Mistakes

Using UserGuard instead of AuthGuard

Missing quotes around role string

Using forChild instead of forRoot

The route uses AuthGuard to protect it, requires role 'admin', and is configured with forRoot.