Ionic Native Badge with capacitor

Capacitor
1

Hi,

I’m trying to make use of the Ionic Native Badge plugin with cordova by using capacitor.

However in the documentation it shows me to install @ionic-native/badge@4 and cordova-plugin-badge.
Both which I’ve installed. Whenever I try to use the badge functionality I’m getting the error:

Object(WEBPACK_IMPORTED_MODULE_1__ionic_native_core[“cordova”]) is not a function.

I’m not sure whether this is because I haven’t done a haspermission check yet, or whether this is due to a conflict with ionic-native.

I found a github issue from someone saying I should update the ionic-native version since it is conflicting with other ionic-native functionality?

So I figured I’d do:
npm install @ionic-native/badge@latest
and
npm install cordova-plugin-badge@latest

which then tells me the following error during compilation:
error TS2749: ‘Badge’ refers to a value, but is being used as a type here.

for private badge: Badge,
where Badge is imported from @ionic-native/badge

any idea what I am doing wrong here?

Please help I’m stuck.

My information:

Ionic:

Ionic CLI : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 4.11.10
@angular-devkit/build-angular : 0.803.24
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 1.5.2
@capacitor/core : 2.1.0

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res (update available: 0.15.0) : 0.14.0
native-run (update available: 1.0.0) : 0.2.8

System:

Android SDK Tools : 25.2.4 (/users/doelapp/Library/Android/sdk/)
ios-deploy : 1.9.4
NodeJS : v12.1.0 (/usr/local/Cellar/node/12.1.0/bin/node)
npm : 6.13.7
OS : macOS Catalina
Xcode : Xcode 11.5 Build version 11E608c

2

What code have you tried? You haven’t provided that so we have no way of knowing

3

Basically as a test all I tried was:


import { Badge } from '@ionic-native/badge';

export class MyService {

  constructor( private badge: Badge) {
  }

  async myfunction() {
    this.platform.ready().then(() => {
        this.badge.set(5);
    });
  }
}

which caused a white screen to display and the error message I’ve shown above.
This was called on app initialization.

I’m pretty sure I’m doing something wrong but I haven’t yet figured out what.

I reverted back the changes of my project and am going to start again fresh to see whether that would work.

The current plugins that I use I can’t display because I’ve already reverted back the changes.
Apologies, I’m a bit chaotic right now, I think I should try doing this in a fresh capacitor project to see whether I’m getting the same issues.

4

you’re missing key steps here

5

Ah yes! That makes a lot of sense, I totally forgot about the /ngx part.

I’ll give that a shot, thanks a lot mike :slight_smile:

I’ll try adding this.

6

Apparently after doing this I am getting a message saying the following:

To Native Cordova ->  Badge request Badge463829596 ["options": []]
ERROR MESSAGE:  {"message":"not implemented","errorMessage":""}

I’ve added badge in my app.module.ts and I’ve used /ngx at the end for importing.

The badge does seem to disappear from the previous badge set with firebase cloud messaging.
But I can’t seem to set a new value.

7

So Im testing it out, but it’s working for me.

Not sure if you’re using FCM, you probably creating conflicting badge mgmt systems.

8

Dear Mike,

Apparently it takes a while before the badge is updated in my case. When I walked away and came back after about a minute the badge properly displayed.

I have no idea why this isn’t instant. But perhaps like you said the badge management system is also being used by a conflicting package,

I am using capacitor-fcm for subscribing to fcm topics. I haven’t found a way to do badge management using capacitor-fcm so I’m not sure whether it actually uses badge management.

I’ll try debugging this some more tomorrow.