Issue
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.
Solution
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]
})
Answered By - asimhashmi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.