Nx: How to use nx workspace for ionic 4

[abidev]

How to generate ionic application with in nx workspace ?

Is it supported ? if any please provide some examples

[NathanWalker]

Hi @abidev - The nstudio team has an Ionic app generator and other support in xplat for Nx on a branch and plan to introduce it sometime late next week. It will support Ionic 4 with Capacitor. The xplat tools have been hosted on a private repo while the structure matured however they will be open sourced sometime this month.

[NathanWalker]

xplat now supports Ionic 4 with Capacitor:

ng g xplat --platforms=ionic --prefix=foo

ng g app.ionic appname

Prepare iOS development with Capacitor:

npm run prepare.ionic.appname.ios

Prepare Android development with Capacitor:

npm run prepare.ionic.appname.android

You can then develop Ionic as normal via web browser/livesync with:

npm run start.ionic.appname

Capacitor is under very active development.
iOS and Android dev takes place in native IDE's and either can be opened with:

npm run open.ionic.appname.ios
// or...
npm run open.ionic.appname.android

You can then manually sync your Ionic web changes to the apps with:

npm run sync.ionic.appname

See #6 here for details: https://nstudio.io/xplat/#6addionicapp

[JamesHenry]

Thanks, @NathanWalker!

@abidev We don't currently have plans to provide documentation for Ionic-specific things, as it is a little outside of the core Angular framework/tooling.

Awesome contributors like Nathan are your best bet for things like this, and hopefully his recommendation of xplat is useful to you - it's an awesome tool!

[abidev]

@NathanWalker & @JamesHenry Thanks

[galki]

suppose i dont agree with xplat's opinionated architecture. can you give a summary of what needs to be done to generate an ionic app in /apps?

looking at how xplat does it it seems they copy the output of an old ionic install instead of porting a live install to /apps - is this considered standard practice?

[NathanWalker]

@galki as far as xplat, we’ve considered a flag to not generate any of the supporting architecture. The baseline assumption is that you may want to build apps for whichever at the moment while leaving open the possibility to build for others (for whatever reason) with relative ease, hence the supporting architecture to provide those opportunities.

Perhaps you wouldn’t mind dropping an issue here
https://github.com/nstudio/xplat/issues regarding Ionic and/or any other thoughts around architecture you prefer we could consider that would help with Ionic projects.

Greatly appreciate any input you’re willing to share 🤗

The ionic team has been working on some schematics with v4 and we’re excited to utilize some of those which should help solve your other point.

[Bielik20]

I have stumbled open this some time ago and recently created proof of concept for standard Nrwl Workspace. You can read about it here.

[DmitryEfimenko]

I tried using the xplat thing. It installed Angular Cli 1.7... Not acceptable to me. I think this issue should be re-opened. Ionic lib should be supported by NX out of the box

[NathanWalker]

@DmitryEfimenko perhaps a sample repo if you could share would allow someone to assist. xplat doesn’t install angular cli but relies on your global install in addition to which version of Nx you setup.

[DmitryEfimenko]

ah, nevermind. I had an old version of nx installed globally a long time ago. Sorry for the false alarm

[philly-vanilly]

Ok, so I wanted to bootstrap Ionic with NX and for my first approach I have used XPlat with the no-xplat-architecture option. As far as I can see the generated app is not much different from a classic Angular app generated with NX, except the capacitor config. However, I could not choose Cypress or Jest as test runners @NathanWalker is there any technical reason for that or was it just not implemented yet?

[philly-vanilly]

@NathanWalker also, do you know an example project where I can see an Ionic app targeting multiple platforms? In this video https://www.youtube.com/watch?v=EqqNexmu3Ug I see you are using inheritance with Angular components with NativeScript. I am wondering if one would do it similarly with features for native iOS/Android within an Ionic workspace

[joanofdart]

I have stumbled open this some time ago and recently created proof of concept for standard Nrwl Workspace. You can read about it here.

actually I followed your guide instead of adding xplat and its great! Thanks :D

[Radecom]

It would be nice to have a command like @nrwl/ionic to add an Ionic project to an nx-workspace. This way we could have a complete stack of applications made in Typescript.
Who else thinks this is a good idea?

[johannesschobel]

Dear @vsavkin @JamesHenry ,
what is the current state of mind from the nrwl team with respect to supporting ionic? maybe the latest 5.x version that ships with angular 9? please? ;)