RouterModule configuration in Angular - Performance & Optimization

Performance: RouterModule configuration

MEDIUM IMPACT

This affects the initial page load speed and navigation responsiveness by controlling route setup and lazy loading.

Setting up routes in an Angular app

Angular

imports: [RouterModule.forRoot([{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }, { path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule) }, { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) }])]

Lazy loads all feature modules, reducing initial bundle size and speeding up first paint.

📈 Performance GainSaves 100-200ms on initial load, improves LCP and INP by loading routes on demand

Setting up routes in an Angular app

Angular

imports: [RouterModule.forRoot([{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }, { path: 'profile', component: ProfileComponent }, { path: 'settings', component: SettingsComponent }])]

Eagerly loading all components except dashboard increases initial bundle size and delays first content paint.

📉 Performance CostBlocks rendering for extra 100-200ms due to larger bundle and parsing

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Eager loading all routes	High (many components loaded upfront)	Multiple reflows during initial load	High paint cost due to large bundle	[X] Bad
Lazy loading feature modules	Low (only active route components loaded)	Single reflow per navigation	Lower paint cost, faster initial render	[OK] Good

Rendering Pipeline

RouterModule configuration affects how Angular loads and renders components during navigation, impacting style calculation, layout, and paint.

→Script Parsing

→Style Calculation

→Layout

→Paint

⚠️ BottleneckScript Parsing and Initial Bundle Size

Core Web Vital Affected

LCP, INP

This affects the initial page load speed and navigation responsiveness by controlling route setup and lazy loading.

Optimization Tips

1Always prefer lazy loading for feature modules in RouterModule to reduce initial bundle size.

2Avoid eager loading many routes to prevent blocking the first paint.

3Use preloading strategies to balance load speed and navigation responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of using lazy loading in RouterModule configuration?

A Reduces initial bundle size and speeds up first content paint

B Increases the number of DOM nodes on initial load

C Triggers more reflows during navigation

D Blocks rendering until all routes are loaded

DevTools: Performance

How to check: Record page load and navigation in Performance panel; look for long scripting and large bundle parsing times.

What to look for: Look for long scripting blocks and large JS bundle sizes delaying first contentful paint and interaction readiness.

Practice

1. What is the main purpose of RouterModule.forRoot(routes) in an Angular app?

easy

A. To create a new Angular component

B. To configure the app's routes and enable navigation based on URL paths

C. To style the app's components

D. To fetch data from a server

Solution

1. Step 1: Understand RouterModule role

   RouterModule is used to manage navigation and views based on URL paths in Angular.

2. Step 2: Role of forRoot method

   The forRoot method sets up the routes for the whole app, telling Angular which component to show for each path.

3. Final Answer:

   To configure the app's routes and enable navigation based on URL paths -> Option B

4. Quick Check:

   RouterModule.forRoot sets routes [OK]

Hint: Remember: forRoot sets main routes once per app [OK]

Common Mistakes:

• Confusing forRoot with creating components
• Thinking RouterModule styles components
• Assuming it fetches data

2. Which of the following is the correct syntax to import RouterModule with routes in an Angular module?

easy

A. RouterModule(routes)

B. imports: RouterModule.forRoot(routes)

C. imports: [RouterModule.forRoot(routes)]

D. RouterModule.import(routes)

Solution

1. Step 1: Check Angular module imports syntax

   Angular modules expect an array for the imports property.

2. Step 2: Correct use of RouterModule.forRoot

   RouterModule.forRoot(routes) returns a module configured with routes and must be inside an array.

3. Final Answer:

   imports: [RouterModule.forRoot(routes)] -> Option C

4. Quick Check:

   Imports must be an array with forRoot call [OK]

Hint: Always wrap RouterModule.forRoot in an array for imports [OK]

Common Mistakes:

• Omitting the array brackets in imports
• Using RouterModule.import which doesn't exist
• Calling RouterModule as a function directly

3. Given this route configuration:

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

What component will Angular display when the URL path is /about?

medium

A. AboutComponent

B. HomeComponent

C. No component, shows error

D. Both HomeComponent and AboutComponent

Solution

1. Step 1: Match URL path to route

   The URL path '/about' matches the route with path 'about'.

2. Step 2: Identify component for matched route

   The route with path 'about' uses AboutComponent.

3. Final Answer:

   AboutComponent -> Option A

4. Quick Check:

   Path '/about' shows AboutComponent [OK]

Hint: Match URL path exactly to route path to find component [OK]

Common Mistakes:

• Assuming empty path '' matches '/about'
• Thinking multiple components show at once
• Expecting error for valid path

4. Identify the error in this RouterModule configuration:

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'profile' component: ProfileComponent }
];

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

medium

A. Routes array should be inside imports array

B. RouterModule.forRoot should be RouterModule.forChild

C. AppRoutingModule should not export RouterModule

D. Missing comma between 'profile' path and component property

Solution

1. Step 1: Check routes array syntax

   Between 'path: 'profile'' and 'component: ProfileComponent' a comma is missing, causing syntax error.

2. Step 2: Verify RouterModule usage and exports

   Using RouterModule.forRoot(routes) and exporting RouterModule is correct here.

3. Final Answer:

   Missing comma between 'profile' path and component property -> Option D

4. Quick Check:

   Comma missing in object properties causes error [OK]

Hint: Check commas between object properties in routes [OK]

Common Mistakes:

• Confusing forRoot and forChild usage
• Placing routes array incorrectly
• Removing exports of RouterModule

5. You want to add a default route that redirects empty path '' to '/home' using RouterModule. Which configuration is correct?

hard

A. { path: '', redirectTo: '/home', pathMatch: 'full' }

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

C. { path: '', component: HomeComponent, redirectTo: '/home' }

D. { redirectTo: '/home', path: '', pathMatch: 'prefix' }

Solution

1. Step 1: Understand redirectTo usage

   To redirect from '' path, use redirectTo with full path and specify pathMatch as 'full' to match exact empty path.

2. Step 2: Check options for correct syntax

   { path: '', redirectTo: '/home', pathMatch: 'full' } correctly uses redirectTo with '/home' and pathMatch: 'full'. { path: '', redirectTo: 'home' } misses pathMatch, C wrongly combines component and redirectTo, D uses 'prefix' which causes partial matching issues.

3. Final Answer:

   { path: '', redirectTo: '/home', pathMatch: 'full' } -> Option A

4. Quick Check:

   Redirect empty path with pathMatch 'full' [OK]

Hint: Use pathMatch: 'full' when redirecting empty path [OK]

Common Mistakes:

• Omitting pathMatch property
• Combining component with redirectTo
• Using pathMatch: 'prefix' for empty path redirect