Lazy loading standalone components in Angular - Step-by-Step Execution

Concept Flow - Lazy loading standalone components

User navigates to route

↓

Check if component is loaded

↓

Load component asynchronously

↓

Initialize standalone component

↓

Render component in view

↓

User interacts with component

When a user navigates to a route, Angular checks if the standalone component is loaded. If not, it loads it asynchronously, initializes it, and renders it.

Execution Sample

Angular

const routes = [
  { path: 'profile', loadComponent: () => import('./profile.component').then(m => m.ProfileComponent) }
];

Defines a route that lazy loads a standalone component when the user navigates to '/profile'.

Execution Table

Step	Action	Condition	Result	Component State
1	User navigates to '/profile'	Component loaded? No	Start loading component asynchronously	Not loaded
2	Import profile.component module	Module loaded? No	Fetch module file	Loading
3	Module fetched	Module loaded? Yes	Resolve ProfileComponent	Loaded
4	Initialize ProfileComponent	Component initialized? No	Create component instance	Initialized
5	Render ProfileComponent	Component rendered? No	Insert component into view	Rendered
6	User interacts with component	Component active? Yes	Handle user events	Active
7	User navigates away	Unload component? Yes	Destroy component instance	Not loaded

💡 Component is unloaded when user navigates away or app is closed.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 5	Final
componentLoaded	false	false	true	true	false
componentInstance	null	null	instance created	instance active	null
componentRendered	false	false	false	true	false

Key Moments - 3 Insights

Why does Angular load the component only after navigation?

Because the route uses loadComponent with a dynamic import, Angular waits until the user navigates to that route before fetching and initializing the component, as shown in execution_table step 1 and 2.

What happens if the component is already loaded and user navigates again?

Angular reuses the loaded component without fetching again, skipping the loading steps. This is implied by the 'Component loaded? Yes' condition in step 3.

How does Angular know when to destroy the component?

When the user navigates away, Angular destroys the component instance to free resources, as shown in step 7 of the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, at which step is the component instance created?

A Step 4

B Step 2

C Step 5

D Step 3

💡 Hint

Check the 'Action' and 'Result' columns around component initialization.

At which step does Angular insert the component into the view?

A Step 6

B Step 3

C Step 5

D Step 4

💡 Hint

Look for the step mentioning 'Render ProfileComponent' in the Action column.

If the user navigates away immediately after rendering, what happens to componentLoaded variable?

A Remains true

B Changes to false

C Becomes null

D Does not change

💡 Hint

Refer to variable_tracker and execution_table step 7 about unloading the component.

Concept Snapshot

Lazy loading standalone components in Angular:
- Use loadComponent with dynamic import in route config
- Component loads only on navigation to route
- Angular fetches module, initializes, and renders component
- Component destroyed on navigation away
- Improves app startup speed by loading on demand

Full Transcript

Lazy loading standalone components in Angular means the app waits to load a component until the user navigates to its route. The route uses loadComponent with a dynamic import function. When navigation happens, Angular checks if the component is loaded. If not, it fetches the module file asynchronously, creates the component instance, and renders it in the view. The component stays active while the user interacts. When the user leaves the route, Angular destroys the component to save resources. This process helps apps start faster by loading only what is needed when needed.