Angular cannot inject service: complete error breakdown

Introduction: why does Angular scream "Can't resolve all parameters"?

You are writing your first Angular component, proudly add a service for working with the API in the constructor, run the application — and immediately get a red message in the console:

EXCEPTION: Can't resolve all parameters for MyComponent: (?).

Sound familiar? This error is a real stumbling block for beginners and even experienced developers transitioning from AngularJS. It occurs when Angular cannot figure out which service to inject into the component. In this article, we will break down all the causes of the Can't resolve all parameters for component error, show live examples in TypeScript, and provide step-by-step solutions. You will not only fix the bug but also understand how Dependency Injection (DI) works in Angular.

What is Dependency Injection and why is it important?

Angular is built on a Dependency Injection (DI) system. When you write:

constructor(private myService: MyService) {}

Angular automatically creates an instance of MyService and passes it to the component. But for this, it needs to know three things:

• Which type (class) to inject.
• Where the provider for this type is registered.
• What to do if there is no provider.

If at least one of these points is not met, you get the "Can't resolve all parameters" error.

Main causes of the error

We have identified the 5 most common scenarios that lead to this error. We will analyze each one with code.

1. Service not registered in providers

The most obvious reason. You created a service but forgot to add it to the providers of the module or component.

Example of erroneous code:

// my.service.ts@Injectable()export class MyService {  getData() { return 'data'; }}

// my.component.ts@Component({ selector: 'app-my', template: '...' })export class MyComponent {  constructor(private myService: MyService) {} // Error!}

Solution: Register the service in the module:

@NgModule({  providers: [MyService] // <-- mandatory})export class AppModule { }

Or in the component itself (if the service is only needed by it):

@Component({  providers: [MyService]})export class MyComponent { ... }

2. Missing @Injectable() decorator

Even if you registered the service in the providers, but forgot to add the @Injectable() decorator — Angular will not be able to read the metadata.

Example:

// Without decoratorexport class MyService { ... }

// In the componentconstructor(private myService: MyService) {} // Error!

Solution: Always add @Injectable():

@Injectable({ providedIn: 'root' }) // or just @Injectable()export class MyService { ... }

By the way, providedIn: 'root' automatically registers the service at the root injector level — this is a modern and recommended approach.

3. Conflict with AOT compilation and constructor parameters

Angular uses two compilation modes: JIT (Just-in-Time) and AOT (Ahead-of-Time). The Can't resolve all parameters error often occurs with AOT if TypeScript did not preserve the type information of the parameters.

Cause: In older versions of Angular (before 5) or when using certain tsconfig settings, TypeScript could remove type metadata. For example, if you used emitDecoratorMetadata: false or forgot to import reflect-metadata.

Solution:

• Make sure that in tsconfig.json you have "emitDecoratorMetadata": true and "experimental