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

Question

I faced with next error and cannot understand how to resolve it.

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

I've checked almost every topic here and have tried multiple ways to resolve it but still can't beat it already second day. Login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams,AlertController } from 'ionic-angular';   
import { AuthProvider } from '../../providers/auth/auth';
import { TabsPage } from '../tabs/tabs';


/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/

@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
email:string = '';
password:string = '';

errorMsg:string;

constructor(
public navParams: NavParams,
public navCtrl: NavController,

public alertCtrl: AlertController
public authService: AuthProvider,
) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}

errorFunc(message){
let alert = this.alertCtrl.create({
  title: 'oops!',
  subTitle: message,
  buttons: ['OK']
});
alert.present();
} 




myLogIn(){

if (this.email.trim() !==''    ) {

  console.log(this.email.trim() + "   " + this.password.trim() )

  if (this.password.trim()  === '') {
    this.errorFunc('Please put your password')

  }
  else{

    let credentials = {
      email: this.email,
        password: this.password
    };


     this.authService.login(credentials).then((result) => {
        console.log(result);
        this.navCtrl.setRoot(TabsPage);

    }, (err) => {
        console.log(err);
        this. errorFunc('Wrong credentials ! try again')
        console.log("credentials: "+JSON.stringify(credentials))

    });

  }
  }
  else{
  this. errorFunc('Please put a vaild password !  for ex:(123456)')
  }
  }
  myLogOut(){
  this.authService.logout();
  }
  }

Auth.ts

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
 import { Http , Headers } from '@angular/http';
import { TabsPage } from '../../pages/tabs/tabs';


 @Injectable()
  export class AuthProvider {
  rootPage:any = TabsPage;
  public token:any;
  constructor(public storage:Storage ,public http: Http) {
  console.log('Hello AuthProvider Provider');
  }
  login(credentials){
    return new Promise((resolve, reject) => {
    let headers = new Headers();

   headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('Content-type','application/json');
   headers.append('X-Requested-With','XMLHttpRequest');
    this.http.post('http://127.0.0.1:8000/api/auth/login', JSON.stringify(credentials),  { 
    headers: headers})
      .subscribe(res => {
        let data = res.json();
        this.token = data.token;
        localStorage.setItem('token',data.access_token);

        resolve(data);
       }, (err) => {
        reject(err);

      });  });

  }
  checkAuthentication(){

  return new Promise((resolve, reject) => {
  this.storage.get('token').then((value) => {

  this.token = value;

  resolve(this.token)


  })
 }); 



 }


logout(){

localStorage.setItem('token','');

  }




   }

app.moodule.ts

import { NgModule, ErrorHandler } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { IonicStorageModule } from '@ionic/storage';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home';
 import { TabsPage } from '../pages/tabs/tabs';
import { LoginPage } from '../pages/login/login';
import { AddPage } from '../pages/add/add';
import { AuthProvider } from '../providers/auth/auth';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { HttpModule } from '@angular/http';
import { ComplaintProvider } from '../providers/complaint/complaint';

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
AddPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot(),
HttpModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage,
LoginPage,
AddPage
],
providers: [
StatusBar,
SplashScreen,
AuthProvider,
ComplaintProvider,

{provide: ErrorHandler, useClass: IonicErrorHandler},
]
})
export class AppModule {}

Answer 1

You seem to be having a classic circular reference going around. You have the "TabsPage" imported in both Auth.ts & in your "LoginPage.ts".

A Classic Circular Reference.

Try removing the TabsPage from Auth.ts. In general, it is best if you have your components do very specific things so that you have a granular code and avoid such circular reference issues.