Capacitor 3.0 Upgrade Plugins "not implemented" Exception (Nx Monorepo)

Question

We use Angular in a nx monorepo in which we have been using Capacitor 2.4 for half a year now. We only use the android platform as of now. Now, we need to upgrade to Capacitor 3.0. The app itself is running again, however, as soon as I use any Plugin I always get the following exception: ERROR Error: "Device" plugin is not implemented on android

This is the same for every Plugin I have tried to use. So, if I would use the Storage Plugin I would get the same exception only for "Storage". I have followed the Capacitor migration guide (https://capacitorjs.com/docs/v3/updating/3-0) in detail, but I can't figure out where I went wrong. In general, the app works now, as long as I have any code that uses a Capacitor Plugin commented out. The code using the Plugins did work before the upgrade.

As according to the migration guide, I added import '@capacitor/core'; at the main.ts file, although I also tried putting it in the app.module.ts but had no success there either. I have installed every plugin for the whole app (the root) and for the nx-capacitor app (the capacitor app added with @nxtend-capacitor) as suggested here https://nxtend.dev/docs/capacitor/getting-started/. I also have updated the capacitor cli, the capacitor core and the capacitor android version for both package.json files. Furthermore, according to the android upgrading guide, I have also updated gradle and the android gradle plugin. I have also updated the Android variables accordingly.

I honestly do not have too much experience or in-depth knowledge of Capacitor and I am aware that Capacitor 3 is still in Beta as of this point. However, maybe someone has already stumbled upon this problem and found a solution. I am also not sure, if this problem could somehow be caused by using this monorepo approach with nx. Has someone had experience in upgrading Capacitor to 3.0 while using a Nx monorepo?

For reference, this is the current package.json for the capacitor app:

{
  "name": "app-cap",
  "dependencies": {
    "@capacitor-community/electron": "^1.3.2",
    "@capacitor/android": "^3.0.0-rc.0",
    "@capacitor/app": "^0.3.6",
    "@capacitor/camera": "^0.4.3",
    "@capacitor/cli": "^3.0.0-rc.0",
    "@capacitor/core": "^3.0.0-rc.0",
    "@capacitor/device": "^0.5.6",
    "@capacitor/filesystem": "^0.5.2",
    "@capacitor/ios": "^3.0.0-rc.0",
    "@capacitor/local-notifications": "^0.6.0",
    "@capacitor/push-notifications": "^0.3.6",
    "@capacitor/storage": "^0.3.6",
    "capacitor-secure-storage-plugin": "^0.5.0",
    "com-darryncampbell-cordova-plugin-intent": "^2.0.0",
    "com.darktalker.cordova.screenshot": "^0.1.6",
    "cordova-plugin-advanced-http": "^3.1.0",
    "cordova-plugin-app-launcher": "^0.4.0",
    "cordova-plugin-appcenter-analytics": "^0.5.1",
    "cordova-plugin-appcenter-crashes": "^0.5.1",
    "cordova-plugin-appcenter-shared": "^0.5.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "^2.0.2",
    "cordova-plugin-file": "^6.0.2",
    "cordova-plugin-file-opener2": "^3.0.5",
    "cordova-plugin-zip": "^3.1.0",
    "jetifier": "^1.6.6"
  }
}

Answer 1

Both answers are wrong.

Capacitor 3 allows android plugins to auto register, but for that you need to remove the init method from MainActivity.java, if it's there the automatic registration won't work as init is the legacy way of registering plugins.

So you have two options:

1. Remove the init method from MainActivity.java as explained on the capacitor 3 updating docs
2. Keep the legacy init method and add plugins as you did on Capacitor 2. I.E. add(DatepickPlugin.class);

By removing android folder as answer 1 suggests, the init method gets removed and that's why that answer works, but it's destructive, it will remove all your manual changes in your projects.

And adding plugins as answer 2 suggests also works, but there is no need for doing that if using automatic plugin registration, that method is really there for non npm plugins.

Answer 2

When using live reload, make sure you have http:// in url.

As per documentation:

"server": {
  "url": "http://192.168.1.68:8100",
  "cleartext": true
},

When I used just ip, it rendered site, but plugins did not work (not implemented exception).

Answer 3

Try removing android platform (IMPORTANT: backup your android directory before removing.)

and run:

npm install @capacitor/core@next @capacitor/cli@next

npx cap init

npm install @capacitor/android@next

npx cap add android

then build your project and:

npx cap sync

Answer 4

I had the same problem

You need to add the plugins manually in your MainActivity.java

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // --- Remove bridge init as it's deprecated and add these lines
    registerPlugin(com.capacitorjs.plugins.app.AppPlugin.class);
    registerPlugin(com.capacitorjs.plugins.device.DevicePlugin.class);
    // ---
  }
}

Answer 5

As per doc, you just need to update MainActivity.java file

https://capacitorjs.com/docs/updating/3-0