Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can't resolve all parameters for LoggedinPage (Angular - Component/Injectable)

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 { } 
like image 286
JamesAnd Avatar asked Dec 02 '25 20:12

JamesAnd


1 Answers

You came across a circular dependency

LoggedinPage => AuthService => LoggedinPage

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

like image 95
yurzui Avatar answered Dec 05 '25 11:12

yurzui



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!