# IonicStorage for Angular in Ionic 7

**URL:** <https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596>\
**Category:** Ionic Framework\
**Created:** [April 11, 2023, 2:15pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596 "2023-04-11T14:15:49Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [April 11, 2023, 2:15pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/1 "2023-04-11T14:15:49Z")

</div>

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:

```auto
npm install @ionic/storage-angular

```

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

```auto
IonicStorageModule.forRoot()

```

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

```auto
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:

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

```

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

Thanks

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [April 11, 2023, 4:30pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/2 "2023-04-11T16:30:26Z")

</div>

Imported via main.ts file. Is it correct?

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

```

---

<div class="post-metadata">

**Author:** ![ibersito1992](https://avatars.discourse-cdn.com/v4/letter/i/258eb7/32.png) [@ibersito1992](https://forum.ionicframework.com/u/ibersito1992)\
**Post date:** [April 12, 2023, 3:22pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/3 "2023-04-12T15:22:20Z")

</div>

this is the solution to import ?

---

<div class="post-metadata">

**Author:** ![lsantaniello](https://avatars.discourse-cdn.com/v4/letter/l/e495f1/32.png) [@lsantaniello](https://forum.ionicframework.com/u/lsantaniello)\
**Post date:** [April 13, 2023, 3:45pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/4 "2023-04-13T15:45:30Z")

</div>

yes. it works fine.

L

---

<div class="post-metadata">

**Author:** ![dcunningham](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/dcunningham/32/127735_2.png) [@dcunningham](https://forum.ionicframework.com/u/dcunningham)\
**Post date:** [May 10, 2023, 7:23pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/5 "2023-05-10T19:23:46Z")

</div>

How do you do this when not using the standalone

---

<div class="post-metadata">

**Author:** ![designeromega](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/designeromega/32/143822_2.png) [@designeromega](https://forum.ionicframework.com/u/designeromega)\
**Post date:** [December 3, 2023, 8:58am UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/6 "2023-12-03T08:58:06Z")

</div>

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

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

```

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

```auto
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

---

<div class="post-metadata">

**Author:** ![gustavodscruz](https://avatars.discourse-cdn.com/v4/letter/g/df788c/32.png) [@gustavodscruz](https://forum.ionicframework.com/u/gustavodscruz)\
**Post date:** [June 17, 2025, 7:59pm UTC](https://forum.ionicframework.com/t/ionicstorage-for-angular-in-ionic-7/232596/7 "2025-06-17T19:59:41Z")

</div>

god bless you man, tks so much