Problem injecting a service into a component in Angular

Question

When I try to inject a Service into my Component Angular won't load the component and throws an error instead. The error in the console just says:

ERROR Error: "[object Object]"
    Angular 11
        resolvePromise
        resolvePromise
        scheduleResolveOrReject
        invokeTask
        onInvokeTask
        invokeTask
        runTask
        drainMicroTaskQueue
        invokeTask
        invokeTask
        globalZoneAwareCallback

The component I'm trying to inject the service into (it is the workout-service):

import { Component, OnInit } from '@angular/core';

import { CalendarService } from '../shared/calendar.service';
import { WorkoutService } from '../shared/workout.service';
import { Set } from '../shared/set.model';
import { Exercise } from '../shared/exercise.model';
import { Workout } from '../shared/workout.model';

@Component({
  selector: 'app-workout-form',
  templateUrl: './workout-form.component.html',
  styleUrls: ['./workout-form.component.css']
})
export class WorkoutFormComponent implements OnInit {
  exerciseArr: number[] = [];

  selectedDay = '1';
  selectedMonth = 'Mai';
  selectedYear = '2019';

  constructor(public calendarService: CalendarService, private workoutService: WorkoutService) { }

  ngOnInit() {
  }
[...]

And here is the service that I'm trying to inject:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { AuthService } from '../auth/auth.service';

@Injectable({
  providedIn: 'root'
})
export class WorkoutService {

  constructor(private http: HttpClient, private authService: AuthService) { }

  saveWorkoutToDb(workout) {
    this.http.post([...]);
  }
}

My IDE gave me the error message that it can't resolve all parameters for the given component. When I remove the injection, the component gets loaded fine.

This is my app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule,  MatInputModule, MatButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkoutFormComponent } from './workout-form/workout-form.component';
import { WorkoutCalendarComponent } from './workout-calendar/workout-calendar.component';
import { WorkoutEditComponent } from './workout-edit/workout-edit.component';
import { AuthComponent } from './auth/auth.component';

@NgModule({
  declarations: [
    AppComponent,
    WorkoutFormComponent,
    WorkoutCalendarComponent,
    WorkoutEditComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit: it seems that when I remove the injection of the HttpClient in the workout service, the error disappears.

Answer 1

You need to change your app.module.ts like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatCardModule,  MatInputModule, MatButtonModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkoutFormComponent } from './workout-form/workout-form.component';
import { WorkoutCalendarComponent } from './workout-calendar/workout-calendar.component';
import { WorkoutEditComponent } from './workout-edit/workout-edit.component';
import { AuthComponent } from './auth/auth.component';

@NgModule({
  declarations: [
    AppComponent,
    WorkoutFormComponent,
    WorkoutCalendarComponent,
    WorkoutEditComponent,
    AuthComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule,
    HttpClientModule, //<- you are missing this import 
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Answer 2

The same happened to me, you need to add 'HttpClientModule' class to the imports in the app.module.ts file. Just remember it need to be in the root module, declaring this class in child modules will not work.