Angular/Ionic app with Capacitor in Nx workspace and nxext ionic-angular plugin

[matzar]

It's a mouthful but I think I've managed to create an Angular/Ionic app within my Nx 14 workspace (14.5.8 TBP) using @nxext/ionic-angular package.

I've even managed to get my android project generated and shipped to an android device with @nxext/capacitor but, my Capacitor plugins don't work anymore (one of our own and the other one from capacitor-community - @capacitor-community/text-to-speech).

The thing is, it's all working when I build in my original project, outside of Nx workspace (so the usual way).

Is there some setting I'm forgetting here? Maybe I should explicitly specify my plugins somewhere in my ionic.config.json or something like that? Has anyone experienced something similar?

PS I'm using nxext because that's the only extension compatible with Nx 14 (And I'm also using Angular 14). I wonder if the same problem would have happened if I were using @nxtend/ionic-angular and Nx 13?

[Flaviu989]

I'm having the same issue but with a different plugin: @ionic-native/app-version, I get an error with the message: plugin_not_installed on both on device and simulator

[matzar]

@Flaviu989 I've found this to work for me:

Assume I have generated an Ionic/Angular app with @nxext/ionic-angular called capacitor-app and I want to generate an ios/android capacitor projects for it in my nx monorepo, and install some capacitor plugins as well, eg. @capacitor/filesystem.

I explicitly install my capacitor plugins in my app project, so I end up with two node_modules folders, one in my root, and one in my capacitor-app project, and my folder structure looks like this:

├── apps
│   ├── capacitor-app
│   │   ├── package.json # this one must have your capacitor plugins installed as a dependency
├── package.json # here you can install your non-capacitor dependencies for your `capacitor-app` and ionic/capacitor dev dependencies

So this is my apps/capacitor-app/package.json:

{
  "name": "capacitor-app",
  "devDependencies": {
    "@capacitor/cli": "^4.4.0"
  },
  "dependencies": {
    "@capacitor/filesystem": "^4.1.3"
  }
}

My ./package.json has all the Ionic/Angular dependencies (these are automatically added when I generate my Ionic/Angular app with @nxext/ionic-angular).

The reason you have to explicitly install your capacitor plugins in your app (in my example - capacitor-app) is for the plugins to get copied over to the ios/android capacitor projects when syncing your app. You can probably notice that there's no capacitor plugins being copied if they're not installed in your app's package.json (in my example, that's apps/capacitor-app/package.json)

I can run the usual capacitor commands to generate ios/android capacitor projects, sync, run etc. for capacitor-app with nx, like this:

# nx run <projec-name>:<capacitor-command>
nx run capacitor-app:<capacitor-command>

Examples of different capacitor commands in nx for the capacitor-app:

ionic capacitor add:

nx run capacitor-app:add
nx run capacitor-app:add:ios
nx run capacitor-app:add:android

ionic capacitor sync:

nx run capacitor-app:sync
nx run capacitor-app:sync:ios
nx run capacitor-app:sync:android

ionic capacitor open:

nx run capacitor-app:open
nx run capacitor-app:open:ios
nx run capacitor-app:open:android

ionic capacitor run:

nx run capacitor-app:run
nx run capacitor-app:run:ios
nx run capacitor-app:run:android

[matzar]

@DominikPieper does this help you understand what might be causing the capacitor plugins to not get copied over?

[DominikPieper]

@matzar, thanks, I'll take a deeper look into this and talk to Devin about this too. The combination with Capacitor 4 will hopefully be ready to be released with v15. I'll roll out some v15 packages soon and the capacitor based ones will be released after this is ready

[Flaviu989]

well I added app-version plugin as a dependency but I was still getting the error that the plugin is not installed

{
  "name": "my-app",
  "devDependencies": {
    "@capacitor/cli": "^3.6.0",
  },
  "dependencies": {
    "@ionic-native/app-version": "^5.36.0",
  }
}

I've tried to add even "@capacitor/core": "^3.6.0", to the app's package.json but unfortunately for me I'm still getting the same error.

[ZaLiTHkA]

to ask a potentially silly question: do you guys have the Capacitor plugins listed in the application project's own package.json file? I believe either dependencies or devDependencies will work, though I prefer the former for clarity.

either way, without listing them in the application project directly, the plugin files won't be copied into your application build..

[ZaLiTHkA]

er... ok, @matzar's message above mysteriously appeared as I posted mine. not sure why my browser didn't load that just now. sorry.

[matzar]

@ZaLiTHkA that's good to know that someone else has also got to the same conclusion! I think it's better to install them as a dependency as that's what your capacitor ios/android project needs for running.

[ZaLiTHkA]

