@Injectable decorator and providedIn in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the service injectable in Angular.

Angular

import { [1] } from '@angular/core';

@Injectable()
export class DataService {
  constructor() {}
}

Drag options to blanks, or click blank then click option'

ANgModule

BInjectable

CComponent

DDirective

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Component instead of @Injectable

Forgetting to import @Injectable

Using @NgModule or @Directive by mistake

The @Injectable decorator marks the class as available to be injected as a service.

2fill in blank

medium

Complete the code to provide the service in the root injector.

Angular

@Injectable({ providedIn: '[1]' })
export class LoggerService {
  log(message: string) {
    console.log(message);
  }
}

Drag options to blanks, or click blank then click option'

Aplatform

Bany

Croot

Dmodule

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'platform' or 'module' which are less common scopes

Forgetting to add providedIn property

Setting providedIn: 'root' makes the service available application-wide.

3fill in blank

hard

Fix the error in the service decorator to correctly provide it in any injector.

Angular

@Injectable({ providedIn: [1] })
export class ApiService {}

Drag options to blanks, or click blank then click option'

A'root'

B'module'

C'platform'

D'any'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'root' when multiple instances are needed

Using an invalid string or missing quotes

Using providedIn: 'any' allows the service to be provided in any injector, creating a new instance in lazy loaded modules.

4fill in blank

hard

Fill both blanks to create a service provided only in a specific module.

Angular

@Injectable({ providedIn: [1] })
export class FeatureService {
  constructor() {}
}

@NgModule({
  providers: [[2]]
})
export class FeatureModule {}

Drag options to blanks, or click blank then click option'

Anull

BFeatureService

Croot

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'root' or 'any' with providers array

Forgetting to add the service to providers

Setting providedIn: null disables automatic provision, so the service must be added to the module's providers array.

5fill in blank

hard

Fill all three blanks to create a service with a factory provider and root scope.

Angular

@Injectable({ providedIn: '[1]', useFactory: [2] })
export class ConfigService {
  constructor(public config: any) {}
}

export function createConfig() {
  return new ConfigService({ apiUrl: 'https://api.example.com' });
}

@NgModule({
  providers: [
    { provide: ConfigService, useFactory: [3] }
  ]
})
export class AppModule {}

Drag options to blanks, or click blank then click option'

Aroot

BcreateConfig

Dany

Attempts:

3 left

💡 Hint

Common Mistakes

Using different factory names in decorator and providers

Missing providedIn or using wrong scope

The service is provided in root with a factory function createConfig used both in the decorator and module providers.

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