@Injectable decorator and providedIn in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the @Injectable decorator in Angular?

The @Injectable decorator marks a class as available to be provided and injected as a dependency in Angular's dependency injection system.

beginner

What does the providedIn property inside @Injectable do?

The providedIn property tells Angular where to provide the service, such as 'root' for application-wide singleton or a specific module, controlling the service's scope and lifetime.

beginner

What happens if you set providedIn: 'root' in @Injectable?

The service is registered in the root injector, making it a singleton available throughout the whole app without needing to add it to any module's providers array.

intermediate

Can you provide a service only in a specific Angular module using providedIn?

Yes, you can set providedIn to a specific module class to limit the service's availability only to that module and its children.

intermediate

Why is using providedIn preferred over adding services to the providers array in Angular modules?

Using providedIn enables tree-shaking, so unused services are removed from the final build, and it simplifies service registration by avoiding manual providers array management.

What does the @Injectable decorator do in Angular?

A Registers a route in the router

B Defines a component's template

C Marks a class as injectable for dependency injection

D Creates a new Angular module

The @Injectable decorator marks a class so Angular can inject it as a dependency.

What is the effect of setting providedIn: 'root' in @Injectable?

A Service is available app-wide as a singleton

B Service is only available in the current component

C Service is not injectable

D Service is provided only in lazy-loaded modules

providedIn: 'root' registers the service in the root injector for app-wide use.

How does providedIn help with tree-shaking?

A It increases the bundle size

B It forces all services to be included

C It disables dependency injection

D It allows unused services to be removed from the final build

Using providedIn lets Angular remove unused services during build optimization.

If you want a service only in a specific module, what should you do?

A Set providedIn to 'root'

B Set providedIn to that module's class

C Add the service to the component's providers array

D Use @Component decorator instead

Setting providedIn to a module limits the service scope to that module.

What happens if you omit providedIn in @Injectable?

A You must add the service manually to a providers array

B The service is automatically provided in root

C The service cannot be injected

D Angular throws a compile error

Without providedIn, you must register the service manually in a providers array.

Explain how the @Injectable decorator and providedIn property work together in Angular services.

Think about how Angular knows where and how to provide a service.

Describe the advantages of using providedIn over adding services to module providers arrays.

Consider build size and ease of use.