App Center cordova plugins not working with capacitor

[berhir]

We try to use the App Center cordova plugins (Push, Analytics, Crashes) in our ionic + capacitor application. Unfortunately there seems to be a problem loading the plugins. The Java code gets executed and the plugins are sending data to App Center, but when we try to access the plugins from the JavaScript/Angular code, we see a warning that the plugins are not installed (on android and iOS).

W/Capacitor/Plugin/Console: Native: tried calling AppCenterAnalytics.trackEvent, but the AppCenterAnalytics plugin is not installed.
W/Capacitor/Plugin/Console: Install the AppCenterAnalytics plugin: 'ionic cordova plugin add cordova-plugin-appcenter-analytics'
W/Capacitor/Plugin/Console: Native: tried calling AppCenterPush.setEnabled, but the AppCenterPush plugin is not installed.
W/Capacitor/Plugin/Console: Install the AppCenterPush plugin: 'ionic cordova plugin add cordova-plugin-appcenter-push'

I also opened an issue in the App Center repo (microsoft/appcenter-sdk-cordova#89) but they were not able find a quick solution.

Can someone give a hint why the plugins are not loaded correctly?

This is how you can reproduce it:
I followed these instructions to generate a new app: Using Capacitor with Ionic

ionic start myAppCenterApp tabs --capacitor
cd .\myAppCenterApp\

Install the App Center Analytics plugin
npm install cordova-plugin-appcenter-analytics
npm install @ionic-native/app-center-analytics

Add the Analytics plugin to the code.
app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AppCenterAnalytics } from '@ionic-native/app-center-analytics/ngx';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    AppCenterAnalytics,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppCenterAnalytics } from '@ionic-native/app-center-analytics/ngx';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private appCenterAnalytics: AppCenterAnalytics
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.appCenterAnalytics.setEnabled(true).then(() => {
        this.appCenterAnalytics
          .trackEvent('My Event', { TEST: 'HELLO_WORLD' })
          .then(() => {
            console.log('Custom event tracked');
          });
      });
    });
  }
}

Then build the web app:
ionic build

Add the android project:
npx cap add android

Open the project in android studio:
npx cap open android

For now I am manually adding the APP_SECRET to the android\app\src\main\res\xml\config.xml file. I hope there is a better way but for now I can live with it.

  <preference name="APP_SECRET" value="_my_app_secret_" />

Then start the app and take a look at the log output to see the warnings I mentioned before.

[jcesarmobile]

Looks like it's a bug on the @ionic-native/app-center-analytics as it calls AppCenterAnalytics.trackEvent, but the API is AppCenter.Analytics.trackEvent. I've not seen a bug report there, so can you create it? https://github.com/ionic-team/ionic-native/issues

But there is also a bug in Capacitor as the generated cordova_plugins.js is in alphabetical order and as cordova-plugin-appcenter-analytics goes before cordova-plugin-appcenter-shared, the AppCenter.Analytics clobber gets overwritten with the later AppCenter clobber. Will look into that.