CODEWITHSUNDEEP
angularionic-framework
Pedro Azevedo
Pedro Azevedo

Reputation: 77

NullInjectorError: No provider for Storage! ionic 6

Trying to use the storage version 2.1.3 in my ionic application but getting the error:

NullInjectorError: R3InjectorError(AppModule)[AppModule -> Storage -> Storage -> Storage]: NullInjectorError: No provider for Storage! ionic 6

I saw some posts about it, telling to use the forRoot statement, but didn't work anyway.

My appModule:

import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

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

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

  constructor(private storage: Storage) { }

  async ngOnInit() {
    await this.storage.create();
  }
}

If there is any other information that could be helpful just ask and I will provide it. Thanks!

Upvotes: 3

Views: 10614

Answers (3)

Ansharja
Ansharja

Reputation: 1123

For anyone having again this issue, in my case the solution was adding Storage in the AppModule's providers section. After installing with npm install @ionic/storage, i used this code for the AppModule:

// ... other imports ...
import { Storage } from '@ionic/storage';

@NgModule({
    declarations: [AppComponent],
    imports: [
        AppRoutingModule,
        BrowserModule,
        IonicModule.forRoot(),
    ],
    providers: [
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
        Storage // This was the part I couldn't find online
    ],
    bootstrap: [AppComponent],
})
export class AppModule { }

And in the service or page I just injected the storage to the constructor and then called the create and get/set method (I'm posting only the relevant code):

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

... code ....

constructor(private storage: Storage) { }

async getFromStorage(): Promise<any> {
    const storage = await this.storage.create();
    const data = await storage.get(...);
}

Upvotes: 0

Guiditox
Guiditox

Reputation: 667

You should not initialize the code in the AppModule

App.module:

import { NgModule, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage'
import {HttpClientModule} from '@angular/common/http'

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

Then in your AppComponent

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  constructor(private storage: Storage) {
  }

  async ngOnInit() {
    // If using a custom driver:
    // await this.storage.defineDriver(MyCustomDriver)
    await this.storage.create();
  }
}

Upvotes: 0

eko
eko

Reputation: 40647

You aren't importing the Storage in your constructor from anywhere; it should be imported from:

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

It's probably importing the Web Storage API interface of typescript otherwise.

enter image description here

Upvotes: 6

Related Questions