Lazy loading routes and modules in Angular - Step-by-Step Execution

Concept Flow - Lazy loading routes and modules

App starts

↓

User navigates to route

↓

Check if module loaded?

Yes→Render component

No↓

Load module asynchronously

↓

Render component from loaded module

↓

User interacts with app

The app waits to load a module until the user navigates to its route, then loads it asynchronously and renders its components.

Execution Sample

Angular

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }
];

Defines routes where 'admin' module is loaded only when user visits '/admin' path.

Execution Table

Step	User Action	Module Loaded?	Action Taken	Result
1	App starts, user at '/'	No	Load root module only	HomeComponent ready
2	User clicks '/home'	Home module loaded	Render HomeComponent	HomeComponent visible
3	User clicks '/admin'	Admin module not loaded	Start loading AdminModule asynchronously	Loading spinner or blank screen
4	AdminModule loaded	Admin module loaded	Render AdminComponent from AdminModule	AdminComponent visible
5	User navigates away	Modules remain loaded	No unload by default	App continues running

💡 Lazy loading triggers only when user navigates to the route; modules load once and stay loaded.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
homeModuleLoaded	true	true	true	true	true
adminModuleLoaded	false	false	loading	true	true
currentComponent	HomeComponent	HomeComponent	loading screen	AdminComponent	AdminComponent

Key Moments - 3 Insights

Why doesn't the admin module load when the app starts?

Because lazy loading delays loading until the user navigates to the admin route, as shown in step 3 of the execution_table.

What happens if the user navigates back to '/home' after visiting '/admin'?

The home module is already loaded, so the app just renders HomeComponent without reloading modules, as seen in step 2 and step 5.

Does Angular unload lazy loaded modules when navigating away?

No, once loaded, modules stay in memory for faster navigation, as noted in step 5 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'adminModuleLoaded' after step 3?

A "true"

B "loading"

C "false"

D "unloaded"

💡 Hint

Check the variable_tracker column 'After Step 3' for 'adminModuleLoaded'.

At which step does the admin module finish loading?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Look at the 'Module Loaded?' column in execution_table for when admin module becomes loaded.

If the user never visits '/admin', what happens to the admin module?

A It loads at app start

B It loads after '/home'

C It never loads

D It loads when user clicks a button

💡 Hint

Refer to the concept_flow and execution_table steps 1 and 2 about lazy loading triggers.

Concept Snapshot

Lazy loading delays loading a module until its route is visited.
Use loadChildren with dynamic import in route config.
Modules load asynchronously, improving startup speed.
Once loaded, modules stay in memory.
Helps keep initial app bundle small and fast.

Full Transcript

Lazy loading in Angular means the app does not load all modules at startup. Instead, it waits until the user navigates to a route that needs a specific module. At that moment, Angular loads the module asynchronously. For example, the admin module only loads when the user visits '/admin'. This keeps the app fast initially. The execution table shows the app starting with only the root module loaded. When the user clicks '/admin', Angular starts loading the admin module. After loading, it renders the admin components. Modules stay loaded after first load for quick navigation. This technique improves app performance by reducing initial load size.