Service scope (root, module, component) in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when a service is provided in the root scope in Angular?

A service provided in the root scope is a singleton shared across the entire application. It is created once and available everywhere.

intermediate

How does providing a service in a module affect its scope?

When a service is provided in a module, it is shared only among components and other services within that module. It is not global to the whole app.

intermediate

What happens if a service is provided in a component's providers array?

Providing a service in a component creates a new instance of that service for that component and its children. This means each component instance gets its own service instance.

intermediate

Why might you want to provide a service at the component level instead of root?

Providing a service at the component level allows each component to have its own independent service instance. This is useful for isolating state or behavior per component.

advanced

How does Angular decide which service instance to inject when multiple scopes provide the same service?

Angular uses hierarchical injection. It starts looking from the component's injector up to the root. The closest provider in the hierarchy is used.

If a service is provided in root, how many instances exist in the app?

A One shared instance

B One instance per module

C One instance per component

D A new instance every time it is injected

A service provided in root is a singleton shared across the entire app.

Where do you provide a service to limit its scope only to a specific module?

A In the component's providers array

B In the root injector

C In the module's providers array

D In the main.ts file

Providing a service in a module's providers array limits its scope to that module.

What is the effect of providing a service in a component's providers array?

A Creates a singleton service for the whole app

B Creates a new service instance for that component and its children

C Makes the service unavailable to that component

D Overrides the service globally

Providing a service in a component creates a new instance for that component and its children.

How does Angular resolve which service instance to inject when multiple providers exist?

A It uses the closest provider in the component hierarchy

B It picks a random instance

C It always uses the root instance

D It throws an error

Angular uses hierarchical injection and picks the closest provider in the component tree.

Why might you avoid providing a service in root if you want isolated state?

A Because root services cannot be lazy loaded

B Because root services are not injectable

C Because root services are slower

D Because root services share state across the app

Root services are singletons and share state across the app, so they don't isolate state per component.

Explain the differences between providing a service in root, module, and component scopes in Angular.

Think about how many instances of the service exist and where they are shared.

Describe a scenario where providing a service at the component level is better than providing it in root.

Consider when you want separate behavior or data for each component.