Lazy loading routes and modules 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, instead of loading all modules at startup. This improves app startup time and performance.

beginner

How do you define a lazy loaded route in Angular?

You use the loadChildren property in the route configuration to specify the module to load lazily. For example: <br>{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

beginner

Why should feature modules be lazy loaded?

Lazy loading feature modules helps reduce the initial bundle size, making the app start faster. It also loads code only when needed, saving bandwidth and improving user experience.

intermediate

What Angular CLI command helps generate a module ready for lazy loading?

Use ng generate module module-name --route route-name --module app.module.ts. This creates a module with routing configured for lazy loading.

intermediate

What is the role of the RouterModule.forChild() method in lazy loaded modules?

In lazy loaded modules, RouterModule.forChild() defines the routes specific to that module. It is used instead of forRoot() which is only called once in the root module.

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

A redirectTo

B component

C pathMatch

D loadChildren

The loadChildren property tells Angular which module to load lazily when the route is accessed.

What does lazy loading improve in an Angular app?

A CSS styling

B Database queries

C Initial load time and performance

D Server-side rendering

Lazy loading reduces the initial bundle size, so the app loads faster and performs better.

Which method is used to define routes inside a lazy loaded module?

A RouterModule.forChild()

B RouterModule.forRoot()

C NgModule.forRoot()

D NgModule.forChild()

RouterModule.forChild() is used inside lazy loaded modules to define their routes.

What Angular CLI flag helps generate a lazy loaded module with routing?

A --route

B --lazy

C --module

D --routing

The --route flag generates a module configured for lazy loading with routing.

When is a lazy loaded module loaded in Angular?

A After the root module loads

B When the user navigates to its route

C At app startup

D When the server sends a signal

Lazy loaded modules load only when the user visits their route, not at app startup.

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

Think about when Angular loads the code for a feature module.

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

Consider CLI commands and route configuration.