Why routing is needed for SPAs in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular routing module.

Angular

import { [1] } from '@angular/router';

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

AFormsModule

BRouterModule

CHttpClientModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated modules like HttpClientModule instead of RouterModule.

The RouterModule is the Angular module that enables routing in Single Page Applications.

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'

AHomeComponent

BLoginComponent

CDashboardComponent

DProfileComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a component unrelated to the home page for the default path.

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

3fill in blank

hard

Fix the error in the routing import to enable routing in the app module.

Angular

@NgModule({ imports: [[1].forRoot(routes)] })

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

ARouterModule

BHttpClientModule

CFormsModule

DBrowserModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using modules that do not have the forRoot method like HttpClientModule.

The RouterModule.forRoot(routes) method sets up the router with the route definitions.

4fill in blank

hard

Fill both blanks to create a link that navigates to the About page.

Angular

<a [1]="/about">About</a>
<[2]></[2]>

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

ArouterLink

Bhref

Crouter-outlet

DngIf

Attempts:

3 left

💡 Hint

Common Mistakes

Using href instead of routerLink for navigation in Angular.

The routerLink directive creates navigation links, and router-outlet is the placeholder where routed components display.

5fill in blank

hard

Fill all three blanks to define routes for Home, About, and Contact components.

Angular

const routes = [
  { path: '', component: [1] },
  { path: 'about', component: [2] },
  { path: 'contact', component: [3] }
];

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

AHomeComponent

BAboutComponent

CContactComponent

DLoginComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up component names or using unrelated components.

Each route path should map to its respective component: Home, About, and Contact.