| JNTech

1. What is lazy loading?

Lazy loading is a technique that loads Angular components or feature modules only when required, instead of loading everything during application startup.

2. Why do we need lazy loading?

Lazy loading reduces initial bundle size, improves startup performance, and decreases initial download time. It is especially useful for large applications with multiple features.

3. How was lazy loading implemented with feature NgModules?

Before standalone components, Angular used loadChildren() to lazily load feature NgModules through routing.

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

4. How is lazy loading implemented with standalone components?

Modern Angular uses loadComponent() with dynamic imports to lazily load standalone components without requiring NgModules.

{ path: 'admin', loadComponent: () =>
  import('./admin/admin').then(m => m.Admin) }

5. What is `loadChildren()`?

loadChildren() lazily loads a collection of child routes. It supports both traditional feature NgModules and modern standalone route configurations.

{ path: 'admin', loadChildren: () =>
  import('./admin/admin.routes').then(m => m.ADMIN_ROUTES) }

6. What is `loadComponent()`?

loadComponent() lazily loads a single standalone component when its route is activated. It uses dynamic import() for loading.

{ path: 'login', loadComponent: () =>
  import('./login/login').then(m => m.Login) }

7. What is code splitting?

Code splitting divides JavaScript into smaller bundles or chunks that can be loaded separately. Angular's build system supports code splitting through dynamic imports and lazy loading.

8. How does lazy loading improve startup performance?

Lazy loading reduces the JavaScript downloaded, parsed, and executed during initial startup. Only required features load initially; other features load when accessed.

Application Startup
       |
       v
Load Main Bundle
       |
       v
Display Home Page
       |
       +-- Navigate to Admin
                  |
                  v
           Load Admin Chunk

9. What is eager loading?

Eager loading loads components or modules as part of the initial application bundle rather than waiting until they are needed. It is suitable for frequently used core features.

10. Eager loading vs lazy loading — what is the difference?

Eager Loading	Lazy Loading
Loads during startup	Loads when required
Larger initial bundle	Smaller initial bundle
Higher initial loading cost	Lower initial loading cost
No later chunk download	May introduce navigation delay
Suitable for core features	Suitable for optional features

Important Interview Revision Points

Concept	Key Point
Lazy Loading	Loads features on demand
Eager Loading	Loads features during startup
`loadChildren()`	Lazy loads child routes or modules
`loadComponent()`	Lazy loads standalone components
Dynamic `import()`	Loads code asynchronously
Code Splitting	Creates separate JavaScript chunks
Feature NgModule	Traditional lazy-loading approach
Standalone Component	Modern module-free approach
Route-Based Loading	Loads features during navigation
Preloading	Loads lazy routes in advance after startup

Interview priority: Focus particularly on questions 1, 2, 3, 4, 5, 6, 7, and 10.

Key interview takeaway: In modern Angular, use loadComponent() for individual standalone components and loadChildren() for feature route groups. Both help reduce initial bundle size and improve application startup performance.

Lazy Loading & Code Splitting - Interview Questions