@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.