@Injectable decorator and providedIn in Angular - Performance & Optimization

Performance: @Injectable decorator and providedIn

MEDIUM IMPACT

This concept affects the bundle size and initial load time by controlling service tree-shaking and injection scope.

Providing a service in Angular for dependency injection

Angular

@Injectable({ providedIn: 'root' })
export class DataService {}

Service is tree-shakable and only included if used, reducing bundle size and improving load time.

📈 Performance GainSaves KBs in bundle and speeds up LCP by reducing JS to parse

Providing a service in Angular for dependency injection

Angular

@Injectable()
export class DataService {}

@NgModule({
  providers: [DataService]
})
export class AppModule {}

Service is provided in the module providers array, preventing tree-shaking and increasing bundle size.

📉 Performance CostAdds extra KB to bundle and delays initial load due to larger JS size

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Providing service in NgModule providers	0	0	0	[X] Bad
Using @Injectable({ providedIn: 'root' })	0	0	0	[OK] Good

Rendering Pipeline

The Angular compiler uses the providedIn metadata to decide if a service should be included in the bundle. This affects the JavaScript parsing and execution during page load.

→JavaScript Parsing

→Execution

→Bundle Loading

⚠️ BottleneckBundle Loading and Parsing

Core Web Vital Affected

LCP

This concept affects the bundle size and initial load time by controlling service tree-shaking and injection scope.

Optimization Tips

1Always use providedIn in @Injectable to enable tree-shaking.

2Avoid providing services in NgModule providers unless necessary.

3Smaller bundles improve Largest Contentful Paint (LCP) and user experience.

Performance Quiz - 3 Questions

What is the main performance benefit of using providedIn in @Injectable?

A Improves CSS selector matching speed

B Automatically triggers DOM reflows

C Enables tree-shaking to reduce bundle size

D Reduces HTTP requests for images

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and check JS bundle sizes and load times.

What to look for: Smaller bundle size and faster JS load indicate good use of providedIn for tree-shaking.

Practice

1. What is the main purpose of the @Injectable decorator in Angular?

easy

A. To mark a class as a service that Angular can inject

B. To define a component's template

C. To register a module in Angular

D. To create a new Angular directive

Solution

1. Step 1: Understand the role of @Injectable

   The @Injectable decorator tells Angular that the class can be used as a service and injected into other classes.

2. Step 2: Differentiate from other decorators

   Other decorators like @Component or @NgModule serve different purposes, not marking services.

3. Final Answer:

   To mark a class as a service that Angular can inject -> Option A

4. Quick Check:

   @Injectable = marks service [OK]

Hint: Remember: @Injectable means service ready for injection [OK]

Common Mistakes:

• Confusing @Injectable with @Component
• Thinking it registers modules
• Assuming it creates directives

2. Which of the following is the correct syntax to provide a service at the root level using @Injectable?

easy

A. @Injectable({ provideIn: 'root' })

B. @Injectable({ providedIn: 'root' })

C. @Injectable({ providedAt: 'root' })

D. @Injectable({ provideAt: 'root' })

Solution

1. Step 1: Recall the correct property name

   The correct property to specify where the service is provided is providedIn, not provideIn or others.

2. Step 2: Confirm the value for root-level provision

   Using 'root' as the value means the service is available app-wide as a singleton.

3. Final Answer:

   @Injectable({ providedIn: 'root' }) -> Option B

4. Quick Check:

   providedIn: 'root' is correct syntax [OK]

Hint: Use exact property name providedIn with value 'root' [OK]

Common Mistakes:

• Misspelling providedIn as provideIn
• Using providedAt or provideAt
• Omitting quotes around 'root'

3. Given the following service code, what will Angular do when this service is injected?

 @Injectable({ providedIn: 'root' })
 export class DataService {
   constructor() { console.log('Service created'); }
 }

medium

A. Angular creates a new instance every time the service is injected

B. Angular does not create the service unless manually added to providers

C. Angular throws an error because providedIn is incorrect

D. Angular creates a single instance shared across the app

Solution

1. Step 1: Understand providedIn: 'root'

   This means Angular will create one singleton instance of the service for the whole app.

2. Step 2: Check service creation behavior

   The constructor logs 'Service created' only once when the singleton is created, not on every injection.

3. Final Answer:

   Angular creates a single instance shared across the app -> Option D

4. Quick Check:

   providedIn: 'root' means singleton service [OK]

Hint: Remember: 'root' means one shared instance app-wide [OK]

Common Mistakes:

• Thinking a new instance is created on each injection
• Assuming an error due to wrong providedIn
• Believing manual provider registration is needed

4. Identify the error in this service declaration:

 @Injectable({
   providedIn: root
 })
 export class LoggerService {}

medium

A. Incorrect decorator name, should be @InjectableService

B. Service class must have a constructor

C. Missing quotes around 'root' in providedIn

D. providedIn cannot be used in @Injectable

Solution

1. Step 1: Check syntax of providedIn value

   The value 'root' must be a string, so it needs quotes: 'root'. Without quotes, it's treated as an undefined variable.

2. Step 2: Verify other parts

   The decorator name @Injectable is correct, constructor is optional, and providedIn is valid here.

3. Final Answer:

   Missing quotes around 'root' in providedIn -> Option C

4. Quick Check:

   String values need quotes in providedIn [OK]

Hint: Always put quotes around string values in decorators [OK]

Common Mistakes:

• Omitting quotes around 'root'
• Confusing decorator names
• Thinking constructor is mandatory

5. You want to create a service that is only available inside a specific feature module, not app-wide. Which is the best way to configure @Injectable and providedIn to achieve this?

hard

A. Use @Injectable() without providedIn and add the service to the feature module's providers array

B. Use @Injectable({ providedIn: FeatureModule }) where FeatureModule is the module class

C. Use @Injectable({ providedIn: 'root' }) and import the service in the feature module

D. Use @Injectable({ providedIn: 'any' }) to limit service to the feature module

Solution

1. Step 1: Understand providedIn options

   Using providedIn: 'root' makes the service app-wide singleton, so not limited to a feature module.

2. Step 2: Provide service only in feature module

   Using providedIn: FeatureModule where FeatureModule is the NgModule class is possible but not officially recommended or supported in all Angular versions. The standard way is to omit providedIn and add the service to the feature module's providers array.

3. Step 3: Evaluate other options

   providedIn: 'any' creates a new instance in each injector but does not restrict to a single module. Importing with providedIn: 'root' makes it app-wide.

4. Final Answer:

   Use @Injectable() without providedIn and add the service to the feature module's providers array -> Option A

5. Quick Check:

   Omitting providedIn and adding to providers array scopes service to module [OK]

Hint: Omit providedIn and add to feature module providers for module scope [OK]

Common Mistakes:

• Using providedIn: 'root' for feature-only service
• Using providedIn: FeatureModule which is not standard
• Misunderstanding providedIn: 'any' scope