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

Ionic Framework ionic-v3
1

hi,
help me to fix this err please,
this is my first application,
i dont know what i have to do, i am a newbie in ionic,

err :
STORAGE ERR

home.ts :

import { Component } from '@angular/core';

import { ModalController , NavController } from 'ionic-angular';
import { ViewUserPage } from '../view-user/view-user' ;
import { AddUserPage  } from '../add-user/add-user'   ;

import { Events } from 'ionic-angular' ;
 

import { HttpClient } from '@angular/common/http';
import { LoadingController } from 'ionic-angular';


import { IonicStorage } from '@ionic/storage';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
	public storage : IonicStorage ;
   	public items : Array<any> = [];
   	public items2 : Array<any> = [];


  	constructor( public event : Events , public navCtrl: NavController , public ModalCtrl:ModalController , public http : HttpClient, public loading : LoadingController, public storage : IonicStorage) {
  		this.storage = storage ;
  		//doRefresh(event);

  	}

  	 // STORAGE
  	setItemtoStorage(settingName) {
    	this.storage.set(`setting:${ settingName }`, this.items);
 	};
  
  	async getItemtoStorage(settingName) {
    	this.storage.get(`setting:${ settingName }`).then((items) => {
      		console.log('items in local storage ', items);
    		this.items = items ;
    		this.items2 = items ; 
    	});
	};



		doRefresh(refresher){
	    	this.load();
	    		
	 			if(refresher != 0){
	        		refresher.complete();
	 			}
	    	 
		};

		/**
		* will be called by add-user page after add-user page is dismiss	
		*/


		/**
		* Triggered when template view is about to be entered
		* Returns and parses the PHP data through the load() method
		*
		* @public
		* @method ionViewWillEnter
		* @return {None}
		*/
		ionViewWillEnter() : void
		{
				
		 	this.load();
			let loader = this.loading.create({
			    	content: 'Getting latest entries...',
			  	});
			  		loader.present();
	    		
			  	
			  	setTimeout(() => {
		     		loader.dismiss();
	    		
		     	}, 1000);			  	

		}




		/**
		* Retrieve the JSON encoded data from the remote server
		* Using Angular's Http class and an Observable - then
		* assign this to the items array for rendering to the HTML template
		*
		* @public
		* @method load
		* @return {None}
		*/
		load() : void
		{
		  	this.http
		  	.get('https://ocid.000webhostapp.com/services/share/retrieve-data.php')
		   	   .subscribe((data : any) =>
		    {
		        console.dir(data);
		        this.items = data;
		        this.items2 = data;

		        this.setItemtoStorage('items',data);
		    },
		      	(error : any) =>
		    	{
		         console.dir(error);
			    });
		}

		initializeItems(): void {
			this.items = this.items2;
		}

	  	// function
	  	getItems(searchbar) {
	      	// Reset items back to all of the items
	      	this.initializeItems();
	      	var q = searchbar.srcElement.value;


			  // if the value is an empty string don't filter the items
			if (!q) {
	    		return;
	  		}

  			this.items = this.items.filter((v) => {
    				if(v.username && q) {
	      				if (v.username.toLowerCase().indexOf(q.toLowerCase()) > -1) {
	        				return true;
	      				}
      					return false;
    				}
		  	});
			console.log(q, this.items.length);

	  	}

	  	view(item : string){
	    	// push another page onto the navigation stack
	    	// causing the nav controller to transition to the new page
	    	// optional data can also be passed to the pushed page.
	      	
	      	this.navCtrl.push(ViewUserPage, {
	      		//send param to ViewUserPage
	      		itemParam : item 
	      	
	      	});
	      	console.log("item",item);
	  	}


	  	add(){
	  		let modal = this.ModalCtrl.create(AddUserPage, { 
	    	});
	    	modal.present();
	  	}

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { AddUserPage } from '../pages/add-user/add-user';
import { ViewUserPage } from '../pages/view-user/view-user';

import { HttpClientModule } from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    AddUserPage,
    ViewUserPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,

    IonicStorageModule.forRoot()

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    AddUserPage,
    ViewUserPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}

  ]
})
export class AppModule {}

tell me please if i did something wrong please, thank you :slight_smile:

2

No sure but firstly I think that the problem is that you have twice “storage” with the same name defined

Once as class variable

