Defining routes array in Angular - Performance & Optimization

Performance: Defining routes array

MEDIUM IMPACT

This affects the initial page load speed and navigation responsiveness by controlling how Angular matches URLs to components.

Defining routes for an Angular app with multiple pages

Angular

const routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'profile', component: ProfileComponent },
  { path: '**', component: NotFoundComponent }
];

Using lazy loading for heavy routes reduces initial bundle size and speeds up route matching, improving load time.

📈 Performance GainReduces initial bundle size by 30-50kb and lowers LCP by 150ms on average.

Defining routes for an Angular app with multiple pages

Angular

const routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent, children: [
    { path: 'stats', component: StatsComponent },
    { path: 'reports', component: ReportsComponent },
    { path: 'settings', component: SettingsComponent }
  ]},
  { path: 'profile', component: ProfileComponent },
  { path: '**', component: NotFoundComponent }
];

Deeply nested routes with many children increase the initial route matching time and can delay the first content paint.

📉 Performance CostTriggers multiple route matching checks on initial load, increasing LCP by 100-200ms on complex apps.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Flat routes with lazy loading	Minimal DOM until route activates	Single reflow on route change	Low paint cost due to smaller initial bundle	[OK] Good
Deeply nested routes array	More DOM nodes initialized upfront	Multiple reflows during navigation	Higher paint cost due to larger bundle	[X] Bad

Rendering Pipeline

When Angular starts, it parses the routes array to match the current URL. Complex or large route arrays increase the time spent in route matching before rendering the component.

→Route Matching

→Component Initialization

→Rendering

⚠️ BottleneckRoute Matching stage is most expensive when routes array is large or deeply nested.

Core Web Vital Affected

LCP

This affects the initial page load speed and navigation responsiveness by controlling how Angular matches URLs to components.

Optimization Tips

1Keep the routes array flat and simple to speed up route matching.

2Use lazy loading to split large routes and reduce initial bundle size.

3Avoid deep nesting of routes to prevent slow initial navigation.

Performance Quiz - 3 Questions

How does a large, deeply nested routes array affect Angular app performance?

A It reduces the bundle size and speeds up navigation.

B It increases route matching time and delays initial content rendering.

C It has no impact on performance.

D It improves browser caching automatically.

DevTools: Performance

How to check: Record a page load and navigation in DevTools Performance panel, then inspect the 'Routing' and 'Scripting' sections for route matching time.

What to look for: Look for long scripting tasks during route matching and large bundle sizes in Network panel that delay LCP.

Practice

1. What does the routes array in Angular define?

easy

A. It defines the styles for each component.

B. It lists all services used in the app.

C. It tells Angular which component to show for each URL path.

D. It sets the database connection strings.

Solution

1. Step 1: Understand the purpose of routes array

   The routes array maps URL paths to components so Angular knows what to display.

2. Step 2: Eliminate unrelated options

   Styles, services, and database connections are not handled by routes.

3. Final Answer:

   It tells Angular which component to show for each URL path. -> Option C

4. Quick Check:

   Routes array = component mapping [OK]

Hint: Routes array links URL paths to components [OK]

Common Mistakes:

• Confusing routes with styles or services
• Thinking routes handle backend connections
• Assuming routes define component logic

2. Which of the following is the correct way to define a route for path 'home' with component HomeComponent?

easy

A. { path: 'home', component: HomeComponent }

B. { path: 'home', redirectTo: HomeComponent }

C. { route: 'home', component: HomeComponent }

D. { path: 'home', component: 'HomeComponent' }

Solution

1. Step 1: Check correct property names

   The route object must have path and component properties.

2. Step 2: Verify component value type

   The component value should be the component class, not a string or redirect.

3. Final Answer:

   { path: 'home', component: HomeComponent } -> Option A

4. Quick Check:

   Use path and component keys correctly [OK]

Hint: Use component class, not string or redirectTo for components [OK]

Common Mistakes:

• Using 'route' instead of 'path'
• Setting component as a string
• Using redirectTo instead of component for components

3. Given this routes array:

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

What component will Angular show when the URL path is '/contact'?

medium

A. HomeComponent

B. AboutComponent

C. No component, error occurs

D. NotFoundComponent

Solution

1. Step 1: Match URL path to routes

   Path '/contact' does not match '' or 'about'.

2. Step 2: Use wildcard '**' route

   The '**' path catches all unmatched URLs and shows NotFoundComponent.

3. Final Answer:

   NotFoundComponent -> Option D

4. Quick Check:

   Wildcard '**' = NotFoundComponent [OK]

Hint: Unmatched paths go to '**' route component [OK]

Common Mistakes:

• Assuming empty path matches all URLs
• Thinking unmatched paths cause errors
• Confusing wildcard '**' with empty path

4. Identify the error in this routes array:

const routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', redirectTo: 'user' },
  { path: 'user', component: UserComponent }
];

What is wrong with the route for 'profile'?

medium

A. redirectTo should be used with pathMatch property.

B. redirectTo cannot be used in routes array.

C. component is missing for 'profile' route.

D. Path 'user' should be capitalized.

Solution

1. Step 1: Check redirectTo usage

   When using redirectTo, Angular requires a pathMatch property to specify matching strategy.

2. Step 2: Confirm missing pathMatch causes error

   Without pathMatch, Angular cannot decide when to redirect, causing routing errors.

3. Final Answer:

   redirectTo should be used with pathMatch property. -> Option A

4. Quick Check:

   redirectTo needs pathMatch [OK]

Hint: Always add pathMatch with redirectTo routes [OK]

Common Mistakes:

• Omitting pathMatch with redirectTo
• Thinking redirectTo needs component
• Assuming path names must be capitalized

5. You want to define routes so that:
- The home page shows HomeComponent at path ''.
- The about page shows AboutComponent at path 'about'.
- Any unknown path redirects to home.

Which routes array correctly implements this?

hard

A. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '' }
]

B. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', redirectTo: '', pathMatch: 'full' }
]

C. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '*', redirectTo: '', pathMatch: 'full' }
]

D. [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent },
{ path: '**', component: HomeComponent }
]

Solution

1. Step 1: Check wildcard path for unknown URLs

   The wildcard path for unknown URLs is '**', not '*'.

2. Step 2: Confirm redirectTo usage with pathMatch

   Redirect routes must include pathMatch: 'full' to work properly.

3. Step 3: Verify redirect target and components

   Redirecting '**' to '' sends unknown URLs to home page correctly.

4. Final Answer:

   [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: '**', redirectTo: '', pathMatch: 'full' } ] -> Option B

5. Quick Check:

   Use '**' with redirectTo and pathMatch 'full' [OK]

Hint: Use '**' wildcard with redirectTo and pathMatch 'full' [OK]

Common Mistakes:

• Using '*' instead of '**' for wildcard
• Omitting pathMatch in redirectTo routes
• Using component instead of redirectTo for redirects