nxext / nx-extensions-ionic

Nx Extension for Ionic
MIT License
33 stars 9 forks source link

Capacitor v5 usage #9

Open e-lobo opened 1 year ago

e-lobo commented 1 year ago

Describe the bug When we install a plugin for example like FileSystem and try to sync it does not work. Its only when we add the package to the app/project/package.json does it work.

To Reproduce Steps to reproduce the behavior:

  1. create a nx mono repo
  2. create a test app project
  3. install capacitor
  4. install FileSystem plugin
  5. use the fileSystem plugin (be silly with it doesn't matter ie as long as the android build picks up FIleSystem usage in your codebase)
  6. run npx nx run project:sync:android (or ios or both..) & npx nx run project:copy:android
  7. open the app in android studio
  8. build project notice that it fails..
  9. add to app/project/package.json => filesystem@3.. (same package that we added to root)
  10. go inside directory app/project and run npx cap sync android.
  11. now the build of android works

Expected behavior We shouldn't have to add the dependency to the app's json

Additional context Add any other context about the problem here.

LennonReid commented 1 year ago

You ought to delete the app/project/package.json file, allowing it to rely on external package.json dependencies instead. This issue can catch those who overlook it off guard. For detailed steps on identifying and resolving this problem, please refer to my article at [Medium]. It took me an entire afternoon to navigate through and resolve this perplexing issue.

LennonReid commented 1 year ago

It's indeed a concern related to this library. Let's hope for a swift resolution.

stevebrowndotco commented 12 months ago

I can confirm I have the same issue when updating to capacitor 5. My plugins were not being detecting and updating the PodFile. Removing the package.json specific to the app folder, leaving only the external worked.

ZaLiTHkA commented 7 months ago

while removing the Nx workspace app project's package.json file does work, I don't feel like this is a "bug" that needs fixing...

to explain: I have a workspace with three mobile applications that, in addition to some common UI components and services, also have unique business logic that depends on a different set of Capacitor plugins. for example: only one of them uses Firebase Cloud Messaging, only one uses TCP Sockets, only one uses BLE, only two of them do file sharing, etc.

in these apps, I simply define the Capacitor plugins in the workspace app projects as "@capacitor/device": "../../node_modules/@capacitor/device". the only time this file changes is if the list of plugins for that application needs to change.

perhaps this is just something that needs to be documented more clearly? @DominikPieper do you have any particular opinions on this?

LennonReid commented 7 months ago

You ought to delete the app/project/package.json file, allowing it to rely on external package.json dependencies instead. This issue can catch those who overlook it off guard. For detailed steps on identifying and resolving this problem, please refer to my article at [Medium]. It took me an entire afternoon to navigate through and resolve this perplexing issue.

I'm sorry for the confusion earlier.

I realized my initial solution was incorrect as it skirted around the issue without grasping the benefits of the intended design.

I had resolved this correctly some time ago but failed to locate and update this issue. Thank you for bringing it to my attention. @ZaLiTHkA

The right approach is to selectively import the plugins required for our current project.

This prevents the capacitor.build.gradlefile from accumulating unnecessary dependencies every time "npx cap sync android" is run, keeping the package lean for each app under apps/ by only including what's necessary. I believe this method is correct and welcome any feedback or corrections.

Here's how the code looks: package.json

{
  "name": "qib-ionic",
  "devDependencies": {
    "@capacitor/cli": "../../node_modules/@capacitor/cli",
    "@capacitor/app": "../../node_modules/@capacitor/app",
    "@capacitor/core": "../../node_modules/@capacitor/core",
    "@capacitor/network": "../../node_modules/@capacitor/network",
    "@capacitor/assets": "../../node_modules/@capacitor/assets",
    "@capacitor/splash-screen": "../../node_modules/@capacitor/splash-screen",
    "@capacitor/preferences": "../../node_modules/@capacitor/preferences",
    "@capacitor/camera": "../../node_modules/@capacitor/camera",
    "@capacitor/toast": "../../node_modules/@capacitor/toast",
    "@capacitor/haptics": "../../node_modules/@capacitor/haptics",
    "@capacitor/filesystem": "../../node_modules/@capacitor/filesystem",
    "@capacitor/text-zoom": "../../node_modules/@capacitor/text-zoom",
    "@capacitor-mlkit/barcode-scanning": "../../node_modules/@capacitor-mlkit/barcode-scanning"
  }
}

The capacitor.build.gradle file is structured as follows:

// DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN

android {
  compileOptions {
      sourceCompatibility JavaVersion.VERSION_17
      targetCompatibility JavaVersion.VERSION_17
  }
}

apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
dependencies {
    implementation project(':capacitor-app')
    implementation project(':capacitor-network')
    implementation project(':capacitor-splash-screen')
    implementation project(':capacitor-preferences')
    implementation project(':capacitor-camera')
    implementation project(':capacitor-toast')
    implementation project(':capacitor-haptics')
    implementation project(':capacitor-filesystem')
    implementation project(':capacitor-text-zoom')
    implementation project(':capacitor-mlkit-barcode-scanning')

}

if (hasProperty('postBuildExtras')) {
  postBuildExtras()
}