[Solved] What is wrong with this nested routing setup?const routes = [ { path: 'home', component: HomeComponent, children: [ { path: 'about', component:... | Angular

Angular - Routing

What is wrong with this nested routing setup?

const routes = [ { path: 'home', component: HomeComponent, children: [ { path: 'about', component: AboutComponent } ] } ];

And in HomeComponent template:

<router-outlet>

Navigation to '/home/about' shows blank page.

AMissing closing tag for router-outlet in template.

BRouter outlet must be in AboutComponent, not HomeComponent.

CNo default child route defined for 'home'.

DRouter outlet is correctly placed; issue is elsewhere.

Step-by-Step Solution

Solution:

Step 1: Check template syntax
The router-outlet tag is not closed properly, causing Angular to fail rendering child routes.
Step 2: Confirm correct router-outlet placement
Router outlet should be inside HomeComponent to render child routes, but must be properly closed.
Final Answer:
Missing closing tag for router-outlet in template. -> Option A
Quick Check:
Always close router-outlet tags properly [OK]

Quick Trick: Always close tags properly [OK]

Common Mistakes:

MISTAKES

Master "Routing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this nested routing setup?