No provider for Storage! IONIC 4

ravo93 · January 31, 2019, 1:58pm

I correctly installed Ionic Storage on my IONIC project , but everytime I run the project it return me this error

This i my App.module

import { LoginPageModule } from './login/login.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { ConfigurationPageModule } from './configuration/configuration.module';


@NgModule({
 declarations: [AppComponent,
 ],
 entryComponents: [
 ],
 imports: [
   BrowserModule,
   HttpClientModule,
   IonicModule.forRoot(),
   IonicStorageModule.forRoot(),
   FontAwesomeModule,
   AppRoutingModule,
   ConfigurationPageModule,
   LoginPageModule
 ],
 providers: [
   StatusBar,
   SplashScreen,
   { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "testApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.13",
    "@fortawesome/free-solid-svg-icons": "^5.7.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.0.0",
    "@ionic/pro": "2.0.4",
    "@ionic/storage": "^2.2.0",
    "cordova-sqlite-storage": "2.6.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.3.3",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.12.3",
    "@angular-devkit/build-angular": "~0.12.3",
    "@angular-devkit/core": "~7.2.3",
    "@angular-devkit/schematics": "~7.2.3",
    "@angular/cli": "~7.2.3",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.3.0",
    "@types/node": "~10.12.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.0.0",
    "tslint": "~5.12.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-sqlite-storage": {}
    }
  }
}

reedrichards · January 31, 2019, 2:58pm

Try to add the Storage in your app.module.ts providers

UPDATE THAT’s so wrong, I need a coffee

ravo93 · January 31, 2019, 3:30pm

I tried and now it return me this error

app module.ts

import { LoginPageModule } from './login/login.module';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { IonicStorageModule, Storage } from '@ionic/storage';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { ConfigurationPageModule } from './configuration/configuration.module';


@NgModule({
  declarations: [AppComponent,
  ],
  entryComponents: [
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    FontAwesomeModule,
    AppRoutingModule,
    ConfigurationPageModule,
    LoginPageModule
  ],
  providers: [
    Storage,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

reedrichards · January 31, 2019, 3:34pm

Sorry I was telling you bullshit, damned

reedrichards · January 31, 2019, 3:38pm

So like I said, forget what I said before, that’s dumb, sorry, need a coffee. I had a look, I do the same as you do

package.json:

"@ionic/storage": "2.2.0",

app.module.ts

import {IonicStorageModule} from '@ionic/storage';
...
imports: [
   ...
   IonicStorageModule.forRoot(),
   ...

Do you use somewhere else the Storage in your app? And if yes, how?

reedrichards · January 31, 2019, 3:46pm

Also, as I said something stupid, I would be happy to clone your project and give a try if you want

ravo93 · January 31, 2019, 3:48pm

Yes I create a simple login page which saves url and credential on storage
that’s the code:

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

await this.storage.get("Connection").then(res => {
      if (res != undefined) {
        this.IP = res
        ServiceRootUrl = "http://" + res";
      }
 else {
        this.IP = "10.0.2.2"
        ServiceRootUrl = "http://" +this.IP"
        this.storage.set("Connection", ServiceRootUrl);
      }
    })

It work but then when i change page then i throws me that error.
this is the only page where I use storage

reedrichards · January 31, 2019, 3:53pm

that’s maybe the error, I don’t think you can combine await with then which are basically the same

so

const res = await this.storage.get("Connection");

if (res != undefined) {
        this.IP = res
        ServiceRootUrl = "http://" + res";
      }
 else {
        this.IP = "10.0.2.2"
        ServiceRootUrl = "http://" +this.IP"
        await this.storage.set("Connection", ServiceRootUrl);
      }

or

this.storage.get("Connection").then(async (res)=> {
      if (res != undefined) {
        this.IP = res
        ServiceRootUrl = "http://" + res";
      }
 else {
        this.IP = "10.0.2.2"
        ServiceRootUrl = "http://" +this.IP"
        await this.storage.set("Connection", ServiceRootUrl);
      }
    })

reedrichards · January 31, 2019, 3:54pm

also did you inject the storage in the constructor of the component/service/page where you use it?

constructor(private storage: Storage) {
    }

ravo93 · January 31, 2019, 4:03pm

Yes I do It. I’m creating a test app where I can let you show the problem

reedrichards · January 31, 2019, 4:06pm

Sure do that, cool idea. Ping me (I’ll be offline a couple hours but will have a look afterwards)

reedrichards · February 1, 2019, 6:19am

did it work with the test app?

ravo93 · February 1, 2019, 8:06am

sorry for let you wait. The test app works fine, so I’m a bit confused . I don’t no why I had that problem so I’m triyng to recreate it. When I’ll find the error I’ll let you know. Thank for now

reedrichards · February 1, 2019, 8:17am

Thx for the feedback, no worries That’s good if it works with the test app, it’s always a good way to solve a problem, comparison help. Keep me posted

ravo93 · February 1, 2019, 10:53am

PROBLEM SOLVED
I found the problem. Since I was migrating my project from ionic 3.0 to 4.0, I declared inside a provider (now service) Storage inside the costructor and I didn’t imported it. Now everything works fine :thank you for helping me

reedrichards · February 1, 2019, 11:05am

Awesome, congrats for finding the solution!

joabchua · March 6, 2019, 1:54pm

Same problem here. Got the big chunk of error after importing @ionic/storage into my project.

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
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]

And my component using it to store details.

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  
  
  constructor(private storage: Storage, private pwp: PasswordService) {
    this.pwp.currentTabNum = this.tabNum;
    this.storage.keys()
  }

Help pls. I am using Ionic 4.

ravo93 · March 7, 2019, 8:53am

In my case the problem was not storage, but other problem wich cause this error.
Can you reproduce the error on plunker?
Try to remove from the project the error pages till the problem disappear and the insert it again one to one till the error appear. It helped me solve the problem.

joabchua · March 10, 2019, 3:18am

Hi Ravo,

Thanks for replying. I found out that it was just another page that was causing the issues. I was mislead by the error messages and couldnt find the right place to resolve it. But now, I found out that another page that was using the storage didnt import it hence causing that huge chunk of errors.

Thanks a lot.

ravo93 · March 10, 2019, 10:40am

You’re welcome . I’m happy that you solved it.

Topic		Replies	Views
When i run my app getting Provider - Error: No provider for Storage!? ionic-v3	11	3974	August 24, 2017
Error: No provider for Storage ionic-v3	6	20309	December 24, 2019
NullInjectorError: No provider for Storage! ionic-v3	3	5150	July 19, 2021
Ionic storage doesn't work ionic-v3	0	448	May 22, 2020
Runtime Error : Unexpected value 'Storage' imported by the module 'AppModule' ionic-v3	2	3803	July 27, 2022

No provider for Storage! IONIC 4

Related topics