Best practice for importing providers


#1

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:


#2

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.


#3

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


#4

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.


#5

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?


#6

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


#7

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?