@Injectable decorator and providedIn in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Injectable decorator in Angular?

The @Injectable decorator marks a class as available to be provided and injected as a dependency in Angular's dependency injection system.

beginner

What does the providedIn property inside @Injectable do?

The providedIn property tells Angular where to provide the service, such as 'root' for application-wide singleton or a specific module, controlling the service's scope and lifetime.

beginner

What happens if you set providedIn: 'root' in @Injectable?

The service is registered in the root injector, making it a singleton available throughout the whole app without needing to add it to any module's providers array.

intermediate

Can you provide a service only in a specific Angular module using providedIn?

Yes, you can set providedIn to a specific module class to limit the service's availability only to that module and its children.

intermediate

Why is using providedIn preferred over adding services to the providers array in Angular modules?

Using providedIn enables tree-shaking, so unused services are removed from the final build, and it simplifies service registration by avoiding manual providers array management.

What does the @Injectable decorator do in Angular?

A Registers a route in the router

B Defines a component's template

C Marks a class as injectable for dependency injection

D Creates a new Angular module

The @Injectable decorator marks a class so Angular can inject it as a dependency.

What is the effect of setting providedIn: 'root' in @Injectable?

A Service is available app-wide as a singleton

B Service is only available in the current component

C Service is not injectable

D Service is provided only in lazy-loaded modules

providedIn: 'root' registers the service in the root injector for app-wide use.

How does providedIn help with tree-shaking?

A It increases the bundle size

B It forces all services to be included

C It disables dependency injection

D It allows unused services to be removed from the final build

Using providedIn lets Angular remove unused services during build optimization.

If you want a service only in a specific module, what should you do?

A Set providedIn to 'root'

B Set providedIn to that module's class

C Add the service to the component's providers array

D Use @Component decorator instead

Setting providedIn to a module limits the service scope to that module.

What happens if you omit providedIn in @Injectable?

A You must add the service manually to a providers array

B The service is automatically provided in root

C The service cannot be injected

D Angular throws a compile error

Without providedIn, you must register the service manually in a providers array.

Explain how the @Injectable decorator and providedIn property work together in Angular services.

Think about how Angular knows where and how to provide a service.

Describe the advantages of using providedIn over adding services to module providers arrays.

Consider build size and ease of use.

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