@Injectable decorator and providedIn in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the providedIn property in @Injectable control?

In Angular, the @Injectable decorator can have a providedIn property. What does this property control?

A It defines the CSS styles applied to the service's components.

B It specifies the HTML element where the service will be rendered.

C It controls where the service is registered in the dependency injection system, determining its scope and lifetime.

D It sets the HTTP endpoint URL for the service's API calls.

💡 Hint

Think about how Angular knows where to create and share the service instance.

The providedIn property tells Angular which injector will provide the service. For example, providedIn: 'root' makes the service a singleton available application-wide.

❓ component_behavior

intermediate

What happens if you omit providedIn in @Injectable?

Consider this Angular service without providedIn:

 @Injectable()
 export class MyService {}

What is the effect of omitting providedIn?

A The service is not automatically provided anywhere and must be added to a module's providers array to be injectable.

B The service is provided only in the component where it is injected.

C The service will cause a compile-time error due to missing providedIn.

D The service is automatically provided in the root injector by default.

💡 Hint

Think about how Angular knows where to create the service instance if not told explicitly.

Without providedIn, Angular does not know where to provide the service. You must add it to a module's providers array manually.

📝 Syntax

advanced

Which @Injectable syntax correctly provides a service in the root injector?

Select the correct Angular service declaration that provides the service in the root injector using @Injectable:

A

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

B

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

C

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

D

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

💡 Hint

Check the exact spelling of the property name in the decorator.

The correct property name is providedIn. Other spellings cause syntax errors or are ignored.

❓ state_output

advanced

How many instances of a service with providedIn: 'root' are created?

If a service is declared with @Injectable({ providedIn: 'root' }) and injected into multiple components, how many instances of the service exist at runtime?

A One instance per module that imports the service.

B One instance per component that injects the service.

C A new instance every time the service is injected.

D One single instance shared across the entire application.

💡 Hint

Think about the meaning of the root injector in Angular.

The root injector creates a singleton instance of the service shared by all components and modules.

🔧 Debug

expert

Why does this service cause a runtime error?

Given this Angular service:

@Injectable({ providedIn: 'module' })
export class LoggerService {
  constructor() { console.log('Logger created'); }
}

And this component:

@Component({ selector: 'app-test', template: '' })
export class TestComponent {
  constructor(private logger: LoggerService) {}
}

When running the app, a runtime error says the service cannot be found. What is the most likely cause?

A The service is missing from the module's providers array, so it is not injectable.

B The 'module' value for providedIn is invalid and causes Angular not to provide the service.

C The service constructor is missing the @Inject decorator.

D The component selector is invalid, preventing injection.

💡 Hint

Check if 'module' is a valid value for providedIn and how Angular provides services.

The value 'module' is not a valid option for providedIn. To use a custom injector scope, the service must be added to a providers array. Without that, Angular cannot inject it.

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