IonicStorage for Angular in Ionic 7

Ionic Framework
1

Hi everyone,
In my old app (<= v6), I used standard configuration for @ionic/storage-angular dependency but in ionic 7 src/app/app.modules.ts file is not present. How works in ionic7?

In my old apps:

npm install @ionic/storage-angular

In src/app/app.modules.ts add these imports:

IonicStorageModule.forRoot()

In Ionic 7 app.modules.ts is not present. I created my CustomStorageService (correct name is: MgdStorageService) that need to use storage

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MgdStorageService {

  private _storage!: Storage;

  constructor(
    private storage: Storage
  ) { 
    this.init();
  }

  async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }

  ...
}

but I receive this error:

NullInjectorError: R3InjectorError(Standalone[FolderPage])[MgdStorageService -> MgdStorageService -> MgdStorageService -> Storage -> Storage]

What is the best solution to enable injection of Storage Service?

Thanks

2

Imported via main.ts file. Is it correct?

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    importProvidersFrom(IonicModule.forRoot({})),
    importProvidersFrom(HttpClientModule),
    importProvidersFrom(IonicStorageModule.forRoot()),
    provideRouter(routes),
  ],
});
2 Likes
3

this is the solution to import ?

4

yes. it works fine.

L

5

How do you do this when not using the standalone

6

even if AppModule is not present you can use modules and then impor that modules in main.ts
for example if you are creating alot of services you can create a module called providers.module.ts and create a providers array there

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    },
    YourCustomProvider,
  ]
})
export class SharedProvidersModule {}

and then in main.ts add this module to the importProviersFrom

bootstrapApplication(AppComponent, {
  imports: [HttpClientModule],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: IonicRouteStrategy
    },
    provideRouter(routes),
    importProvidersFrom(
      CommonModule,
      SharedProvidersModule,
      BrowserModule,
      IonicModule.forRoot(),
      IonicStorageModule.forRoot({
        name: '__mydb',
        driverOrder: [
          // eslint-disable-next-line no-underscore-dangle
          CordovaSQLiteDriver._driver,
          Drivers.IndexedDB
        ]
      })
    )
  ]
}).catch((err) => console.log(err));

This way is a lot cleaner since you only add your custom services in a single place, and also you can’t use the main.ts providers array to inject your custom services becouse it will crash the aplication, for example when you migrate an aplication to standalone components wit the generator ng generate @angular/core:standalone the generator will add your custom proviers array from the app.module.ts to the providers in the main.ts and the aplication crash, so this is the correct way (it’s weird you have to create a module for custom providers in a standalone aplication but