Module lazy loading preview in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is module lazy loading in Angular?

Module lazy loading means loading Angular modules only when the user needs them, not all at once. This helps apps start faster and saves data.

intermediate

How do you define a lazy loaded module route in Angular?

You use the loadChildren property in the route config with a dynamic import, like: <br>{ path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule) }

beginner

Why is lazy loading useful for large Angular apps?

It reduces the initial load time by loading only needed code. This improves user experience, especially on slow networks or devices.

intermediate

What happens if you forget to add a lazy loaded module to the Angular router?

The module won't load when navigating to its route, causing errors or blank pages because Angular doesn't know to load it on demand.

advanced

Can lazy loaded modules share services with the main app module?

Yes, but services provided in lazy loaded modules have their own instance separate from the main app unless provided in root.

Which Angular router property is used to lazy load a module?

A pathMatch

B component

C loadChildren

D redirectTo

The loadChildren property tells Angular to load a module only when its route is accessed.

What is a key benefit of lazy loading modules?

A Faster initial app load

B More CSS styles

C Larger bundle size

D Automatic testing

Lazy loading reduces the initial bundle size, making the app start faster.

How do you write a lazy loading route for a module named 'AdminModule' in Angular?

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

B { path: 'admin', component: AdminModule }

C { path: 'admin', redirectTo: 'admin' }

D { path: 'admin', loadModule: AdminModule }

The correct syntax uses loadChildren with a dynamic import returning the module.

If a lazy loaded module provides a service, what is true about that service?

A It is shared globally by default

B It has a separate instance from the main app

C It cannot be injected

D It is always singleton

Services in lazy loaded modules get their own instance unless provided in root.

What happens if you navigate to a route without lazy loading set up for its module?

A Nothing happens

B The module loads automatically

C The app reloads

D Angular throws an error or shows a blank page

Without lazy loading configured, Angular cannot find the module and errors occur.

Explain in simple terms what module lazy loading is and why it helps Angular apps.

Think about loading only what you need when you need it.

Describe how to set up a lazy loaded route in Angular with an example.

Look at the route config object and how it imports the module.