Child routes and nested routing in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a child route inside the parent route.

Angular

const routes: Routes = [
  { path: 'parent', component: ParentComponent, children: [
    { path: [1], component: ChildComponent }
  ] }
];

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

A'child'

B'children'

C'parent-child'

D'child-route'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'children' as the path string instead of the actual child route name.

Forgetting to put the path in quotes.

The child route path should be a string like 'child' to define the nested route under 'parent'.

2fill in blank

medium

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

Angular

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

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

Asetup

BforRoot

Cconfigure

DforChild

Attempts:

3 left

💡 Hint

Common Mistakes

Using forChild in the root routing module.

Using a non-existent method like configure or setup.

Use forRoot to register the main routes in the root module.

3fill in blank

hard

Fix the error in the nested routes by completing the code correctly.

Angular

const routes: Routes = [
  { path: 'dashboard', component: DashboardComponent, [1]: [
    { path: 'stats', component: StatsComponent }
  ] }
];

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

Anested

Bchild

Cchildren

Dsubroutes

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'child' instead of 'children'.

Using 'nested' or 'subroutes' which are not valid properties.

The correct property to define nested routes is children.

4fill in blank

hard

Fill both blanks to create a nested route with a default child route.

Angular

const routes: Routes = [
  { path: 'account', component: AccountComponent, children: [
    { path: [1], component: ProfileComponent },
    { path: [2], redirectTo: 'profile', pathMatch: 'full' }
  ] }
];

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

A''

B'profile'

C'home'

D'default'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'default' or 'home' instead of empty string for default path.

Redirecting to a path that does not exist.

The empty string '' defines the default child route path. The redirectTo points to 'profile' to load it by default.

5fill in blank

hard

Fill all three blanks to define nested routes with lazy loading and a child route.

Angular

const routes: Routes = [
  { path: 'settings', loadChildren: () => import('./settings/settings.module').[1](), children: [
    { path: [2], component: SettingsHomeComponent },
    { path: [3], component: SettingsDetailComponent }
  ] }
];

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

Athen

B''

C'detail'

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'load' instead of 'then' for lazy loading.

Wrong child route paths that don't match component purposes.

Use then to resolve the module import promise. The default child route path is empty string '', and the other child route is 'detail'.