Lazy loading standalone components in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is lazy loading in Angular?

Lazy loading means loading parts of an app only when needed, not all at once. It helps apps start faster by loading less code upfront.

beginner

What is a standalone component in Angular?

A standalone component is an Angular component that works without needing to be declared in a module. It can be used directly and imported where needed.

intermediate

How do you lazy load a standalone component in Angular?

You use the router with the `loadComponent` property, which loads the component only when its route is visited.

intermediate

Example: What does this route config do? `{ path: 'profile', loadComponent: () => import('./profile.component').then(m => m.ProfileComponent) }`

This route loads the ProfileComponent only when the user visits '/profile'. It uses lazy loading with a standalone component.

beginner

Why prefer lazy loading standalone components over eager loading?

Lazy loading reduces initial app size and speeds up startup. It loads components only when needed, saving data and improving user experience.

What does lazy loading a standalone component improve?

A Component styling

B App startup speed

C Database queries

D Server response time

Lazy loading loads components only when needed, making the app start faster.

Which Angular router property is used to lazy load a standalone component?

A loadChildren

B component

C redirectTo

D loadComponent

The 'loadComponent' property is used to lazy load standalone components.

Standalone components in Angular do NOT require:

A Declaration in NgModule

B Template files

C CSS styles

D Selectors

Standalone components work without being declared in any NgModule.

What syntax is used to import a lazy loaded standalone component?

A Dynamic import inside a function

B Require statement

C Static import at top of file

D Script tag in HTML

Lazy loading uses dynamic import inside a function to load components on demand.

Which is a benefit of lazy loading standalone components?

A Increases app memory use

B Loads all components upfront

C Reduces initial bundle size

D Disables routing

Lazy loading reduces the initial bundle size by loading components only when needed.

Explain how lazy loading standalone components works in Angular and why it is useful.

Think about loading parts of your app like opening doors only when you enter a room.

Describe the steps to set up a route that lazy loads a standalone component in Angular.

Focus on how the router knows to load the component only when the user visits the route.