Loading stuff: `imports` vs. `providers`

I noticed that there seem to be two ways to load things like Ionic Storage:

  1. https://ionicframework.com/docs/storage/

    import { IonicStorageModule } from ‘@ionic/storage’;

    declarations: [
    // …
    imports: [
    bootstrap: [IonicApp],
    entryComponents: [
    // …
    providers: []
    export class AppModule {}

  2. https://alligator.io/ionic/storage-ionic/

    import { Storage } from ‘@ionic/storage’;


    providers: [ Storage ]

Is the second just outdated or can both ways be done?
If so, what’s the difference between the two?

Ok, seems this was a change on Ionic Storage that happened some time during the betas.

Could someone who understands Angular explain what the difference actually means?

The imports array in the app.module.ts file is for importing other NgModules. An NgModule can bundle together a bunch of different things, just like the root module does, so you can make a bunch of things available throughout the entire app without having to import each thing everywhere (all of the Ionic components for example).

I have a video that explains more if you’re interested: https://www.youtube.com/watch?v=qsvIhNaBLzY

1 Like