Error in Injecting Storage in Ionic 4: Provider Not Found

Question

Error in Injecting Storage in Ionic 4: Provider Not Found

Currently, I am working with Ionic 4 and using node 8.x. My goal is to inject Storage into my app in order to retrieve a token from my authentication service. However, I am encountering the following error:

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

I have looked into similar issues faced by others, but it seems like their problems were related to type errors which I don't believe is the case for me.

Below is an excerpt from 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 suspect that the error is related to deps: [Storage], however, I cannot seem to find a solution for this issue.

typescript ionic4

Answer 1

Answer №1

After encountering a similar issue, I was able to resolve it by including the following code snippets into my app.module.ts file:

import { IonicStorageModule } from '@ionic/storage'

;

Make sure to also include the same code snippet in the imports section:

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

Answer 2

After encountering a similar issue, I was able to resolve it by including the following code snippets into my app.module.ts file:

import { IonicStorageModule } from '@ionic/storage'

;

Make sure to also include the same code snippet in the imports section:

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

Answer 3

Answer №2

If you're finding your way here via a Google search and are using PhpStorm, I encountered an issue where the import statement for storage was not automatically added to the page due to the app.module import. As a result, my code transformed from its original form:

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

  ...

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

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

To this adjusted version:

import { Storage } from '@ionic/storage'; // Manually added this line.

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

  ...

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

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

Answer 4

If you're finding your way here via a Google search and are using PhpStorm, I encountered an issue where the import statement for storage was not automatically added to the page due to the app.module import. As a result, my code transformed from its original form:

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

  ...

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

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

To this adjusted version:

import { Storage } from '@ionic/storage'; // Manually added this line.

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

  ...

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

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

Answer 5

Answer №3

I encountered a similar issue with the error message "No provider for Storage".

However, I was able to resolve the problem by manually adding Storage, to my import statement, as my IDE only generated

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

. This solution may not apply to your specific situation, but hopefully it can assist other readers in the future.

Answer 6

I encountered a similar issue with the error message "No provider for Storage".

However, I was able to resolve the problem by manually adding Storage, to my import statement, as my IDE only generated

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

. This solution may not apply to your specific situation, but hopefully it can assist other readers in the future.

Answer 7

Answer №4

An error occurred in my component's .ts file due to exporting the wrong storage dependency injection. Initially, I mistakenly used 'storage' instead of 'store', causing a debugging headache. Once I corrected the import, the error was resolved.

Answer 8

An error occurred in my component's .ts file due to exporting the wrong storage dependency injection. Initially, I mistakenly used 'storage' instead of 'store', causing a debugging headache. Once I corrected the import, the error was resolved.

Error in Injecting Storage in Ionic 4: Provider Not Found

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Typescript validation for redundant property checks

From integrating Vue 2 TSX to React TSX: ensuring seamless cooperation

Why is it that I am not receiving JSON data in my Angular application?

typegrapql encounters an issue with experimentalDecorators

Toggle the presence of a string in an array with a checkbox

Solving runtime JavaScript attribute issues by deciphering TypeScript compiler notifications

ReactJS - Opt for useRef over useState for props substitution

Can you explain the distinction between any[] and [] in TypeScript?

Astro component experiencing script tag malfunction within content collection

Angular 4: Exploring the Depths of Nested HTTP Requests

I am excited to create a Dynamic Routing system that selects specific elements from an array of objects using Typescript

Implementing the binding of components to another component post using forwardRef

Running Jest tests with TypeScript involves executing the tests twice: once for TypeScript files and once for JavaScript files

Loading a webpack bundled ngModule dynamically to handle a route efficiently

Exploring how to iterate through an object to locate a specific value with TypeScript and React

Issue with typing in subscription encountered in Typescript RXjs version 6.6.0

Setting up only two input fields side by side in an Angular Form

Utilizing Angular 4 with Ahead-Of-Time compilation in combination with Electron, as well as

Issue with selecting an individual value in NGRX entity using id

What is the best way to perform a query in Angular using Firebase Firestore?