NullInjectorError: No provider for Storage Ionic framework error

In this article we wil tell you the fix for NullInjectorError: No provider for Storage. While working on Ionic framework developers receive this error.

Understanding root cause for NullInjectorError: No provider for Storage

While working on Ionic framework project, we received this error. The “NullInjectorError: No provider for Storage” error in Ionic framework typically occurs when build environment does not fine IonicStorageModule.

So when App tries to inject the Storage service, it finds that service is either not provided or imported. In other words Angular dependency injection system can’t find a provider for the Storage service then it throws this error.

Fix for NullInjectorError

To fix this error, you need to make sure that you have imported the Storage provider correctly. The Storage provider is typically part of the @ionic/storage package.

Here are some steps you can take to resolve this error:

Step 1 : Since you are getting storage provider error. So try step 2 first to check whether the module is available or not.

In case you are not able to import IonicStorageModule in second step, you need to install the @ionic/storage package.

You can install it using the following command.

npm install @ionic/storage

Step 2 : app.module.ts file is the main file which gets invoked when an Ionic or Angular application starts. So import the Storage module in the app.module.ts file.

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

Step 3 : Add the Storage module to the imports array in the app.module.ts file.

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

Step 4 : Make sure to add the Storage service to the providers array in the component or page where you want to use it.

In my case, I got this error in Ghmc page. So imported storage in my GHMC page. So that at compile and run time I should not get this error.

Similarly you can add storage module in your page component.

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

@Component({
  selector: 'app-ghmc',
  templateUrl: 'ghmc.page.html',
  styleUrls: ['ghmc.page.scss'],
  providers: [Storage]
})
export class GhmcPage {
  constructor(private storage: Storage) {}
}

Step 5 : Finally, try clearing the cache of your Ionic app and rebuilding it again. Once you build the application, you will not see NullInjectorError: No provider for Storage error.

ionic cache clean
ionic build

Conclusion

Finally, we hope this article helped you to resolve the NullInjectorError: No provider for Storage error in your Ionic app. In case you have any struggle please feel free to reach our team.

Additionally, you can refer Ionic support forum to ask your question.

You may also like to read TS7006: Parameter ‘xxx’ implicitly has an ‘any’ type Angular Ionic.