[SOLVED]Cannot resolve all parameters for 'CustomComponent'. Make sure that all the parameters are decorated with Inject

sp33k3rph433k · March 12, 2016, 11:23pm

Hi all!

I’m trying to build an ionic app that’s pretty loosely based on an angular 2 app that I’ve got up and running. In the process, I’m reorganizing a little and running into some problems that I didn’t have on my web app. For example, I get the following error:

Cannot resolve all parameters for 'DashboardWorkoutComponent'(undefined, HttpClient). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'DashboardWorkoutComponent' is decorated with Injectable.

Here’s the code I’ve got (into gists so it’s easier to see):

gist.github.com

https://gist.github.com/camkidman/9f08cf89e00b83043337

dashboard-workout.component.ts

// app/components/dashboard-workout.component.ts
import {Component} from 'angular2/core';
import {Input} from 'angular2/core';
import {NgForm} from 'angular2/common';
import {Control} from "angular2/common";
import {ControlGroup} from "angular2/common";
import {APIService} from '../services/api.service';
import {HttpClient} from '../services/http.service';
import {Injectable} from "angular2/core";

This file has been truncated. show original

user-dashboard.ts

// app/pages/user-dashboard/user-dashboard.ts
import {Component} from 'angular2/core';
import {HttpClient} from "../../services/http.service";
import {APIService} from "../../services/api.service";
import {CORE_DIRECTIVES} from "angular2/common";
import {DashboardWorkoutComponent} from "../../components/dashboard-workout.component";
import {ControlGroup, Control} from "angular2/common";
import {Page} from 'ionic-angular';
import {forwardRef} from 'angular2/core';

This file has been truncated. show original

I didn’t have this problem on the angular app, but the user-dashboard page was a component there, so am I not just understanding how to inject components into pages?

Thanks!

xr0master · March 12, 2016, 11:47pm

You need provide APIService into component or you need use something this:
providers: [CORE_DIRECTIVES, HttpClient, APIService], directives: [DashboardWorkoutComponent)]

Your singleton APIService isn’t created.

big_bill91 · March 14, 2016, 9:37am

I have the same error here, i provide my service to providers and into my component but the same error shown

Need help

xr0master · March 14, 2016, 8:52pm

No code - no solution )

sp33k3rph433k · March 15, 2016, 12:52am

I added this into app/components/dashboard-workout.component.ts like you mentioned @xr0master and I still get the same error:

  providers: [CORE_DIRECTIVES, HttpClient, APIService],
  directives: [DashboardWorkoutComponent]

xr0master · March 15, 2016, 1:09pm

Man, I am strongly recommend you read Angular 2 docs.

My code fix your user-dashboard.ts. I don’t said you put it to component

sp33k3rph433k · March 15, 2016, 5:34pm

@xr0master My apologies, I misunderstood which file you meant. Can you point me in the direction of this specific documentation? Would that be dependency injection?

I also did the above in app/pages/user-dashboard/user-dashboard.ts and it gave me the same error.

xr0master · March 15, 2016, 7:38pm

Um… it is strange… So, a service is singleton but something must create service instance. At time, when you call your component, the service still isn’t created. You need use provide (once), that it creates the instance of service. Your project has dependency loop, and it is your issue.

Sorry for my bad English )

I recommend
CASE STUDY: TOUR OF HEROES is very good.
and after this read dependency injection.

PS ionic does bootstrap, so if you want create service for all app, you can put the service to app provider.

sp33k3rph433k · March 17, 2016, 6:46pm

Thanks a lot @xr0master. I ended up refactoring it a little and stopped the services from depending on each other and the error went away! So let that be a lesson to me, don’t chain dependencies in your services!