CODEWITHSUNDEEP
typescriptionic4
Matheus Batista
Matheus Batista

Reputation: 305

ionic 4 Storage Injection error: no provider

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.

Upvotes: 10

Views: 16793

Answers (4)

Mayank Sharma
Mayank Sharma

Reputation: 1

If you have exported the wrong storage dependency injection in your own component .ts file it gives this error. In my case instead of store, I took storage which gave me this error after debugging I got this, and after taking the correct import my error was solved

Upvotes: 0

Citizen
Citizen

Reputation: 12937

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);
  });
}

Upvotes: 12

Unknown
Unknown

Reputation: 171

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
  ]

Upvotes: 17

hang321
hang321

Reputation: 2516

I have the same problem on No provider for Storage.

Yet my problem was my IDE auto-import only generated import { IonicStorageModule } from "@ionic/storage";. Problem fixed after adding Storage,. Which is not in your case, but hope to help other readers later.

Upvotes: 0

Related Questions