export class HomePage {
   public storage : IonicStorage ;

And once in your constructor

constructor(..public storage : IonicStorage

Actually you don’t need the class variable since you are defining it in your constructor, so firstly I would try to delete

   public storage : IonicStorage ;

and in your constructor delete also

     this.storage = storage ;

Then, secondly, I’m not sure that “IonicStorage” is the could type. I would use “Storage”.

To do so correct your import

 import { Storage } from '@ionic/storage';

instead of

import { IonicStorage } from '@ionic/storage';

and reflect this in your constructor

 constructor( ... public storage : Storage) {

Summarized:

import { Component } from '@angular/core';

import { ModalController , NavController } from 'ionic-angular';
import { ViewUserPage } from '../view-user/view-user' ;
import { AddUserPage  } from '../add-user/add-user'   ;

import { Events } from 'ionic-angular' ;

import { HttpClient } from '@angular/common/http';
import { LoadingController } from 'ionic-angular';

import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
   	public items : Array<any> = [];
   	public items2 : Array<any> = [];

  	constructor( public event : Events , public navCtrl: NavController , public ModalCtrl:ModalController , public http : HttpClient, public loading : LoadingController, public storage : Storage) {
	//doRefresh(event);
}
...

Not sure it works, but it’s what I would try…

3

import { ModalController , NavController, LoadingController, Events } from ‘ionic-angular’;
import { ViewUserPage } from ‘…/view-user/view-user’ ;
import { AddUserPage } from ‘…/add-user/add-user’ ;
import { HttpClient } from ‘@angular/common/http’;
import { IonicStorage } from ‘@ionic/storage’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public storage : IonicStorage ;
public items : Array = ;
public items2 : Array = ;

constructor( public event : Events , public navCtrl: NavController , public ModalCtrl:ModalController , public http : HttpClient, public loading : LoadingController, public storage : IonicStorage) {
	this.storage = storage ;
	//doRefresh(event);

}

 // STORAGE
setItemtoStorage(settingName) {
	this.storage.set(`setting:${ settingName }`, this.items);
};

async getItemtoStorage(settingName) {
	this.storage.get(`setting:${ settingName }`).then((items) => {
  		console.log('items in local storage ', items);
		this.items = items ;
		this.items2 = items ; 
	});
};



	doRefresh(refresher){
    	this.load();
    		
 			if(refresher != 0){
        		refresher.complete();
 			}
    	 
	};

	/**
	* will be called by add-user page after add-user page is dismiss	
	*/


	/**
	* Triggered when template view is about to be entered
	* Returns and parses the PHP data through the load() method
	*
	* @public
	* @method ionViewWillEnter
	* @return {None}
	*/
	ionViewWillEnter() : void
	{
			
	 	this.load();
		let loader = this.loading.create({
		    	content: 'Getting latest entries...',
		  	});
		  		loader.present();
    		
		  	
		  	setTimeout(() => {
	     		loader.dismiss();
    		
	     	}, 1000);			  	

	}




	/**
	* Retrieve the JSON encoded data from the remote server
	* Using Angular's Http class and an Observable - then
	* assign this to the items array for rendering to the HTML template
	*
	* @public
	* @method load
	* @return {None}
	*/
	load() : void
	{
	  	this.http
	  	.get('https://ocid.000webhostapp.com/services/share/retrieve-data.php')
	   	   .subscribe((data : any) =>
	    {
	        console.dir(data);
	        this.items = data;
	        this.items2 = data;

	        this.setItemtoStorage('items',data);
	    },
	      	(error : any) =>
	    	{
	         console.dir(error);
		    });
	}

	initializeItems(): void {
		this.items = this.items2;
	}

  	// function
  	getItems(searchbar) {
      	// Reset items back to all of the items
      	this.initializeItems();
      	var q = searchbar.srcElement.value;


		  // if the value is an empty string don't filter the items
		if (!q) {
    		return;
  		}

		this.items = this.items.filter((v) => {
				if(v.username && q) {
      				if (v.username.toLowerCase().indexOf(q.toLowerCase()) > -1) {
        				return true;
      				}
  					return false;
				}
	  	});
		console.log(q, this.items.length);

  	}

  	view(item : string){
    	// push another page onto the navigation stack
    	// causing the nav controller to transition to the new page
    	// optional data can also be passed to the pushed page.
      	
      	this.navCtrl.push(ViewUserPage, {
      		//send param to ViewUserPage
      		itemParam : item 
      	
      	});
      	console.log("item",item);
  	}


  	add(){
  		let modal = this.ModalCtrl.create(AddUserPage, { 
    	});
    	modal.present();
  	}

}