3

I getting this error when running my ionic app:

Can't resolve all parameters for LoggedinPage: (?, [object Object], [object Object]).

When calling AuthService (of type Injectable) in the constructor.

The weird part is that its working perfectly fine in other classes!

LoggedinPage: (having the problem)

import { Component, ViewChild, ViewChildren, ElementRef } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Chart } from 'chart.js';
import { AuthService } from '../../core/auth.service';


@Component({
  selector: 'page-loggedin',
  templateUrl: 'loggedin.html',
})
export class LoggedinPage {

  @ViewChild('barCanvas') barCanvas: ElementRef;

  barChart: any;

  constructor(public auth: AuthService, public navCtrl: NavController, public navParams: NavParams) 
  {
  } 
}

ContactPage: (working fine)

import { Component, ViewChild, ViewChildren, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AuthService } from '../../core/auth.service';
import { Chart } from 'chart.js';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage{

  constructor(public navCtrl: NavController, public auth: AuthService) 
  {

  }

} 

Class AuthService:

import { LoggedinPage } from './../pages/loggedin/loggedin';
import { HomePage } from './../pages/home/home';
import { ContactPage } from './../pages/contact/contact';
import { AuthGuard } from './auth.guard';
import { Injectable } from '@angular/core';
import { Router, RouterModule } from '@angular/router';
import { LoadingController, AlertController, NavController } from 'ionic-angular';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/of';
import { GooglePlus } from '@ionic-native/google-plus';
import { NativeStorage } from '@ionic-native/native-storage';
import { Facebook } from '@ionic-native/facebook';

interface OliveandOil
{
  olivequantity: number;
  oilquantity: number;
}

interface OliveandOilYear
{
  year: number;
}

interface User 
{
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
}

@Injectable()
export class AuthService 
{

  user: Observable<User>;
  client: any;
  winobj: any = null;
  FB_APP_ID: number = XXXXXXXXX;

  key: number = 0;
  objects = {};

  constructor(private afAuth: AngularFireAuth, private nativeStorage: NativeStorage, private afs: AngularFirestore, private router: Router, public loadingCtrl: LoadingController, private googlePlus: GooglePlus, public alertCtrl: AlertController, public fb: Facebook, public navCtrl: NavController)
  {    
    this.googleLoginSilent();

    this.afAuth.authState.subscribe(user => 
      {
        if(user) 
        {
          this.user = this.afAuth.authState; //this means alert('fire user logged in');
        }
        else
        {
          Observable.of(null); //this means alert('fire user logged out');
        }
      }
    );
  } 
}

Please note that AuthService functions have been removed as they are a lot and not needed for this specific inquiry.

I'm using VSCode and it is not showing any "red" or errors when mentioning AuthService in the constructor.

Any idea why it can't resolve it while it can in an identical class?

Thank you

import { NgModule } from '@angular/core';
import { AuthService } from './auth.service';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestoreModule } from 'angularfire2/firestore';
@NgModule({
  imports: [
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [AuthService]
})
export class CoreModule { } 
JamesAnd
  • 410
  • 1
  • 8
  • 28
  • Can you mention in which providers you have given AuthSerivce. One more is you login component is lazy loaded? – Mohan Ram Nov 05 '17 at 14:35
  • Login is loaded at start as an ionic tab: `tab3Root = ContactPage; (in html: [root]="tab3Root)` AuthService is added as a provider in a created core.module.ts _(code added to the initial post)_ – JamesAnd Nov 05 '17 at 14:58
  • 1
    Try removing `import { LoggedinPage } from './../pages/loggedin/loggedin';` from AuthService. You have `LoggedinPage => AuthService => LoggedinPage` dependency – yurzui Nov 05 '17 at 15:04
  • Can you add AuthService to the provider of the component where it doesnt work and see is it working. Install chrome Augury and see how the injectable scope is defined for AuthService – Mohan Ram Nov 05 '17 at 15:05
  • Please post that dependency diagram for the component where it wont work along with question – Mohan Ram Nov 05 '17 at 15:05
  • Yurzui that fixed it! Thanks a lot! Mohan Ram no need for that anymore, Yurzui suggestion fixed t! Thanks a LOT! man i have so much more to learn! i know this is out of subject, but any specific place where i can have good tutorials about this? (googling gives lots of results but nothing specific!) – JamesAnd Nov 05 '17 at 15:12
  • @yurzui write your reply as an answer in order to mark it as the correct answer please. – JamesAnd Nov 19 '17 at 18:43

1 Answers1

2

You came across a circular dependency

LoggedinPage => AuthService => LoggedinPage

Removing import { LoggedinPage } from './../pages/loggedin/loggedin'; from AuthService should fix it.

yurzui
  • 205,937
  • 32
  • 433
  • 399