Ionic 4 storage problem : No provider for Storage - ionic-framework

Question

I try to import storage mdule in my ionic project. but when i add providers Storage, The erro is changed. The error become 'can't resolved storege all : (?)'
How can i solve this error? can you help me please?
I wrote my codes below.
I watch this video :https://www.youtube.com/watch?v=h_IhS8QQjUA&list=PLNFwX8PVq5q7S-p_7zO99xdauhDsnMPw0&index=17&t=0s
App Module ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouteReuseStrategy } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import {Storage} from '#ionic/storage';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '#ionic/storage';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,IonicStorageModule.forRoot()],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Page TS
import { Component, ViewChild } from "#angular/core";
import { StorageService, Item } from "../services/storage.service";
import { Platform, ToastController, IonList } from "#ionic/angular";
#Component({
selector: "app-home",
templateUrl: "home.page.html",
styleUrls: ["home.page.scss"]
})
export class HomePage {
items: Item[] = [];
newItem: Item = <Item>{};
#ViewChild("mylist") mylist: IonList;
constructor(
private storageService: StorageService,
private plt: Platform,
private toastController: ToastController
) {
this.plt.ready().then(() => {
this.loadItems();
});
}
loadItems() {
this.storageService.getItems().then(items => {
this.items = items;
});
}
addItem() {
this.newItem.modified = Date.now();
this.newItem.id = Date.now();
this.storageService.addItem(this.newItem).then(item => {
this.newItem = <Item>{};
this.showToast("Item Added");
this.loadItems();
});
}
updateItem(item:Item){
item.title='UPDATED:${item.title}';
item.modified=Date.now();
this.storageService.updateItem(item).then(item=>{
this.showToast("Item Updated");
this.loadItems();
});
}
deleteItem(item:Item){
this.storageService.deleteItem(item.id).then(item=>{
this.showToast("Item Deleted");
this.mylist.closeSlidingItems();
this.loadItems();
});
}
async showToast(msg){
const toast=await this.toastController.create({
message:msg,
duration:2000
});
toast.present();
}
}
Service
import { Injectable } from '#angular/core';
export interface Item{
id:number,
title:string,
value:string,
modified:number
}
const ITEMS_KEY="my-items";
#Injectable({
providedIn: 'root'
})
export class StorageService {
constructor(private storage:Storage) { }
addItem(item:Item):Promise<any>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(items){
items.push(item);
return this.storage.set(ITEMS_KEY,items);
}else{
return this.storage.set(ITEMS_KEY,[item]);
}
});
}
getItems():Promise<Item[]>{
return this.storage.get(ITEMS_KEY);
}
getItem(id:number){
}
updateItem(item:Item):Promise<any>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(!items || items.length==0){
return null;
}
let newItems:Item[]=[];
for (let i of items){
if(i.id==item.id){
newItems.push(item);
}else{
newItems.push(i);
}
}
return this.storage.set(ITEMS_KEY,newItems);
});
}
deleteItem(id:number):Promise<Item>{
return this.storage.get(ITEMS_KEY).then((items:Item[])=>{
if(!items || items.length==0){
return null;
}
let toKeep:Item[]=[];
for (let i of items){
if(i.id!=id){
toKeep.push(i);
}else{
//newItems.push(i);
}
}
return this.storage.set(ITEMS_KEY,toKeep);
});
}
}

Answer 1

In the StorageService file, you're injecting the storage like this:
constructor(private storage: Storage) { }
but I cannot see the Storage being imported in that file. So the Storage class injected in the constructor refers to the Web Storage API and not to the Ionic's Storage.
To fix that, please import the Storage from #ionic/storage:
import { Storage } from '#ionic/storage';
// ...
#Injectable({
providedIn: 'root'
})
export class StorageService {
constructor(private storage: Storage) { }
// ...
}

Answer 2

installing
npm install #ionic/storage
npm install #ionic/storage-angular
remember create your storage in the service
import { Storage } from '#ionic/storage';
constructor(private storage:Storage){
this.storage.create();
}
and import this in app.module
import { IonicStorageModule } from '#ionic/storage-angular';
import { Storage } from '#ionic/storage';
with storage in your providers
providers: [{ provide: RouteReuseStrategy},Storage],
ionic-storage angular