Service scope (root, module, component) in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Service instance count with root scope

Consider an Angular service provided in root scope. If you inject this service into two different components, how many instances of the service will be created?

A One instance per module containing the components

B Two separate instances, one per component

C One single instance shared by both components

D A new instance every time the service is injected

💡 Hint

Think about the providedIn: 'root' meaning in Angular services.

Services provided in root scope are singleton across the entire app. So only one instance is created and shared.

❓ component_behavior

intermediate

Service instance behavior with module scope

If a service is provided in a feature module (not root), and two components from that module inject it, how many instances of the service exist?

A One instance shared by all components in the module

B One instance per component

C One instance per lazy loaded module only

D One instance per app regardless of module

💡 Hint

Consider how Angular creates service instances for modules.

Services provided in a module are singleton within that module. All components in that module share the same instance.

❓ state_output

advanced

Service instance count with component scope

Given a service provided in a component's providers array, what happens when two instances of that component are created?

A Angular throws an error due to multiple instances

B Both components share the same service instance

C Service instance is shared across all components in the module

D Each component instance gets its own separate service instance

💡 Hint

Think about how component-level providers work in Angular.

When a service is provided in a component, each component instance gets a new service instance. They do not share it.

📝 Syntax

advanced

Correct syntax for providing a service in a module

Which of the following is the correct way to provide a service in an Angular module?

A Add the service class to the <code>providers</code> array in the module decorator

B Add the service class to the <code>declarations</code> array in the module decorator

C Add the service class to the <code>imports</code> array in the module decorator

D Add the service class to the <code>bootstrap</code> array in the module decorator

💡 Hint

Remember where Angular expects services to be listed in a module.

Services must be listed in the providers array to be injectable in that module.

🔧 Debug

expert

Unexpected multiple service instances in lazy loaded modules

You have a service provided in root scope. However, when you lazy load two different modules that inject this service, you notice two separate instances are created. What is the most likely cause?

A The service is not decorated with <code>@Injectable</code>

B The service is also listed in the <code>providers</code> array of each lazy loaded module

C The service is provided only in <code>root</code> and should not create multiple instances

D Angular does not support singleton services with lazy loaded modules

💡 Hint

Check if the service is accidentally provided in multiple places.

If a service is provided in root but also listed in providers of lazy loaded modules, Angular creates separate instances per module.