Shared modules for reusable components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does a shared module affect component reuse?

In Angular, you create a shared module that exports a button component. What happens when you import this shared module into two different feature modules and use the button component in both?

A You must declare the button component again in each feature module for it to work.

B Angular throws an error because the button component is declared in multiple modules.

C The button component only works in the first feature module that imports the shared module.

D The button component is available in both feature modules and renders correctly without duplication issues.

💡 Hint

Think about how Angular handles declarations and exports in shared modules.

When a component is declared and exported in a shared module, importing that shared module into multiple feature modules allows reuse without redeclaration. Angular does not duplicate the component but shares the same declaration.

📝 Syntax

intermediate

Identify the correct way to export components in a shared module

Which of the following Angular shared module code snippets correctly exports a reusable component named MyButtonComponent?

A imports: [CommonModule], declarations: [MyButtonComponent], exports: [MyButtonComponent]

B imports: [CommonModule], declarations: [], exports: [MyButtonComponent]

C imports: [CommonModule], declarations: [MyButtonComponent], exports: []

D imports: [], declarations: [MyButtonComponent], exports: [MyButtonComponent]

💡 Hint

Remember that a component must be declared before it can be exported.

A component must be declared in the module's declarations array before it can be exported. Also, importing CommonModule is standard for shared modules to use common directives.

🔧 Debug

advanced

Why does importing a shared module cause a 'component is not a known element' error?

You created a shared module exporting MyCardComponent. You imported the shared module into a feature module but get an error: 'my-card' is not a known element. What is the most likely cause?

A The shared module does not export <code>MyCardComponent</code> in its exports array.

B The <code>MyCardComponent</code> is declared in the feature module instead of the shared module.

C The feature module forgot to import <code>CommonModule</code>.

D Angular requires components to be declared in every module where they are used.

💡 Hint

Check if the component is both declared and exported in the shared module.

If a component is declared but not exported in a shared module, importing that module does not make the component available to other modules. Exporting is necessary for reuse.

❓ lifecycle

advanced

How does Angular handle service instances in shared modules?

You provide a service in a shared module and import this module into multiple feature modules. How many instances of the service will Angular create at runtime?

A One single instance shared across all modules importing the shared module.

B One instance per feature module that imports the shared module.

C A new instance every time the service is injected in a component.

D No instances are created unless the service is provided in the root injector.

💡 Hint

Consider where the service is provided and how Angular injectors work.

Providing a service in a shared module creates a new instance for each module that imports it, because each module has its own injector. To share a single instance app-wide, provide the service in the root injector.

🧠 Conceptual

expert

Best practice for organizing reusable components and services in Angular

You want to create a shared module for reusable UI components and services used across many feature modules. Which approach follows Angular best practices for shared modules?

A Create one shared module that declares and exports all components and provides all services.

B Declare components and provide services directly in each feature module to avoid shared module complexity.

C Create separate shared modules: one for components (exported) and one for services (providedIn root), then import only needed modules.

D Provide services in shared modules and import these modules multiple times to get fresh instances.

💡 Hint

Think about separation of concerns and service instance management.

Best practice is to separate reusable components into a shared module that exports them, and provide services using providedIn: 'root' to ensure singleton instances. This avoids multiple service instances and keeps modules focused.

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