alrighty, so.. "little" teaser here: I've got a workspace, configured with @nrwl/[email protected], @angular/[email protected], @capacitor/[email protected], @ionic/[email protected], @nxext/[email protected], and each of their own peer and dev dependencies, of course.

getting Capacitor to play nicely inside a Nx workspace is incredibly fiddly.. I don't have anything to share with you guys right now, but I will fork and de-brand my current work workspace project over the weekend.

in the meantime, here are a few critical points that helped me get this running:

• use Yarn'! we need the "Selective Dependency Resolution" feature here.. might help to pin this in the engines object of your workspace package.json. maybe even the npmClient of your workspace root ionic.config.json too, just in case..
• use the Ionic CLI tool to init an "Ionic multi-app workspace", this is needed even though we won't use the ionic binary in the project..
• don't bother trying to use ionic CLI commands directly, either from your "Ionic multi-app workspace" or from the nested "Ionic mobile application" folder.. both the Ionic and Capacitor CLI tools will need changes before this will work out-of-the-box.
• grab the "Ionic" VS Code extension - it may not be a silver bullet that makes everything "Just Work"(tm), but it was the only way that I could get Capacitor upgraded from 3 to 4 (the CLI tool does not support monorepo structures yet).

---

to get Capacitor plugin files to sync properly:

first ensure the app entry in your multi-app ionic.config.json file has the correct root path.. this is used to calculate relative paths for generated native platform files (i.e. capacitor.settings.gradle).

then ensure that all your Capacitor plugins are listed in your application project's package.json, including an entry in the resolutions object that holds a relative file path to the root workspace node_modules folder.

note: I would like to set up a Nx "generator" to handle this, which would be called this from a postinstall NPM script hook... I've never built a Nx workspace generator before though, so I'll tinker with that later this evening after my day job. :)

for example:

{
  "name": "awesome-app",
  "dependencies": {
    "@capacitor/android": "4.0.1",
    "@capacitor/core": "4.0.1",
    "@capacitor/network": "4.0.1",
    "@capacitor/ios": "4.0.1",
    "@capacitor/app": "4.1.0",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/splash-screen": "4.0.1",
    "@capacitor/status-bar": "4.0.1"
  },
  "devDependencies": {
    "@capacitor/cli": "4.0.1",
    "@ionic/cli": "6.20.3"
  },
  "resolutions": {
    "@capacitor/android": "file:../../node_modules/@capacitor/android",
    "@capacitor/core": "file:../../node_modules/@capacitor/core",
    "@capacitor/network": "file:../../node_modules/@capacitor/network",
    "@capacitor/ios": "file:../../node_modules/@capacitor/ios",
    "@capacitor/cli": "file:../../node_modules/@capacitor/cli",
    "@ionic/cli": "file:../../node_modules/@ionic/cli",
    "@capacitor/app": "file:../../node_modules/@capacitor/app",
    "@capacitor/haptics": "file:../../node_modules/@capacitor/haptics",
    "@capacitor/keyboard": "file:../../node_modules/@capacitor/keyboard",
    "@capacitor/splash-screen": "file:../../node_modules/@capacitor/splash-screen",
    "@capacitor/status-bar": "file:../../node_modules/@capacitor/status-bar"
  }
}

---

to get livereload working without being able to use the ionic capacitor run command:

basically, we need to explicitly start the Angular dev server and tell our Capacitor to get its UI from there. I've opted to do this using the following packages:

• cross-env, specifically for its cross-env-shell command.
• ip, to get the current IP address of your dev machine, and therefore, your Angular dev server.
• npm-run-all, simply to help coordinate our NPM scripts.

in my root package.json, I have the following relevant scripts:

{
  "scripts": {
    "awesome-app:run:android": "run-s nx:awesome-app:build nx:awesome-app:run:android",
    "awesome-app:run:ios": "run-s nx:awesome-app:build nx:awesome-app:run:ios",
    "awesome-app:dev:android": "cross-env-shell CAPACITOR_LIVERELOAD=true \"run-p nx:awesome-app:serve nx:awesome-app:run:android\"",
    "awesome-app:dev:ios": "cross-env-shell CAPACITOR_LIVERELOAD=true \"run-p nx:awesome-app:serve nx:awesome-app:run:ios\"",
    "nx:awesome-app:run:android": "nx run awesome-app:run:android",
    "nx:awesome-app:run:ios": "nx run awesome-app:run:ios",
    "nx:awesome-app:build": "nx run awesome-app:build:development",
    "nx:awesome-app:serve": "nx run awesome-app:serve"
  }
}

---

note: the executers called with nx run here were created by the @nxext/ionic-angular plugin, these have not been changed.

