Angular 4 HttpClient in Component Can't resolve all parameters

Question

I started learning Angular 4 and got to the part with HTTP Client. Right now I'm trying to make an http call from the component (yes, I know I should transfer it to service, but still)

But for some reason, when I try to inject HttpClient into my Component I get the next error:

Uncaught Error: Can't resolve all parameters for PromocodeComponent: (?).

Here's the code of my component:

import { Ticket } from '../../classes/Ticket.class'
import { Component, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'promocode',
  templateUrl: './promocode.template.html',
  styleUrls: ['./promocode.styles.scss']
})
export class PromocodeComponent {
  @Input() ticket: Ticket;
  state: String = "normal";
  promocode: String = "";

   constructor(private http: HttpClient) {}

  promocodeValidate(event): void{
    console.log(this.promocode);
    console.log(event);
    this.http.get('/promocode/asdasda').subscribe(data => {
      console.log(data);
    });
  }
}

And my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MovieBadgeComponent } from './movie-badge/movie-badge.component';
import { TicketComponent } from './ticket/ticket.component';
import { PromocodeComponent} from './promocode/promocode.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    MovieBadgeComponent,
    TicketComponent,
    PromocodeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

Could it be a hierarchy problem? Try importing the @angular/.. components before the ./app.. components. — Sajal
– Sajal, Commented Oct 30, 2017 at 10:50

Lucas · Accepted Answer · 2017-12-15 22:17:25Z

18

It turned out, for me, that I forgot the @Injectable decorator on my service. In earlier angular (>=2), i remember the @Injectable as being optional... Guess not anymore?

answered Dec 15, 2017 at 22:17

Lucas

15.1k10 gold badges79 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Christian Benseler Over a year ago

I was having the same problem,missing the @Injectable in an Angular 4 app.

Thisisalexis Over a year ago

I was getting the same error and it was the problem. Thank you.

Darin Cardin Over a year ago

You have saved my day, and possibly my life.

Nausik · Accepted Answer · 2017-10-30 15:38:20Z

9

Turns out, I missed

"emitDecoratorMetadata": true

in tsconfig

fml...

answered Oct 30, 2017 at 15:38

Nausik

7458 silver badges23 bronze badges

2 Comments

hoonzis Over a year ago

Thanks a lot, this saved my date. automatic DI always relies on outside magic such as this and thats why it has always been a pain...

Helius 06 Over a year ago

I've been debugging this for over an hour - thanks much!

William Hou · Accepted Answer · 2019-08-14 20:02:54Z

1

I got the same error when I ran unit testing (a spec.ts file) with Angular.

The following is what I did:

     import { HttpClientModule, HttpClient } from '@angular/common/http'; 

     beforeEach(async(() => {
       TestBed.configureTestingModule({
         declarations: [ ],
         imports: [
           HttpClientModule
         ],
         schemas: [NO_ERRORS_SCHEMA],
         providers: [
           HttpClient,
         ]
       })
         .compileComponents();
      }));

and the error was gone.

answered Aug 14, 2019 at 20:02

William Hou

1,87919 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular 4 HttpClient in Component Can't resolve all parameters

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related