17

I have upgraded from Ionic 4 to Ionic 5, now getting following error:

ERROR in src/app/app.component.ts(4,10): error TS2305: Module '"/node_modules/@ionic/angular/ionic-angular"' has no exported member 'Events'.

Following import line is causing the issue:

import { Events, Platform } from '@ionic/angular';

How can I fix member Event from @ionic/angular error in Ionic 5?

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
Muhammad Omais
  • 319
  • 1
  • 4
  • 12
  • Hi, i am facing the same problem. And for me, it seems that Ionic 4 deleted the events. I found this: https://stackoverflow.com/questions/58265379/ionic-events-replace-with-angular-observables Maybe this helps – Ipad Feb 13 '20 at 09:05
  • 1
    i have the same error, would be also happy to find a simple replacement for that. Dont want to go for redux in my case. – Fargho Feb 13 '20 at 13:15
  • I, too, am getting this. This seems like a massive, breaking change. Was that ever documented by the Ionic team? If so, I'd like to read that! – John Feb 13 '20 at 13:56
  • @Ipad please check my answer. – Shashank Agrawal Feb 16 '20 at 16:46
  • @John it's documented in the Ionic's breaking change documentation. Please check my answer. – Shashank Agrawal Feb 16 '20 at 16:47

3 Answers3

42

Events from @ionic/angular package got removed from Ionic 5. You can see the breaking changes in Ionic5 here.

As it's mentioned in the breaking changes, you should use Observables.

For example, you can create the following service:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class GlobalFooService {

    private fooSubject = new Subject<any>();

    publishSomeData(data: any) {
        this.fooSubject.next(data);
    }

    getObservable(): Subject<any> {
        return this.fooSubject;
    }
}

Now, you can subscribe in any component like app.component.ts:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {

    constructor(private globalFooService: GlobalFooService) {
        this.initializeApp();
    }

    initializeApp() {
        // other code

        this.globalFooService.getObservable().subscribe((data) => {
            console.log('Data received', data);
        });
    }
}

Now, you just have to emit the event from some other component:

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage {

    constructor(private globalFooService: GlobalFooService) {
    }

    onSomeButtonClick() {
        this.globalFooService.publishSomeData({
            foo: 'bar'
        });
    }
}

This is a very simple solution/example or alternative of the Events but you can tweak your code further to make it a namespaced event with a topic.

I have written a blog on this which can give you a full-featured solution so that with very less code change, you can upgrade your app.

https://medium.com/wizpanda/dealing-with-breaking-change-in-ionic-5-db3ba711dfcd

Shashank Agrawal
  • 25,161
  • 11
  • 89
  • 121
  • 1
    thanks for your medium post! Used it for the migration! It would be useful if it could handle the unsubscribes, but it's great anyways! Best regards! – Guilherme Sampaio Aug 01 '20 at 00:30
  • 1
    Hi, @GuilhermeSampaio I'm glad that the answer & the blog was useful to you. Regarding the unsubscribe, it's already there. Please look at it again https://gist.github.com/sagrawal31/76c089251008ac746fc8cf3aef4bc261#4-to-unsubscribe – Shashank Agrawal Aug 01 '20 at 04:44
  • 1
    i was not clear! I was talking about unsubscribing using the string that subscribed it! I have modified my code to do it in the components using your events service! :D – Guilherme Sampaio Aug 01 '20 at 16:45
1

Events have been removed. You can do your own service as event as your own using observables,and subject behavior so you could publish to the ovserable and subscribe to get the value.

Mostafa Harb
  • 1,558
  • 1
  • 6
  • 12
0

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.

With this article can resolve that problem, add a new service similar that Events of Ionic v4 :

https://medium.com/wizpanda/dealing-with-breaking-change-in-ionic-5-db3ba711dfcd

Angel Valay
  • 51
  • 1
  • 3