Shared modules for reusable components in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of a shared module in Angular?

A shared module groups reusable components, directives, and pipes so they can be easily imported into other modules, avoiding code duplication.

beginner

How do you make a component reusable across multiple Angular modules?

Declare the component in a shared module and export it. Then import that shared module wherever you want to use the component.

intermediate

Which Angular decorator is used to define a module that can export components?

The @NgModule decorator defines a module. Inside it, the 'exports' array lists components, directives, or pipes to share with other modules.

advanced

Why should you avoid importing a shared module multiple times in Angular?

Importing a shared module multiple times can cause multiple instances of services if provided there. To avoid this, provide services in root or use the forRoot pattern.

beginner

What is a common practice to organize reusable components in Angular projects?

Create a dedicated shared module folder with components, directives, and pipes. Export them from the shared module to keep code clean and maintainable.

What must you do to use a reusable component from a shared module in another module?

A Declare the component again in the other module

B Import the shared module in the other module

C Use the component selector without importing anything

D Export the component from the other module

You import the shared module that exports the reusable component into the module where you want to use it.

Where do you list components to make them reusable in Angular?

A In the 'exports' array of @NgModule

B In the 'imports' array

C In the 'declarations' array only

D In the 'providers' array

Components must be exported in the 'exports' array to be reusable in other modules.

What is a risk of providing services inside a shared module?

A Multiple instances of the service may be created

B Services become global automatically

C Services cannot be injected

D Services will not work in lazy-loaded modules

Providing services in a shared module can cause multiple instances if the module is imported multiple times.

Which Angular feature helps avoid multiple service instances from shared modules?

A NgModule imports

B Lazy loading

C Component inheritance

D forRoot pattern

The forRoot pattern allows providing services only once, avoiding multiple instances.

What should a shared module NOT usually contain?

A Reusable components

B Common directives and pipes

C Feature-specific services

D Exports of reusable items

Feature-specific services belong in feature modules, not shared modules.

Explain how to create and use a shared module for reusable components in Angular.

Think about how to group and share components across your app.

Describe the potential problem with services in shared modules and how to solve it.

Consider what happens when a module is imported in many places.