Ionic-framework: Multiple instances of certain services created on bootstrap (App)

[btroncone]

Short description of the problem:

In certain cases Ionic is creating multiple instances of a service included as a provider in the @App() decorator. I have attached a link to a plunker displaying the issue. This same setup works fine with a vanilla Angular 2 application, with one instance of the service created. This can be seen here. I have spoken to other developers experiencing the same problem but have yet to track down the root cause.

Thanks in advance for your help!

What behavior are you expecting?

One instance of each service included in providers for App decorator.

Steps to reproduce: (Instructions also in Plunk)

1. Once breakpoint is hit, navigate to store.js to witness service (store) being created twice. Effects are properly subscribed to first store but not second. This can be seen in console as the ngrx/init action is logged but no future actions once second store is created.

Which Ionic Version? 1.x or 2.x
2.x

Plunker that shows an example of your issue

http://plnkr.co/edit/gSrdJrFfGwHEPBMWlERH?p=preview

[adamdbradley]

We just refactored Ionic so it no longer uses @App, but rather ionicBootstrap() instead, which works just like angular's bootstrap. It's currently in the 2.0 branch and will hit the beta.8 release.

@jgw96 Would you be able to test this out and see if you can replicate the issue with the updated ionicBootstrap? Thanks

[jgw96]

@adamdbradley Yep, sure can. Will post my results here.

[btroncone]

Thanks for your help! 👍

[jgw96]

Hello @btroncone ! I cant seem to reproduce this with our latest nightly that has the updates Adam described above. Would you be able to install Ionic 2 nightly and see if you can reproduce? If so, to install the latest Ionic 2 nightly you can simply run npm install ionic-angular@nightly --save. There are also a few minor changes you will have to make in your code. First, replace all instances of @Page with @Component (remember to import @Component from @angular/core). Finally, in your app.ts change @App to @Component, and then import ionicBootstrap from ionic-angular and use it like this

ionicBootstrap(MyApp, null, {
  tabbarPlacement: 'bottom'
});

As you will notice any configs that you have must also be moved to this ionicBootstrap call. If none of this makes sense just comment on here and i will help!

[btroncone]

I am attempting the upgrade now in order to test and am receiving this error:
zone.js:461 Unhandled Promise rejection: Unexpected directive value '[object Object]' on the View of component MainAppComponent

Now that the @Page() decorator is removed, do I need to import IONIC_DIRECTIVES with every component? What is the optimal solution? (I'm guessing this may be cause of error?)

Thanks in advance!

Edit: If there is a sample project I could look at with new setup that may be ideal.

[jgw96]

Hey @btroncone sorry you are having trouble upgrading! Here is an example repo i made of how to upgrade, hopefully it helps.

[btroncone]

@jgw96 It works fine until I add providers to the ionicBootstrap function. Example:

Working:

ionicBootstrap(MyApp, []);

Fails:

ionicBootstrap(MyApp, [
  provideStore(reducer)
]);

After checking with multiple services it seems to fail at the first provider instance it comes across.

Error message: browser_adapter.js:77 EXCEPTION: Unexpected directive value '[object Object]' on the View of component MyApp

[jgw96]

@btroncone Ahh ok, so after discussing this with the team this is actually a known issue and were actually working on this as we speak. I was obviously testing wrong above, sorry about that!

[jgw96]

I will update this issue when this is fixed.

[btroncone]

Thanks! :+1:

[jgw96]

Hey @btroncone so the awesome @brandyscarney just cut another nightly with a fix for the above discussed issue. You can install [email protected] if you would like to test again, or if you just have ionic-angular@nightly in your package.json you should just be able to run npm install again. Thanks!

[jgw96]

I am also going to do some testing again

[btroncone]

Awesome, thanks! I'll test again in morning 👍

[jgw96]

@btroncone Sounds good!

[Merott]

I just tested it. Seems good to me! 👍

[btroncone]

Sorry for delay, a few other devs and I also tested and all seems good. Awesome work! 👍

[brandyscarney]

Thanks for letting us know! This will be in the beta 8 release with a few other changes so please make sure to read the changelog. :smile: