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