next up, ensure that your application project has a capacitor.config.ts file (not .json), import address from the ip package, and adjust your file as follows:

import { CapacitorConfig } from '@capacitor/cli';
import { address } from 'ip';

const config: CapacitorConfig = {
  // snip..
};

if (process.env['CAPACITOR_LIVERELOAD'] !== undefined) {
  console.log('[CapacitorConfig] found process.env.CAPACITOR_LIVERELOAD:', process.env['CAPACITOR_LIVERELOAD']);

  // this dynamic configuration allows the Capacitor app to source its UI from the Angular webserver,
  // which will then serve the UI dynamically with live reloading for development purposes.
  const serverIp = address();
  const serverPort = process.env['PORT'] || '4200';
  config.server = {
    url: `http://${serverIp}:${serverPort}`,
    cleartext: true,
  };

  console.log('[CapacitorConfig] effective config:', config);
} else {
  Reflect.deleteProperty(config, 'server');
}

export default config;

now open a terminal at your workspace root and execute yarn awesome-app:dev:android, which will in turn perform the following steps:

1. set the CAPACITOR_LIVERELOAD env var to true
2. spin up an Angular dev server using nx run awesome-app:serve
3. build and deploy your Capacitor app using nx run awesome-app:run:android

---

closing thoughts:

with this in place, now should you have:

• a branded Ionic Angular application with Capacitor integrations enabled
• app business logic extracted into an unbranded libs/shell module (thanks @joshuamorony! 🖖🏼)
• functional Capacitor commands for:
  • building debug binaries (haven't tested production builds yet)
  • running with full livereload (on Android from API 24 up to 32, I am unable to test iOS at this time)

I will documented these steps more clearly in a README.md when I get the aforementioned project fork sorted, but this should help a little in the meantime.

I have also built up a great long list of questions from this process so far, but some of those need more research before the question can be completed... 🤣 so, we'll get there.. one day.

[DominikPieper]

@ZaLiTHkA oh wow, that's great. Looking forward to the cleaned workspace to play with it. :-)

[malua]

Hey everyone,
I happily finished to conversion of my self rolled mono repo with multiple package.json to Nx today, only to find out that capacitor does not really support that... 🙈
One of the main reasons why I wanted to switch to Nx, was that I did not want to update all the dependencies multiple times for all of our whitelabel apps. I tried to come up with a different solution than @ZaLiTHkA, because I do not want to switch to yarn just for this.
So my solution would be to have the package.json in every app directory, but install the needed plugins from the outer node_modules folder like this:
cd apps/my-app
npm install file:../../node_modules/@capacitor/cli

So far this has worked perfectly. The plugins get copied to the native projects like they should. And I don't have to manage the dependency versions in the app package.json. My build script executes npm install in the app directory before every build to make sure the plugins are on the same version like in the outer node_modules. -> I think thats not even necessary, as the node_modules are only symbolic links to the outer node_modules directory.

My package.json in the apps folder now looks like this:

{
  "name": "my-app",
  "dependencies": {
    "@capacitor/android": "file:../../node_modules/@capacitor/android",
    "@capacitor/app": "file:../../node_modules/@capacitor/app",
    "@capacitor/browser": "file:../../node_modules/@capacitor/browser",
    "@capacitor/camera": "file:../../node_modules/@capacitor/camera",
    "@capacitor/clipboard": "file:../../node_modules/@capacitor/clipboard",
    "@capacitor/core": "file:../../node_modules/@capacitor/core",
    "@capacitor/device": "file:../../node_modules/@capacitor/device",
    "@capacitor/geolocation": "file:../../node_modules/@capacitor/geolocation",
    "@capacitor/ios": "file:../../node_modules/@capacitor/ios",
    "@capacitor/keyboard": "file:../../node_modules/@capacitor/keyboard",
    "@capacitor/local-notifications": "file:../../node_modules/@capacitor/local-notifications",
    "@capacitor/network": "file:../../node_modules/@capacitor/network",
    "@capacitor/push-notifications": "file:../../node_modules/@capacitor/push-notifications",
    "@capacitor/screen-reader": "file:../../node_modules/@capacitor/screen-reader",
    "@capacitor/splash-screen": "file:../../node_modules/@capacitor/splash-screen",
    "@capacitor/status-bar": "file:../../node_modules/@capacitor/status-bar"
  },
  "devDependencies": {
    "@capacitor/cli": "file:../../node_modules/@capacitor/cli"
  }
}

What do you think about that solution? Am I missing something why this would not work?

[malua]

The only plugin which does not work at the moment is @capacitor-community/barcode-scanner because they use a prepare script instead of prebublishOnly. But I have fixed that with patch-package and will open an issue or pull request.