Best practice for importing providers

Hey guys,

I am very new in Ionic and I am trying to understand how this all works around.

I am trying to do an app with firebase authentication using angularfire2 (actually the important thing here is that I am trying to import a provider)

In a lot of tutorials, I always see that people uses @NgModule in app.module.ts file to import everything they want to.

For example, I’ve found this:

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})

I really need to use it? Because I have created a new ionic app and I dont even found app.module.ts file.

All I have is a app.ts file and in the end of the file I have

ionicBootstrap(MyApp)

And I have read that I can pass my providers like:

ionicBootstrap(MyApp, [MyProvider], {});

Is this possible instead of using @ngModule annotation?

And I also have read that instead of using ionicBoostrap we should import any provider in a top level component (I think it could be the component in app.ts file) , because doing it we would be able to use this provider any time in any component.

So, it should be something like this:

@Component({
  templateUrl: 'build/myApp.html',
  directives: [...],
  providers: [..., MyProvider]
})
class MyApp{ 
  // ...
} 

As you can see Iam really lost :disappointed_relieved:

What is the best way?

1-Using @ngModule
2-Using ionicBootstrap
3-Importing in the provider in a top level component

And, what app.module.ts file is used for? Can I use app.ts to do all the job?

Does anybody has a documentation about theses things?

Thanks a lot :slight_smile:

The output of ionic info would probably be of use to anybody trying to help. What you say is unusual, and looks like you have an old project.

My output of ionic info is

Your system information:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.9
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS:
Node Version: v6.9.3

And you just created this project? I just generated a new project with:

ionic start --v2 scratch

and app.module.ts is right there under src/app.

Hm…I have found whats different…

When creating the project I typed

ionic start scratch --v2 --ts

ts to work with typescript.

When creating with --ts I only have app.ts file.

What should I do? It’s not recommended to create a project using --ts?

Perhaps you created a v1 project which has a different structure. With v2 --ts is no longer needed; it’s the only option.

Nice, thanks a lot! Iam gonna remake the project starting with --v2

So, back to the initial problem,

If I need to use some providers, should I import all providers using @NgModule?