Service scope (root, module, component) in Angular - Step-by-Step Execution

Concept Flow - Service scope (root, module, component)

App starts

↓

Inject Service

↓

Check Service Scope

When Angular injects a service, it checks where the service is provided: root, module, or component. This decides if the service is shared app-wide, shared in a module, or unique per component.

Execution Sample

Angular

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DataService {
  count = 0;
}

Defines a service provided at root scope, so Angular creates one shared instance for the whole app.

Execution Table

Step	Action	Service Scope Checked	Instance Created?	Instance Shared?	Notes
1	App starts and component A requests DataService	root	Yes	Yes (singleton)	Service instance created at root level
2	Component B requests DataService	root	No	Yes (shared)	Same instance reused for component B
3	Module X requests DataService provided in module	module	Yes	Yes (module singleton)	New instance created for module X
4	Component C inside Module X requests DataService	module	No	Yes (shared in module)	Module instance reused
5	Component D requests DataService provided in component	component	Yes	No (unique)	New instance created for component D
6	Component E requests DataService provided in component	component	Yes	No (unique)	New instance created for component E
7	App ends	-	-	-	No new instances created

💡 Execution stops after all components and modules have requested the service and instances are created or reused based on scope.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	Final
DataService Instances	0	1 (root instance)	1 (root instance)	2 (root + module)	2 (root + module)	3 (root + module + comp D)	4 (root + module + comp D + comp E)	4 (final count)

Key Moments - 3 Insights

Why does requesting the service in component scope create multiple instances?

Because each component that provides the service gets its own instance, as shown in steps 5 and 6 where new instances are created for each component.

Why is the service instance shared between components when provided in root scope?

Because root scope creates a singleton instance shared app-wide, as seen in steps 1 and 2 where the same instance is reused.

What happens when a service is provided in a module?

A new singleton instance is created per module, shared by components inside that module, as shown in steps 3 and 4.

Visual Quiz - 3 Questions

Look at the execution table, how many DataService instances exist after step 4?

A 3

B 2

C 1

D 4

💡 Hint

Check the 'Instance Created?' and 'Instance Shared?' columns for steps 1 to 4.

At which step does a new instance get created for each component?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Look for 'component' scope and 'Instance Created?' marked 'Yes' in the table.

If the service was only provided in root, what would happen at step 3?

A A new instance would be created for the module

B Multiple instances would be created for each component

C No new instance would be created; root instance reused

D The app would crash

💡 Hint

Refer to how root scope shares one instance app-wide in steps 1 and 2.

Concept Snapshot

Service scope in Angular decides how many instances of a service exist:
- providedIn: 'root' creates one singleton for the whole app
- providedIn: module creates one singleton per module
- providedIn: component creates a new instance per component
This affects sharing and state across components.

Full Transcript

When Angular starts, it creates service instances based on where the service is provided. If provided in root, one instance is shared by all components. If provided in a module, one instance is shared by components in that module only. If provided in a component, each component gets its own instance. This means state in the service can be shared or isolated depending on scope. The execution table shows steps where components request the service and whether a new instance is created or reused. Variable tracking shows how many instances exist over time. Key moments clarify why component scope creates multiple instances and root scope shares one. The quiz tests understanding of instance counts and scope effects.