Bird
0
0

What is wrong with this nested routing setup?

medium📝 Debug Q7 of 15
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:
  1. Step 1: Check template syntax

    The router-outlet tag is not closed properly, causing Angular to fail rendering child routes.
  2. Step 2: Confirm correct router-outlet placement

    Router outlet should be inside HomeComponent to render child routes, but must be properly closed.
  3. Final Answer:

    Missing closing tag for router-outlet in template. -> Option A
  4. Quick Check:

    Always close router-outlet tags properly [OK]
Quick Trick: Always close tags properly [OK]
Common Mistakes:
MISTAKES
  • Leaving router-outlet unclosed
  • Placing router-outlet in wrong component
  • Expecting default child route to fix blank page

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes