Lazy loading modules with routes in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is lazy loading in Angular routing?

Lazy loading is a technique where Angular loads feature modules only when the user navigates to their routes, reducing the initial load time of the app.

beginner

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

You use the <code>loadChildren</code> property in the route configuration to specify the module path and class name, like <code>{ path: 'feature', loadChildren: () =&gt; import('./feature/feature.module').then(m =&gt; m.FeatureModule) }</code>.

beginner

Why is lazy loading beneficial for Angular apps?

It improves app startup speed by loading only the necessary code first, and loads other parts only when needed, saving bandwidth and improving user experience.

intermediate

What must a lazy loaded Angular module include to work correctly with routing?

It must have its own RouterModule.forChild() with routes defined, so Angular knows how to handle navigation inside that module.

intermediate

Can lazy loaded modules share services with the root module?

Yes, if services are provided in the root injector (using providedIn: 'root'), lazy loaded modules can share them. Otherwise, services provided inside lazy modules are scoped to that module only.

Which property is used to lazy load a module in Angular routes?

A component

B pathMatch

C children

D loadChildren

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

What method should a lazy loaded module use to define its routes?

A RouterModule.forChild()

B RouterModule.lazyLoad()

C RouterModule.forRoot()

D RouterModule.loadModule()

Lazy loaded modules use RouterModule.forChild() to define their internal routes.

What is a key benefit of lazy loading modules in Angular?

A Faster initial app load

B More complex code

C Larger bundle size

D Slower navigation

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

How do you specify the module to load lazily in Angular routing?

A Using a component reference

B Using a string path only

C Using a function that imports the module

D Using a service

You provide a function that returns a dynamic import promise for the module.

If a service is provided inside a lazy loaded module, what is its scope?

A Global app scope

B Only inside that lazy loaded module

C Available in all modules automatically

D Only in root module

Services provided inside a lazy loaded module are scoped to that module only unless provided in root.

Explain how lazy loading modules with routes works in Angular and why it is useful.

Think about how Angular loads parts of the app only when you visit their pages.

Describe the steps to set up a lazy loaded feature module with routing in Angular.

Focus on module creation, routing inside it, and main app routing configuration.