RC4 : Can't resolve all parameters for Component:(?)

Ionic Framework ionic-v3
1

Dears,
I know that question is repeated but really i tried all available solutions but still can’t solve my problem.
I have multiple components and a service I imported the service to components like signin,signup,…etc.
but i have one component that make the problem and if i removed the service injection from it application will run perfect.

the Invalid component is :
Activation.ts

import {Component,Injectable,Inject} from '@angular/core';
import {CloudAuth} from '../../shared/auth_service';
@Component({
  selector: 'page-activation',
  templateUrl: 'activation.html'
})
export class Activation   {
  constructor( @Inject(CloudAuth) public _CloudAuth:CloudAuth ){

  }
}

one of worked components login.ts

import {Component} from '@angular/core';
import {NavController, NavParams, LoadingController, AlertController, AlertOptions, Platform} from 'ionic-angular';
 import {FormBuilder, Validators, FormGroup} from '@angular/forms';
import {TranslateService} from "ng2-translate";

import {Facebook} from 'ionic-native';
 import {CloudAuth} from '../../shared/auth_service';


@Component({
  selector:'page-login',
  templateUrl: 'login.html',
})
export class login {
  
  constructor(public loading: LoadingController, public navCtrl: NavController, public params: NavParams,
              public _userService: UserService, public _FormBuilder: FormBuilder, public translate: TranslateService,
              public alertCtrl: AlertController , public _CloudAuth:CloudAuth) {
 ........... 
  }
 ...........

}

My service code is :

import {Injectable , Inject} from "@angular/core";
import { Platform } from 'ionic-angular';
import "rxjs/add/operator/map";
import { JwtHelper } from 'angular2-jwt';
import {TranslateService} from 'ng2-translate/ng2-translate';

import {Activation} from '../user/activation/activation';
import {welcomePage} from '../welcome/welcome';
import {userLogin} from '../user/user';
import {CompleteRegistration} from '../user/completeRegistration/completeRegistration';
import {HomePage} from '../home/home';

@Injectable()
export class CloudAuth {
  
  jwtHelper: JwtHelper = new JwtHelper();
  token=null;
  constructor(
    @Inject(TranslateService) public translate: TranslateService , 
    @Inject(Platform)  public platform: Platform
  ){
          this.token = localStorage.getItem('user_token');
  }

      getToken(){
        return this.token;
      }
      updateToken(newtoken){
        localStorage.setItem('user_token', newtoken.toString());
        this.token = newtoken;
        return true;
      }
      isTokenExpired(){
          // Check if token expired
          return this.jwtHelper.isTokenExpired(this.token)
      }
      tokenData(){
         // Return data stored in token
          if(this.token=='' || this.token == null) return false;
          else return this.jwtHelper.decodeToken(this.token);
       }
       
       checkCode(code){
          let userData =  this.tokenData();
          if( userData == false) return false;
          else {
              if(userData.activation_code == code) return true;
              else return false; 
          }
       }
 
      // Check if user login or not and loading the default app Language.
      checkLogin():any{
        console.log(this.token);
        let lang = localStorage.getItem('Language');
        if(!lang || lang==''|| lang === undefined ) return welcomePage;
        else {
          if(lang=='ar'){
                this.platform.setLang('ar',true);
                this.platform.setDir('rtl',true);
          }
          this.translate.use(lang);
          let userData =  this.tokenData();
          if( this.token==null ||  this.token== '' || userData == false) return userLogin;
          else {
              if(userData.active == 1) {
                  if(!localStorage.getItem('firstRun') ){
                    return CompleteRegistration;
                  }else{
                    return HomePage;
                  }
              }else {
                  return Activation;
              }
          }
        }
      }
}

I removed @Inject decorator but also not working.

My node and ionic information is :

Ionic Framework: 2.0.0-rc.4 
Ionic Native: 2.2.11 
Ionic App Scripts: 0.0.47 
Angular Core: 2.2.1 
Angular Compiler CLI: 2.2.1 
Node: 6.7.0 
OS Platform: macOS Sierra

this error dose’t appear before it happened since upgrade to Ionic RC4
hope to find a solution.
Thanks

1 Like
2

I have the same exact problem. I’ve tried to isolate the problem by creating a brand new provider via ionic g provider TestProvider. When I inject it into an existing component, it gives the can't resolve all parameters for Component:(?) error.

This is also something that started to occur in RC4. Going to try to upgrade to RC5 to see what happens.

3

Is your provider declared in the app module?

4

Of course. Wish it was that simple. The provider in question works existingly in another component of my app.

5

You should use forwardRef
import {forwardRef} from '@angular/core'; import {CloudAuth} from "CloudAuth.service"

then at the class constructor you should declare the component like :

constructor( @Inject(forwardRef(() => CloudAuth)) public _CloudAuth )

that works for me.

6

I actually found that the problem is with the way I’m referencing my paths. I use an index.ts to store all my providers, so I reference it. The error is gone if I directly point to the location of the provider. This is perhaps an error with TypeScript not correctly compiling.