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.