Loading stuff: `imports` vs. `providers`

Ionic Framework ionic-v3
1

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’;

    @NgModule({
    declarations: [
    // …
    ],
    imports: [
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
    ],
    bootstrap: [IonicApp],
    entryComponents: [
    // …
    ],
    providers: []
    })
    export class AppModule {}

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

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

    @NgModule({
    …
    providers: [ Storage ]
    })

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

2

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?

3

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