Lazy loading routes and modules in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is lazy loading in Angular routing?

Lazy loading is a technique where Angular loads feature modules only when the user navigates to their routes, instead of loading all modules at startup. This improves app startup time and performance.

beginner

How do you define a lazy loaded route in Angular?

You use the loadChildren property in the route configuration to specify the module to load lazily. For example:
{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

beginner

Why should feature modules be lazy loaded?

Lazy loading feature modules helps reduce the initial bundle size, making the app start faster. It also loads code only when needed, saving bandwidth and improving user experience.

intermediate

What Angular CLI command helps generate a module ready for lazy loading?

Use ng generate module module-name --route route-name --module app.module.ts. This creates a module with routing configured for lazy loading.

intermediate

What is the role of the RouterModule.forChild() method in lazy loaded modules?

In lazy loaded modules, RouterModule.forChild() defines the routes specific to that module. It is used instead of forRoot() which is only called once in the root module.

Which property is used to lazy load a module in Angular routes?

A redirectTo

B component

C pathMatch

D loadChildren

The loadChildren property tells Angular which module to load lazily when the route is accessed.

What does lazy loading improve in an Angular app?

A CSS styling

B Database queries

C Initial load time and performance

D Server-side rendering

Lazy loading reduces the initial bundle size, so the app loads faster and performs better.

Which method is used to define routes inside a lazy loaded module?

A RouterModule.forChild()

B RouterModule.forRoot()

C NgModule.forRoot()

D NgModule.forChild()

RouterModule.forChild() is used inside lazy loaded modules to define their routes.

What Angular CLI flag helps generate a lazy loaded module with routing?

A --route

B --lazy

C --module

D --routing

The --route flag generates a module configured for lazy loading with routing.

When is a lazy loaded module loaded in Angular?

A After the root module loads

B When the user navigates to its route

C At app startup

D When the server sends a signal

Lazy loaded modules load only when the user visits their route, not at app startup.

Explain how lazy loading routes and modules work in Angular and why it is useful.

Think about when Angular loads the code for a feature module.

Describe the steps to set up a lazy loaded feature module with routing in Angular.

Consider CLI commands and route configuration.

Practice

1. What is the main purpose of lazy loading modules in Angular?

easy

A. To preload all modules at application start for faster navigation

B. To load modules only when the user navigates to their routes, improving startup speed

C. To bundle all modules into a single large file

D. To disable routing in the application

Solution

1. Step 1: Understand lazy loading concept

   Lazy loading means loading parts of the app only when needed, not all at once.

2. Step 2: Identify benefit in Angular context

   Loading modules on demand speeds up the initial app load and reduces bundle size.

3. Final Answer:

   To load modules only when the user navigates to their routes, improving startup speed -> Option B

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Lazy loading delays module load until route is visited [OK]

Common Mistakes:

• Thinking lazy loading loads all modules upfront
• Confusing lazy loading with preloading
• Assuming lazy loading disables routing

2. Which of the following is the correct syntax to lazy load a module in Angular routing?

easy

A. { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

B. { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

C. { path: 'admin', component: AdminModule }

D. { path: 'admin', loadModule: () => import('./admin/admin.module') }

Solution

1. Step 1: Recall Angular lazy loading syntax

   Angular uses dynamic import with loadChildren returning a promise resolving to the module.

2. Step 2: Match syntax to options

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } uses the correct arrow function with dynamic import and then to get the module class.

3. Final Answer:

   { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } -> Option A

4. Quick Check:

   Dynamic import + loadChildren = { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } [OK]

Hint: Use arrow function with import().then() for lazy loading [OK]

Common Mistakes:

• Using deprecated string syntax for loadChildren
• Confusing component with module in route config
• Using wrong property name like loadModule

3. Given this route configuration snippet, what happens when the user navigates to '/dashboard'?

{ path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }

medium

A. The DashboardModule is loaded immediately when the app starts

B. The app throws a runtime error due to incorrect syntax

C. The DashboardModule is never loaded

D. The DashboardModule is loaded only when the user navigates to '/dashboard'

Solution

1. Step 1: Analyze the route config with loadChildren

   The route uses lazy loading with a dynamic import function for DashboardModule.

2. Step 2: Understand lazy loading behavior on navigation

   The module loads only when the user visits '/dashboard', not before.

3. Final Answer:

   The DashboardModule is loaded only when the user navigates to '/dashboard' -> Option D

4. Quick Check:

   Lazy loading triggers on route visit [OK]

Hint: Lazy loaded modules load on first route access, not app start [OK]

Common Mistakes:

• Assuming module loads at app start
• Confusing lazy loading with eager loading
• Thinking syntax causes runtime error

4. Identify the error in this Angular route configuration for lazy loading:

{ path: 'profile', loadChildren: './profile/profile.module#ProfileModule' }

medium

A. The string syntax for loadChildren is deprecated and causes errors in Angular 17+

B. The path property should be named routePath

C. The module path should not include './' prefix

D. loadChildren should be replaced with loadModule

Solution

1. Step 1: Check loadChildren syntax

   The string syntax with '#' is deprecated in modern Angular versions (17+).

2. Step 2: Identify correct syntax

   Modern Angular requires dynamic import with arrow function for lazy loading.

3. Final Answer:

   The string syntax for loadChildren is deprecated and causes errors in Angular 17+ -> Option A

4. Quick Check:

   Deprecated string syntax = The string syntax for loadChildren is deprecated and causes errors in Angular 17+ [OK]

Hint: Use dynamic import syntax, not string with # [OK]

Common Mistakes:

• Using old string syntax for loadChildren
• Changing path property name incorrectly
• Replacing loadChildren with non-existent loadModule

5. You want to lazy load a feature module only if the user is authenticated. Which approach correctly combines lazy loading with route guarding in Angular?

hard

A. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canActivate: [AuthGuard] }

B. { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] }

C. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] }

D. { path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canLoad: [AuthGuard] }

Solution

1. Step 1: Understand lazy loading with guards

   To prevent loading a module unless authorized, use canLoad guard with lazy loading.

2. Step 2: Analyze options for correct guard usage

   { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } uses canLoad with dynamic import syntax, which is correct for lazy loaded modules.

3. Step 3: Explain why others are incorrect

   { path: 'settings', component: SettingsComponent, canActivate: [AuthGuard] } is eager loading with canActivate. { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canActivate: [AuthGuard] } uses canActivate which guards route activation but not module loading. { path: 'settings', loadChildren: './settings/settings.module#SettingsModule', canLoad: [AuthGuard] } uses deprecated string syntax.

4. Final Answer:

   { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } -> Option C

5. Quick Check:

   Lazy load + canLoad guard = { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule), canLoad: [AuthGuard] } [OK]

Hint: Use canLoad guard with lazy loaded modules to block loading [OK]

Common Mistakes:

• Using canActivate instead of canLoad for lazy loading
• Using deprecated string syntax for loadChildren
• Applying guards on components instead of modules