ionic 4 Storage Injection error: no provider

Question

So, I'm running ionic 4 with node 8.x, trying to inject Storage to an app so I can retrieve a token from my auth service, but I'm getting the following error:

StaticInjectorError(AppModule)[Storage]: 
  StaticInjectorError(Platform: core)[Storage]: 
    NullInjectorError: No provider for Storage!
    at 

I read others about the same problem, but they seem to have type errors, which I don't think it's the case.

here's my app.module

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

  import { HttpClientModule } from '@angular/common/http';
  import { Storage, IonicStorageModule } from '@ionic/storage';
  import { JwtModule, JWT_OPTIONS } from '@auth0/angular-jwt';

  export function jwtOptionFactory(storage) {
    return {
      tokenGetter: () => {
        return storage.get('access_token')
      },
      whitelistedDomains: ['localhost:5000']
    }
  }

  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      BrowserModule, 
      IonicModule.forRoot(),
      AppRoutingModule,
      HttpClientModule, 
      IonicStorageModule.forRoot(),
      JwtModule.forRoot({
        jwtOptionsProvider: {
          provide: JWT_OPTIONS,
          useFactory: jwtOptionFactory,
          deps: [Storage]
        }
      })
    ],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}

I think the error is referring to the deps: [Storage], but I can't seem to find a solution.

Answer 1

I had the same problem... it resolved after adding the following lines in app.module.ts

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

add the same in imports section:

imports: [
    BrowserModule,
    HttpClientModule,
    IonicModule.forRoot(),
    IonicStorageModule.forRoot(),
    AppRoutingModule
  ]

Answer 2

For anyone else coming here from Google that's using PhpStorm, my issue was that, possibly because of the app.module import, the page I used storage on didn't auto-add the import statement. So my code went from looking like:

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

To this:

import { Storage } from '@ionic/storage'; // This line added manually.

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}