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.

Practice

1. What is the main purpose of a shared module in Angular?

easy

A. To store environment configuration settings

B. To define the root component of the application

C. To group reusable components, directives, and pipes for easy sharing

D. To handle routing between different pages

Solution

1. Step 1: Understand the role of shared modules

   Shared modules are designed to hold components, directives, and pipes that multiple parts of the app can use.

2. Step 2: Compare with other module purposes

   Root modules handle app startup, routing modules manage navigation, and environment files store settings, not reusable UI parts.

3. Final Answer:

   To group reusable components, directives, and pipes for easy sharing -> Option C

4. Quick Check:

   Shared module = reusable parts [OK]

Hint: Shared modules bundle reusable UI parts for easy import [OK]

Common Mistakes:

• Confusing shared modules with root or routing modules
• Thinking shared modules store app settings
• Assuming shared modules handle navigation

2. Which of the following is the correct way to export a component from a shared module?

easy

A. Add the component to both declarations and exports arrays in @NgModule

B. Add the component only to the imports array

C. Add the component only to the providers array

D. Add the component only to the bootstrap array

Solution

1. Step 1: Understand Angular module metadata

   Components must be declared in declarations to be recognized, and exported in exports to be usable outside the module.

2. Step 2: Check other arrays usage

   Imports bring in other modules, providers register services, bootstrap is for root components only.

3. Final Answer:

   Add the component to both declarations and exports arrays in @NgModule -> Option A

4. Quick Check:

   Declare + export = share component [OK]

Hint: Declare and export components to share them outside module [OK]

Common Mistakes:

• Putting components only in imports or providers
• Forgetting to export after declaring
• Using bootstrap array in shared modules

3. Given this shared module code, what will be the output when FeatureComponent uses SharedButtonComponent?

@NgModule({
  declarations: [SharedButtonComponent],
  exports: [SharedButtonComponent]
})
export class SharedModule {}

@NgModule({
  imports: [SharedModule],
  declarations: [FeatureComponent]
})
export class FeatureModule {}

If FeatureComponent template contains <app-shared-button>Click</app-shared-button>, what happens?

medium

A. The button renders correctly with text 'Click'

B. Error: 'app-shared-button' is not a known element

C. The button renders but without text

D. The app crashes at runtime

Solution

1. Step 1: Check module imports and exports

   SharedButtonComponent is declared and exported in SharedModule, which is imported by FeatureModule.

2. Step 2: Confirm component usage in FeatureComponent

   Since FeatureModule imports SharedModule, FeatureComponent can use SharedButtonComponent selector without error.

3. Final Answer:

   The button renders correctly with text 'Click' -> Option A

4. Quick Check:

   Imported shared module exports = component usable [OK]

Hint: Import shared module to use its exported components [OK]

Common Mistakes:

• Not importing SharedModule in FeatureModule
• Forgetting to export component in SharedModule
• Using component selector incorrectly

4. Identify the error in this shared module setup:

@NgModule({
  declarations: [SharedCardComponent],
  imports: [CommonModule]
})
export class SharedModule {}

@NgModule({
  imports: [SharedModule],
  declarations: [DashboardComponent]
})
export class DashboardModule {}

DashboardComponent template uses <app-shared-card> but Angular throws an error.

medium

A. CommonModule should not be imported in SharedModule

B. DashboardComponent should import SharedCardComponent directly

C. DashboardModule should declare SharedCardComponent again

D. SharedCardComponent is not exported from SharedModule

Solution

1. Step 1: Check SharedModule exports

   SharedCardComponent is declared but not exported, so other modules can't use it.

2. Step 2: Understand Angular module sharing rules

   To use a component from another module, it must be exported by that module.

3. Final Answer:

   SharedCardComponent is not exported from SharedModule -> Option D

4. Quick Check:

   Declare + export needed to share component [OK]

Hint: Always export components to share them outside module [OK]

Common Mistakes:

• Forgetting to export declared components
• Trying to redeclare components in feature modules
• Misunderstanding imports vs exports

5. You want to create a shared module that provides a reusable button component and a custom pipe. Which setup correctly allows any feature module to use both without redeclaring them?

// SharedModule
@NgModule({
  declarations: [SharedButtonComponent, CustomPipe],
  exports: [SharedButtonComponent, CustomPipe],
  imports: [CommonModule]
})
export class SharedModule {}

// FeatureModule
@NgModule({
  imports: [SharedModule],
  declarations: [FeatureComponent]
})
export class FeatureModule {}

What must you do in FeatureComponent template to use both?

hard

A. Import SharedButtonComponent and CustomPipe directly in FeatureComponent

B. Use <app-shared-button> and apply | customPipe in template expressions

C. Declare SharedButtonComponent and CustomPipe again in FeatureModule

D. Use <shared-button> and | CustomPipe with capital letters

Solution

1. Step 1: Confirm shared module exports

   SharedButtonComponent and CustomPipe are declared and exported in SharedModule, which FeatureModule imports.

2. Step 2: Use correct selectors and pipe names

   FeatureComponent can use selector and apply | customPipe (pipe names are case-sensitive and lowercase by convention).

3. Final Answer:

   Use <app-shared-button> and apply | customPipe in template expressions -> Option B

4. Quick Check:

   Import shared module + use selectors and pipe names correctly [OK]

Hint: Use exported selectors and pipe names exactly as declared [OK]

Common Mistakes:

• Redeclaring shared components or pipes in feature modules
• Using wrong selector or pipe name casing
• Trying to import components or pipes directly