CODEWITHSUNDEEP
angulartypescriptdependency-injection
Maciej Treder
Maciej Treder

Reputation: 12342

@Injectable doesn't work while @Inject works

I ran into strange issue.

I got really simple service:

import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class EchoService {
   constructor(private httpClient: HttpClient) {}

   public makeCall(): Observable<any> {
       return this.httpClient.get<any>('https://jsonplaceholder.typicode.com/posts/1');
   }
}

Now I am trying to reuse it in my component:

import { Component, Inject, OnInit } from '@angular/core';
import { EchoService } from './services/echo.service';
import { Observable } from 'rxjs/Observable';

@Component({
 selector: 'my-app',
 templateUrl: `app.component.html`,
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
   public response: Observable<any>;

   constructor(private echoService: EchoService) {}

   public ngOnInit(): void {
       this.response = this.echoService.makeCall();
   }
}

And... I am running into Uncaught Error: Can't resolve all parameters for EchoService: (?).

When I am switching from @Injectable to @Inject, everything works:

 constructor(@Inject(HttpClient) private httpClient: HttpClient) {}

and in component:

 constructor(@Inject(EchoService) private echoService: EchoService) {}

My tsconfig.json is:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "dom", "esnext" ]
  }
}

What's the case? Why @Injectable doesn't work, while @Inject works?

Upvotes: 0

Views: 431

Answers (3)

Alexander Serdyukov
Alexander Serdyukov

Reputation: 31

The same situation. When I migrated project from Angular 5 to 7 version. For me works:

add to tsconfig.json - "emitDecoratorMetadata": true

full tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "moduleResolution": "node",
    "target": "es2015",
    "rootDir": "./src",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "skipLibCheck": true,
    "types": []
  }
}

Upvotes: 1

chestas
chestas

Reputation: 124

If I understand correctly, you should add reflect-metadata library. https://www.typescriptlang.org/docs/handbook/decorators.html#metadata

Upvotes: 0

erosb
erosb

Reputation: 3141

Please check your @NgModule declaration maybe you miss the HttpClientModule from the imports list.

Upvotes: 0

Related Questions