Dealing with breaking change in Ionic 5

https://pixabay.com/photos/break-through-wall-fist-4206948/

Are you upgrading your Ionic application to v5 and your application was usingEvents which is no longer working?

If the above is true then you are certainly at the right place.

A short story first —

A few days back I saw a Tweet from The ionic team that Ionic 5 is released and just after 10 minutes of seeing that tweet, I upgraded one of our medium-sized production apps to Ionic 5 & Angular 9 with just two commands:

npm install @ionic/angular@latest @ionic/angular-toolkit@latest
ng update @angular/core @angular/cli

Just after running the above commands, I verified the changes, committed it and I ran ionic serve and nothing worked ☹️

I was expecting that the upgrade to Ionic 5 will work as smooth as an upgrade of plain Angular app to Angular 9 but that was not the case. So that retweet of mine was kind of not true 🤣

Basically, for that production Ionic app, I faced three issues while upgrading to Ionic 5 & Angular 9 (which took an hour for me to fix). I’m posting the problem & solution link to the first two issues for brevity:

1. TypeScript compilation issue https://stackoverflow.com/q/60182031/2405040
2. Angular AOT compilation issue https://stackoverflow.com/a/60183174/2405040
3. Usage of Events which got removed in Ionic 5 😳

Let’s talk about the 3rd breaking change while upgrading to Ionic 5.

If you see the Breaking Change, you will see that @ionic/angular Event has been removed from Ionic 5 and they are saying to use Observables or Redux as an alternative.

Wait, what is Observables & redux? 😳😱

No worries, you can Google it and learn about it. There are tons of blog posts and articles for you to implement that. But for now, we have to focus on upgrading our application to Ionic 5.

For this, we will use Subject which is a kind of Obersable.

But I can’t refactor my code that much and I don’t know Observable?

Don’t worry. We at Wiz Panda believes in #giveback by helping back the open-source community.

So let’s begin by copying the following Angular Service to your Ionic/Angular code:

Although, the steps are already given above but let’s run through those steps and change our code quickly by comparing it to the original Ionic 3 Events as given here https://ionicframework.com/docs/v3/api/util/Events/

a) Change the imports:

// Before
import {Events} from 'ionic-angular';
// After
import {Events} from '../your/path/to/service/events';

b) No change in Dependency injection

constructor(private events: Events) {
}

c) Changes in the subscribe method

// Before
events.subscribe('user:created', (user, time) => {
    console.log('Welcome', user, 'at', time);
});
// After
this.events.subscribe('user:created', (data: any) => {
    console.log('Welcome', data.user, 'at', data.time);
});

Basically, you can’t get multiple data like earlier. So you will get data in a single parameter.

d) Changes in the publish method

// Before
this.events.publish('user:created', someUserInstance, Date.now());
// After
this.events.publish('foo:user:logged-out', {
    user: someUserInstance,
    time: new Date()
});

So, earlier you could have passed multiple arguments to the publish method but now you have to pass those as an object.

(Although, you can still tweak the service code to accept in the same format).

AND THAT’S IT….

Now, you can test your code and see if everything works.

Happy Coding!

Want to see your amazing idea in action? Or want to join us? Connect us at https://www.wizpanda.com/