Defining routes array in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a basic routes array with a path and component.

Angular

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

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

AHomeComponent

BRouterModule

CNgModule

DAppComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using RouterModule instead of a component.

Using NgModule which is for module definition.

Using AppComponent when the route is for home.

The routes array requires a component to display for the given path. Here, HomeComponent is the correct component to use.

2fill in blank

medium

Complete the code to import the Routes type from Angular router.

Angular

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

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

ARoutes

BNgModule

CRouterModule

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing RouterModule instead of Routes.

Importing NgModule which is unrelated here.

Importing Component which is for components.

The Routes type is imported from '@angular/router' to define the routes array.

3fill in blank

hard

Fix the error in the routes array by completing the path property correctly.

Angular

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

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

Aabout

B`about`

C"about"

D'about'

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving the path without quotes causes syntax errors.

Using backticks without template expressions is unnecessary.

The path value must be a string literal in quotes. Using single quotes like 'about' is correct.

4fill in blank

hard

Fill both blanks to define a route with an empty path and redirect to 'home'.

Angular

const routes: Routes = [ { path: [1], redirectTo: [2], pathMatch: 'full' } ];

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

A''

B'home'

C'about'

D'main'

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-empty strings for the default path.

Redirecting to a path that does not exist.

An empty string '' is used for the default path, and 'home' is the redirect target.

5fill in blank

hard

Fill all three blanks to define a route with path 'profile', component ProfileComponent, and a data property with title 'User Profile'.

Angular

const routes: Routes = [ { path: [1], component: [2], data: { title: [3] } } ];

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

A'profile'

BProfileComponent

C'User Profile'

D'dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around strings.

Putting quotes around component names.

The path is 'profile', the component is ProfileComponent, and the data title is 'User Profile'.