How to add an ionic project to an nx workspace?

Question

I have an Nx v15.9.2 workspace, to which I added a nestjs server using nx g @nrwl/nest:app my-nest-app.

I want to add an ionic project to my nx workspace, but I haven't found a good way to do this. I checked certain tutorials online, such as: this tutorial (uses @nrwl/angular) and this tutorial (that uses @nxtend/ionic-angular from https://nxtend.dev/ plugins that focuses on enabling Ionic and Capacitor development in an Nx workspace) but the tutorials and plugins are outdated and don't work with Nx v15 workspace.

How can I create an ionic (Capacitor) project to my existing nx workspace?

Agential

Were you able to resolve this ? Have you tried : github.com/nxext/nx-extensions ? – Szombathely

Answer 1

Unfortunately I think any answer to this question would be outdated a few weeks later. As of Februari 6th Nx 18.0 has come out 4 days ago and there is currently no way to integrate an Ionic project with Nx. That said I'll give you some pointers to help figure out how to add ionic to your workspace at the time of writing that may or may not still be useful in the future.

Nxtend is dead

The @nxtend plugins have been renamed/moved and are now part of @nxext, the ionic/capacitor specifically are now located in this repository. This means anyone with looking to add ionic to a recent version of nx needs the @nxext/ionic and @nxext/capacitor packages.

Former solution

You can use a Nx 17 workspace to use the @nxext packages.

npx [email protected]
npm install --save-dev --exact @nxext/ionic-angular
nx generate @nxext/ionic-angular:application my-cool-app

Solution that works

1. you generate your app normally with nx & angular nx g @nx/angular:app apps/appName
2. Then you change his configuration nx g @nxext/ionic-angular:configuration

Where to find documentation?

To save an searching souls some time I'll say that as of Oct 7th 2024 The documentation for @nxext/ionic-angular is hosted here.

Snowslide