Optional providers in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the provider as optional in the constructor.

NestJS

constructor(@[1]() private readonly service?: MyService) {}

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

AInject()

BController()

CInjectable()

DOptional()

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Injectable() instead of @Optional()

Forgetting to add the decorator

Using @Inject() alone without @Optional()

The @Optional() decorator marks the provider as optional, so NestJS won't throw an error if it is missing.

2fill in blank

medium

Complete the code to import the Optional decorator from the correct package.

NestJS

import { [1] } from '@nestjs/common';

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

AInjectable

BOptional

CController

DModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Injectable instead of Optional

Importing from wrong package

Misspelling the decorator name

The Optional decorator is imported from @nestjs/common to mark providers as optional.

3fill in blank

hard

Fix the error in the constructor to correctly inject an optional provider.

NestJS

constructor(@Optional() private readonly service?: [1]) {}

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

AOptional<MyService>

BMyService?

CMyService

DMyService | null

Attempts:

3 left

💡 Hint

Common Mistakes

Changing the type to a union or optional type instead of using the decorator

Not using @Optional() decorator

Using incorrect syntax for optional types

To inject an optional provider, you must use the @Optional() decorator on the parameter, not change the type. The correct way is to decorate the parameter, not change its type.

4fill in blank

hard

Fill both blanks to correctly inject an optional provider with a custom token.

NestJS

constructor(@[1]('MY_TOKEN') @[2]() private readonly service?: MyService) {}

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

AInject

BOptional

CController

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Reversing the order of decorators

Using wrong decorators like @Controller or @Injectable

Omitting @Optional() decorator

When injecting a provider by a custom token, use @Inject('TOKEN'). To make it optional, add @Optional() decorator.

5fill in blank

hard

Fill all three blanks to create an optional provider with a default value fallback.

NestJS

const defaultService = [3];

constructor(@[1]() private readonly service?: MyService) {
  this.service = this.service ?? [2];
}

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

AOptional

BdefaultService

Cnew MyService()

DInject

Attempts:

3 left

💡 Hint

Common Mistakes

Not using @Optional() decorator

Forgetting to assign default value

Using wrong variable names

The @Optional() decorator marks the provider as optional. If it's not injected, the code assigns a default instance new MyService() to defaultService and uses it as fallback.

Practice

1. What is the main purpose of using @Optional() in a NestJS provider?

easy

A. To make a provider always required and throw error if missing

B. To mark a dependency as optional, so it may be undefined if not provided

C. To automatically create a new instance of the provider

D. To disable dependency injection for that provider

Solution

1. Step 1: Understand the role of @Optional()

   @Optional() tells NestJS that the dependency might not be available and should not cause an error if missing.

2. Step 2: Compare with required providers

   Without @Optional(), NestJS throws an error if the provider is not found. With @Optional(), it injects undefined instead.

3. Final Answer:

   To mark a dependency as optional, so it may be undefined if not provided -> Option B

4. Quick Check:

   @Optional() = marks provider optional [OK]

Hint: Optional means provider can be missing without error [OK]

Common Mistakes:

• Thinking @Optional() makes provider required
• Assuming @Optional() creates new instances
• Believing @Optional() disables injection

2. Which of the following is the correct way to inject an optional provider in a NestJS constructor?

easy

A. constructor(@Optional() private readonly service: MyService) {}

B. constructor(private readonly service: MyService) {}

C. constructor(@InjectOptional() private readonly service: MyService) {}

D. constructor(@Optional private service: MyService) {}

Solution

1. Step 1: Recall the correct decorator syntax

   The correct decorator to mark a provider optional is @Optional() with parentheses.

2. Step 2: Check each option

   constructor(private readonly service: MyService) {} lacks @Optional, so provider is required. constructor(@InjectOptional() private readonly service: MyService) {} uses a non-existent decorator. constructor(@Optional private service: MyService) {} misses parentheses on @Optional.

3. Final Answer:

   constructor(@Optional() private readonly service: MyService) {} -> Option A

4. Quick Check:

   @Optional() decorator syntax requires parentheses [OK]

Hint: Use @Optional() with parentheses before the parameter [OK]

Common Mistakes:

• Forgetting parentheses on @Optional()
• Using wrong decorator names
• Not marking provider optional in constructor

3. Given the following code, what will be the output when MyService is NOT provided in the module?

constructor(@Optional() private readonly myService?: MyService) {}

useService() {
  return this.myService ? 'Service available' : 'Service missing';
}

medium

A. "Service missing"

B. "Service available"

C. Runtime error: Cannot read property of undefined

D. Compilation error due to missing provider

Solution

1. Step 1: Understand @Optional() effect when provider missing

   When MyService is not provided, the injected value is undefined, not an error.

2. Step 2: Analyze the useService method

   The method checks if myService exists. Since it's undefined, it returns "Service missing".

3. Final Answer:

   "Service missing" -> Option A

4. Quick Check:

   Missing optional provider = undefined, so returns "Service missing" [OK]

Hint: Optional provider missing means undefined, check before use [OK]

Common Mistakes:

• Expecting runtime error when provider missing
• Assuming provider is always injected
• Ignoring undefined check before usage

4. Identify the error in this NestJS service constructor using an optional provider:

constructor(@Optional() private readonly service: MyService) {
  this.service.doSomething();
}

medium

A. Missing @Inject decorator for MyService

B. Service should not be private readonly

C. Calling method on possibly undefined service without check

D. Incorrect use of @Optional() decorator without parentheses

Solution

1. Step 1: Check usage of optional provider

   @Optional() means service can be undefined if not provided.

2. Step 2: Analyze method call in constructor

   Calling this.service.doSomething() without checking if service exists can cause runtime error.

3. Final Answer:

   Calling method on possibly undefined service without check -> Option C

4. Quick Check:

   Always check optional provider before use [OK]

Hint: Check if optional provider exists before calling methods [OK]

Common Mistakes:

• Calling methods on undefined optional providers
• Assuming @Optional() means always injected
• Ignoring runtime errors from missing checks

5. You want to inject an optional logging service in your NestJS component. If the logging service is missing, your component should still work without errors. Which approach correctly implements this behavior?

export class MyComponent {
  constructor(@Optional() private readonly logger?: LoggerService) {}

  logMessage(msg: string) {
    // What should you do here?
  }
}

hard

A. Call this.logger.log(msg) directly without checks

B. Throw an error if this.logger is undefined

C. Remove @Optional() to ensure logger is always injected

D. Use if (this.logger) this.logger.log(msg); to check before calling

Solution

1. Step 1: Understand optional injection with @Optional()

   The logger may be undefined if not provided, so direct calls risk runtime errors.

2. Step 2: Implement safe usage in method

   Check if this.logger exists before calling log() to avoid errors.

3. Final Answer:

   Use if (this.logger) this.logger.log(msg); to check before calling -> Option D

4. Quick Check:

   Check optional provider exists before use to avoid errors [OK]

Hint: Always check optional provider before method calls [OK]

Common Mistakes:

• Calling methods without existence check
• Throwing errors instead of handling missing provider
• Removing @Optional() and causing injection errors