Child routes and nested routing in Angular - Performance & Optimization

Performance: Child routes and nested routing

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how much of the UI and components load initially versus on demand.

Loading nested routes in an Angular app

Angular

const routes = [
  { path: 'parent', component: ParentComponent, children: [
    { path: 'child1', loadChildren: () => import('./child1/child1.module').then(m => m.Child1Module) },
    { path: 'child2', loadChildren: () => import('./child2/child2.module').then(m => m.Child2Module) }
  ]}
];

Child routes are lazy loaded only when navigated to, reducing initial bundle size.

📈 Performance GainReduces initial bundle size by tens of KBs, improving LCP and faster initial render.

Loading nested routes in an Angular app

Angular

const routes = [
  { path: 'parent', component: ParentComponent, children: [
    { path: 'child1', component: Child1Component },
    { path: 'child2', component: Child2Component }
  ]}
];

All child components are bundled and loaded upfront even if the user never navigates to them.

📉 Performance CostIncreases initial bundle size by tens of KBs, delaying LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading child routes	More DOM nodes initially	Multiple reflows if many nested components	Higher paint cost due to large initial render	[X] Bad
Lazy loading child routes	Fewer DOM nodes initially	Single reflow on navigation to child	Lower paint cost initially, deferred cost on navigation	[OK] Good

Rendering Pipeline

When using nested routes, Angular first processes the parent route and renders its component. Child routes are loaded either eagerly or lazily. Eager loading bundles all child components upfront, increasing load time. Lazy loading defers child component loading until navigation, reducing initial load and speeding up rendering.

→Network

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckNetwork and JavaScript Execution due to large initial bundle size when child routes are eagerly loaded.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how much of the UI and components load initially versus on demand.

Optimization Tips

1Always lazy load child routes to keep initial bundles small.

2Avoid nesting too many components eagerly to prevent large initial DOM and reflows.

3Use Angular's loadChildren syntax for child route lazy loading.

Performance Quiz - 3 Questions

What is the main performance benefit of lazy loading child routes in Angular?

A Reduces initial bundle size and speeds up initial page load

B Increases the number of DOM nodes on initial load

C Triggers more reflows during initial render

D Blocks rendering until all child routes are loaded

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe JS bundle sizes and load times. Navigate to child routes and see if additional bundles load on demand.

What to look for: Look for large initial JS bundles indicating eager loading. Lazy loading shows smaller initial bundles and additional bundles loading only on navigation.

Practice

1. What is the main purpose of child routes in Angular routing?

easy

A. To replace the main router outlet completely

B. To disable navigation between pages

C. To load components without URLs

D. To nest pages inside other pages for better organization

Solution

1. Step 1: Understand child routes concept

   Child routes allow nesting routes inside a parent route to organize pages hierarchically.

2. Step 2: Compare options with concept

   Only To nest pages inside other pages for better organization correctly describes this purpose; others are incorrect or unrelated.

3. Final Answer:

   To nest pages inside other pages for better organization -> Option D

4. Quick Check:

   Child routes = Nested pages [OK]

Hint: Child routes organize nested pages inside parents [OK]

Common Mistakes:

• Thinking child routes replace main router outlet
• Believing child routes work without URLs
• Confusing child routes with disabling navigation

2. Which syntax correctly defines a child route in Angular's RouterModule?

easy

A. { path: 'parent', children: ChildComponent }

B. { path: 'parent/child', component: ChildComponent }

C. { path: 'parent', children: [{ path: 'child', component: ChildComponent }] }

D. { path: 'parent', component: ParentComponent, child: [{ path: 'child' }] }

Solution

1. Step 1: Recall child route syntax

   Child routes are defined inside a 'children' array property of a route object.

2. Step 2: Match syntax with options

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } correctly uses 'children' with an array of child route objects; others misuse properties or structure.

3. Final Answer:

   { path: 'parent', children: [{ path: 'child', component: ChildComponent }] } -> Option C

4. Quick Check:

   Child routes use 'children' array [OK]

Hint: Child routes go inside 'children' array in route config [OK]

Common Mistakes:

• Using 'child' instead of 'children'
• Defining child path as 'parent/child' in one route
• Assigning component directly to 'children'

3. Given this route config:

{ path: 'dashboard', component: DashboardComponent, children: [ { path: 'stats', component: StatsComponent } ] }

What happens when navigating to /dashboard/stats?

medium

A. Only StatsComponent loads, DashboardComponent is ignored

B. DashboardComponent loads with StatsComponent displayed inside its router-outlet

C. DashboardComponent loads but StatsComponent does not display

D. Navigation fails with an error

Solution

1. Step 1: Understand nested route rendering

   Child routes render their components inside the parent's <router-outlet>.

2. Step 2: Apply to given URL

   At /dashboard/stats, DashboardComponent loads first, then StatsComponent loads inside its router-outlet.

3. Final Answer:

   DashboardComponent loads with StatsComponent displayed inside its router-outlet -> Option B

4. Quick Check:

   Child route renders inside parent component [OK]

Hint: Child shows inside parent's router-outlet on nested URL [OK]

Common Mistakes:

• Expecting child component to replace parent
• Forgetting to add router-outlet in parent
• Assuming navigation error without cause

4. Identify the error in this route config:

{ path: 'home', component: HomeComponent, children: { path: 'profile', component: ProfileComponent } }

medium

A. 'children' should be an array, not an object

B. Missing component for 'home' route

C. 'path' cannot be used inside children

D. ProfileComponent must be declared in AppModule

Solution

1. Step 1: Check 'children' property type

   The 'children' property must be an array of route objects, not a single object.

2. Step 2: Verify given config

   Here, 'children' is incorrectly assigned an object instead of an array.

3. Final Answer:

   'children' should be an array, not an object -> Option A

4. Quick Check:

   'children' = array of routes [OK]

Hint: 'children' must always be an array, not a single object [OK]

Common Mistakes:

• Using object instead of array for children
• Confusing 'path' usage inside children
• Assuming missing component causes this error

5. You want to create a nested route where /settings loads SettingsComponent and /settings/profile loads ProfileComponent inside it. Which setup is correct?

hard

A. Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template

B. Define { path: 'settings/profile', component: ProfileComponent } only, no children needed

C. Define { path: 'settings', component: ProfileComponent, children: [{ path: 'profile', component: SettingsComponent }] }

D. Define { path: 'settings', component: SettingsComponent } and load ProfileComponent manually inside SettingsComponent without routing

Solution

1. Step 1: Setup nested routes properly

   To nest ProfileComponent inside SettingsComponent, use 'children' array with ProfileComponent route.

2. Step 2: Ensure parent template has router-outlet

   SettingsComponent template must include <router-outlet> to display child routes.

3. Final Answer:

   Define { path: 'settings', component: SettingsComponent, children: [{ path: 'profile', component: ProfileComponent }] } and add <router-outlet> in SettingsComponent template -> Option A

4. Quick Check:

   Nested route + router-outlet = correct setup [OK]

Hint: Parent needs router-outlet and children array for nested routes [OK]

Common Mistakes:

• Defining nested path as one string without children
• Swapping parent and child components
• Not adding router-outlet in parent component