Lazy routing defers code loading until a feature is needed. Good boundaries balance initial bundle size, navigation latency and shared dependencies.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: An administrative area loads independently from the public landing page. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Measure initial requirements
Identify features not needed for the first useful page. An administrative area is a plausible independent boundary.
Step 2: Defer cohesive features
Lazy-load the feature route and its dependencies. Splitting tiny pieces indiscriminately can increase request and management overhead.
Step 3: Measure navigation cost
Inspect first load, first feature navigation and repeat navigation, including a slow connection and failure to retrieve the chunk.
Worked scenario
An administrative area loads independently from the public landing page.
Public visitors need landing-page code immediately but may never enter administration. Deferring the admin bundle reduces their initial transfer. Admin users incur an additional first-navigation load, so show meaningful progress and consider preloading only when appropriate. The saved bytes and added delay must both inform the decision.
Common mistake
Splitting every tiny component can add overhead without useful savings.
Verify the behavior
Compare transferred bytes and time to usable content before and after splitting, with cache disabled and on a repeat visit.
Interview exercise
Measure whether lazy loading helped.
Answer and reasoning
Compare initial transferred code and navigation timing, including repeat visits and slow-network behavior.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.