Add Ionic 5 projects support

[ch4mpy]

Prerequisites

• [x] I am running the latest version
• [x] I checked the documentation (nx.dev) and found no answer
• [x] I checked to make sure that this issue has not already been filed
• [x] I'm reporting the issue to the correct repository (not related to React, Angular or any dependency)

Expected Behavior

Full Ionic 5 support as for Angular or React web projects

Current Behavior

Ionic project are not supported by Nx. There are some projects proposing some sort of Ionic support in nrwl worksapces like @nstudio/xplat or @nxtend/ionic-react but those projects don't move at the same pace and it's actually not so easy to maintain a Ionic app in a @nrwl/workspace to share code with a regular Angular web app for instance.

A similar request for Ionic 4 was closed on July the 16th 2018 but recent comments on it tend to show real interest for such a feature.

[vsavkin]

We recently launched out plugin support (read more here: https://nx.dev/angular/guides/nx-plugin). And we already have a plugin adding support for ionic-react. If you run nx list, you should be able to see it.

We are happy to help anyone who is going to add Angular Ionic support to Nx.

[wesleygrimes]

Just to second what Victor said, if anyone needs help feel free to reach out and we can assist in the process.

[tayambamwanza]

@wesleygrimes I'm starting a new project with nx for the first time, I use ionic a lot so I'll post feedback if I hit any major roadblocks.

[wesleygrimes]

Ok great! We can reach out to Devin Shoemaker as well.

On Fri, May 15, 2020 at 8:35 AM Tayamba Mwanza notifications@github.com wrote:

@wesleygrimes https://github.com/wesleygrimes I'm starting a new project with nx for the first time, I use ionic a lot so I'll post feedback if I hit any major roadblocks.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/nrwl/nx/issues/2633#issuecomment-629210789, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACPFVFB3OVMCVDM7QN4PGTRRUZI7ANCNFSM4LEQYHBA .

-- Sent from Gmail Mobile

[ch4mpy]

I'm thinking of initiating the Nx plugin I'm expecting for Ionic 5 Angular projects next week-end.

@vsavkin, @wesleygrimes, can you confirm no-one else has reached you to accomplish the same thing?

Do you have any suggestions for the plugin name or is @ch4mpy/nx-ionic-angular just fine?

Any more resources than https://nx.dev/angular/guides/nx-plugin?

[elio-maggini]

@ch4mpy Have you made any progress with this? I've looked at the nx-plugin documents and still would have no idea where to start :) I've also tried the xplat plugin which is pretty good except it uses Capacitor by default and I've found no easy way to swap in Cordova instead.

[tayambamwanza]

@elio-maggini Hi, I got caught up sorting out i18n stuff, from what I've done with ionic, it is possible to have ionic components in nx without xplat, you won't have capacitor unfortunately as it doesn't support monorepo at this point in time..

Here are the commands I used, I documented but I haven't used more than the toolbar thus far:

npx create-nx-workspace@latest organisation-name

name: project-name option angular-nest

npm install --save-dev cypress

ng add @ionic/angular --project=project-name

// I removed cypress and reinstalled as there were compat issues.

[IngAjVillalon]

I'm thinking of initiating the Nx plugin I'm expecting for Ionic 5 Angular projects next week-end.

@vsavkin, @wesleygrimes, can you confirm no-one else has reached you to accomplish the same thing?

Do you have any suggestions for the plugin name or is @ch4mpy/nx-ionic-angular just fine?

Any more resources than https://nx.dev/angular/guides/nx-plugin?

That would be great @ch4mpy ! You should open a collection to get resources on those projects. So we could all contribute to your cause.

[Radecom]

Yes please, I support the cause of having a way to add our ionic/angular projects to nx.

[elio-maggini]

@tayambamwanza I second the idea of opening a collection. I would be happy to contribute in whatever capacity I am capable. I've never written a plugin myself but could imagine being useful as part of larger group that knows what it is doing. And adding ionic to nest would be cherry. The xplat plugin is pretty good but comes with opinions that for me personally are not useful. It would be great to have a scaffolding tool that offers more options.

[aronrodrigues]

+1

[ntziolis]

@ch4mpy Would love to help move this along. We are starting a new ionic project withi next few week and would hate to not be able to use nx (as now all our projects use nx). Is there a repo already If not are you looking to create one soon or if its not public add me to the private repo we can then sync on how we divide up the work?

[aronrodrigues]

So let’s get it done. What timezone are you in? I’m in Dublin.

Let’s do a startup meeting to create repo and assign some tasks.

What about Monday, 17 16:00 gmt?

On Wed 12 Aug 2020 at 08:06, ntziolis notifications@github.com wrote:

@ch4mpy https://github.com/ch4mpy Would love to help move this along. We are starting a new ionic project withi next few week and would hate to not be able to use nx (as now all our projects use nx). Is there a repo already If not are you looking to create one soon or if its not public add me to the private repo we can then sync on how we divide up the work?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nrwl/nx/issues/2633#issuecomment-672660966, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYKG35MUYXN3HKE7O3PPVLSAI5ODANCNFSM4LEQYHBA .

[mattarau]

Hey Guys,

Since @ntziolis and @aronrodrigues are willing to move forward with this, I'd like to share what I found out while manually adding an ionic app to an existent nx workspace.

It seems that it's only possible to have a single ionic app per workspace for now. The ios and android folders must be in the root folder in order to work properly and the capacitor.config.json must be along with the package.json file, which basically means that it also must be in the root folder, as we want to keep the single source of dependencies from nx and avoid having another package.json file in the ionic app folder.

Ionic already support multiple projects with the ionic.config.json file (which is also in the root folder, but I think this one is fine to be there), but it is not something that is well accepted as a good solution, as you can see in this issue: https://github.com/ionic-team/capacitor/issues/691

If you have any questions, let me know and I check if I can help as I did this a few months ago, and it might be that I forgot something.

Cheers!

[ntziolis]

@aronrodrigues I'm in Germany Monday anytime is fine with me. Generally since this is actually directly for our next project I'm available pretty much anytime any day.

[elio-maggini]

@aronrodrigues @ntziolis @mattarau I am also available to assist though my direct knowledge of nx plugins is low. I am available Monday, 17 @ 16:00 GMT.

I would like to mention I think it is important for a plugin to also support Cordova and not just Capacitor. While the effort is commendable, it is still quite new and makes some changes to local development workflow that my organization would never accept. Without Cordova project support, it would be a non-starter for us.

[ntziolis]

@aronrodrigues @ch4mpy I have setup a private gitter to exchange contacts to figure out how we can get this started asap: https://gitter.im/nx-ionic/team

@mattarau Will def get back to you on that

If there is anybody else who would like to contribute let me know and I'll add you.

[elio-maggini]

@ntziolis If you could please add me.

[ch4mpy]

I have to admit I got pretty busy with other projects and dropped the idea of using Nx for now.

I just replaced Karma with Jest and Protractor with Cypress in the exiting Angular workspace of the company I recently joined and then added my Ionic project as any other Angular project in it.

The solution I came to allows for several Ionic projects in the same workspace (with different plugins in each). Regular angular-cli and ionic-cli commands work just as usual.

Some info about the final config: ionic.config.json at project root:

{
  "defaultProject": "numera-ionic",
  "projects": {
    "numera-ionic": {
      "name": "Numera",
      "integrations": {
        "capacitor": {}
      },
      "type": "angular",
      "root": "lexi-numera/Client/ionic"
    }
  }
}

capacitor.config.json is in Ionic project sub-folder (lexi-numera/Client/ionic/ as you can guess from ionic conf above)

package.json files: most dependencies are managed from root package, only plugins are managed from ionic project package. lexi-numera/Client/ionic/package.json:

{
  "name": "numera-ionic",
  "version": "0.0.0",
  "scripts": {
    "ng": "node --max-old-space-size=3072 node_modules/@angular/cli/bin/ng",
    "postinstall": "cd electron && npm install"
  },
  "dependencies": {
    "@ionic-native/app-center-crashes": "^5.26.0",
    "@ionic-native/deeplinks": "^5.27.0",
    "@ionic-native/core": "^5.24.0",
    "@ionic-native/sqlite": "^5.24.0",
    "@ionic-native/sqlite-porter": "^5.24.0",
    "@ionic-native/vibration": "^5.25.0",
    "@ionic-native/web-intent": "^5.24.0",
    "@types/websql": "0.0.27",
    "angular-auth-oidc-client": "^11.1.4",
    "com-darryncampbell-cordova-plugin-intent": "^2.0.0",
    "cordova-plugin-appcenter-crashes": "^0.5.1",
    "cordova-plugin-appcenter-shared": "^0.5.1",
    "cordova-plugin-vibration": "^3.1.1",
    "cordova-sqlite-storage": "^5.0.0",
    "ionic-plugin-deeplinks": "^1.0.20",
    "uk.co.workingedge.cordova.plugin.sqliteporter": "^1.1.1"
  },
  "description": "Lite warehouse management system",
  "browser": {
    "crypto": false
  },
  "devDependencies": {}
}

[ntziolis]

@ch4mpy we all have been there :) Will def get back to you on the multi ionic piece. Assuming you haven't yet setup a repo lets get this done first. I have reached out to the nxtend guys to see if we cannot figure out a way to keep all the nx-ionic stuff in once place. Also since they have already solved for react I'm sure there is lots of stuff we can reuse in regards to multi ionic project and general setup. If not I will setup a new repo within the next days

[ntziolis]

Already heard back from the nxtend. They were planning to have a look at ionic support within the next weeks but totally cool with us head starting this. So to hit the ground running we are going to start out with a fork of their repo, here is the link: https://github.com/ntziolis/nxtend

[warrendugan]

I've successfully run multiple ionic w/ capacitor applications in my nx monorepo by globally installing capacitor CLI and following Ionic's multi app instructions carefully. While everything worked well locally I ran into many issues when attempting to use Ionic Appflow.

When it comes time to configure serve commands you'll have to use the run commands plugin inside of angular.json to essentially change directory into the apps/app-name and run the globally installed capacitor commands from that context.

[IngAjVillalon]

Such a piece of excellent news! Could you share a tutorial of your achievement?

[warrendugan]

https://github.com/warrendugan/ionic-capacitor-nx-monorepo I recreated my situation on a public personal project for you to fork. Additionally I tried to document the steps I took to create this in the readme.md. It got a little jumbled somewhere around the middle... as I'm sure you know it takes some trickery to get this to work.

Hope this helps!

[Sina7312]

Hey guys, I'm OK to help as well if you need it. I really would like to see this get somewhere.

[devinshoemaker]

Initial Ionic Angular support has been added with Nxtend. https://nxtend.dev/blog/ionic-angular-1.0.0

[elio-maggini]

Initial Ionic Angular support has been added with Nxtend. https://nxtend.dev/blog/ionic-angular-1.0.0

Can't wait to checkout it out properly. Initial feedback, clicking on the "Getting Starting" link in your blog post resolves to 404 not found.

[devinshoemaker]

Initial Ionic Angular support has been added with Nxtend. https://nxtend.dev/blog/ionic-angular-1.0.0

Can't wait to checkout it out properly. Initial feedback, clicking on the "Getting Starting" link in your blog post resolves to 404 not found.

Oh weird, I'll get that updated. Thanks!

[sc0tt5]

@devinshoemaker here's the getting started page you were referring to: https://nxtend.dev/docs/ionic-angular/getting-started/

[devinshoemaker]

@sc0tt5 are you still seeing the issue? It should be fixed now.

[sc0tt5]

@devinshoemaker, yes. https://nxtend.dev/blog/ionic-angular-1.0.0/ > Getting Started (link at bottom)

Removing "blog" from the link will take you to this page: https://nxtend.dev/docs/ionic-angular/getting-started/

I believe this is the correct page?

[devinshoemaker]

@sc0tt5 this was all working for me locally so I cleared the cache on the server and redeployed. It seems to be working for me now, could you check one more time if you get a chance?

[Sina7312]

@sc0tt5 this was all working for me locally so I cleared the cache on the server and redeployed. It seems to be working for me now, could you check one more time if you get a chance?

I checked it and it's fixed now, thanks very much!

[nhhockeyplayer]

why is capacitor being forced in these schematics (ie xplat) ?

are the schematics keeping capacitor optional? I do have my reasons for keeping that optional.

Any expansion on this would be terrific thanks

seems anything I try includes capacitor and thats a path I want to avoid or better yet is cordova supported by default or is it being forced out? Im all for future if its ripe but the train wrecks are lying underneath ahead... android studio dependencies...etc

[devinshoemaker]

@nhhockeyplayer I can't speak for Xplat, but my Nxtend (https://nxtend.dev) Ionic plugins have a flag to disable Capacitor. I don't support Cordova however, as the project is maintained less and less with PhoneGap being deprecated (https://blog.phonegap.com/update-for-customers-using-phonegap-and-phonegap-build-cc701c77502c). If you're looking for a native solution using Ionic then Capacitor will likely be a better long term bet.

[elio-maggini]

@devinshoemaker I very much respect the effort/work done to bring this functionality to reality.

However, I must respectfully disagree WRT to Cordova VS Capacitor.

Adobe PhoneGap is a product which used Cordova. True that Cordova benefitted. However, Cordova is still being actively developed.

Same for Ionic. They are going toward Capacitor but it is still immature when compared to Cordova. Especially when it comes to command line tooling.

As another die hard Cordova user, any options which did not easily allow for a Cordova configuration would at least be a disincentive if not a non-starter for me.

I see the potential for Capacitor but as someone who has been building an enterprise-level financial application using Ionic for the past year, it does not yet possess the depth and maturity of Cordova.

But again thank you to everyone seeing this to reality. Ionic with Nest/NX is gonna be awesome!

[nhhockeyplayer]

I ditched xplat for following reasons

1. it violated nx monorepo model by introducing an app with its own node_modules and package.json
2. subsequent git push would try to check these in
3. its sympathetic forced support for plain javascripters in the code itself generated
4. it forced use of capacitor
5. poor misleading overwhelming documentation
6. junior developers complaining it was confusing

I would love to see nx generate @nrwl/ionic:application myApp --dry-run

still waiting

the good thing about cordova is it gives a functional path to production regardless of whether we have to do our own plugins and yes I have had it out with the despot committers with cordova refusing to fix things properly or leaving that framework dead with no path forward with bugs I found and had to remedy personally myself

I never had to use phonegap and flat vanilla cordova worked beautifully given a few caveats

[nhhockeyplayer]

Devin nice work Im giving yours a try now

feedback or flames pending

: )

[nhhockeyplayer]

Thank you Devin all appears to be orderly and proactively anticipated pure angular

thanks for all the giving

these milestones are devastating & revolutionizing the industry

• 1st angular (best OOP framework available fork in the road 2014 TYPESCRIPT)
• 2nd ngrx (appropriately enforces developers pure fn's and immutable data flow best redux pattern)
• 3rd nrwl nx (now natural 'nature' modeling can permeate all the build eFrastructure libs modules etc)

like a candy shop thats how awesome this is unfolding

nothing like taking this to the maximum

awesome job by angular ngrx and now nrwl nx...teams totally nailed this down for decades to come

you guys are awesome

[nhhockeyplayer]

Devin,

im trying to get my old project going and itasalmost there with your schewmatic and iionic ios android

somehow the add command andothers never made it into workspace.json in order forme to run each ios or android

can you tell me how this can be updated automated ?

or do I have to and sift thru and edit this forward

i guess theoriginalproject generating a workspace.json was a plain old angular app not ionic from your schematic

does your schematic have a switch for me to operate to upgrade? be bnice if it did for backwards compat

[devinshoemaker]

Devin,

im trying to get my old project going and itasalmost there with your schewmatic and iionic ios android

somehow the add command andothers never made it into workspace.json in order forme to run each ios or android

can you tell me how this can be updated automated ?

or do I have to and sift thru and edit this forward

i guess theoriginalproject generating a workspace.json was a plain old angular app not ionic from your schematic

does your schematic have a switch for me to operate to upgrade? be bnice if it did for backwards compat

Would you mind creating an issue in the Nxtend repo with some reproduction steps?

[nhhockeyplayer]

will do

[elio-maggini]

Following the instructions at the getting started link, I am immediately stuck on

Collection "@nxtend/ionic-angular" cannot be resolved.

STR 1) Create an empty workspace npx create-nx-workspace nx-ionic

2) CD to the work space and attempt to add the plugin nx generate @nxtend/ionic-angular:init

Running Node V14.16.0

[ntziolis]

@elio-maggini

Neither of your commands installs the @nxtend/ionic-angular package. Todo so you need to execute: npm install --save-dev --exact @nxtend/ionic-angular.

After the package is installed you can proceed with: nx generate @nxtend/ionic-angular:init

See the documentation for for more details: https://nxtend.dev/docs/ionic-angular/getting-started/

[elio-maggini]

@ntziolis Yes thanks, the document could benefit from a small tweak. Since initialize plugin is presented as block of four I presume it was an either/or choice. The first two options should be visually separated from the second two :) Also page not found at end of the document. https://nxtend.dev/docs/ionic-angular/getting-started/capacitor

[nhhockeyplayer]

Is there a remove option like nx run mobile-app:cap --cmd="remove" ios

I added a platform without specifying the project and it got dumped into my root folder of nx workspace. I dont know what alterations extra occur under the hood if any... or can I just nuke it?

Thanks

[AhsanAyaz]

Is there a way to run the ionic app on Android/iOS directly using nx commands specifying the project/app and the platform? I can't seem to find it yet.

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[luchillo17]

Is there any resolution to this? Are @nxtend's plugins the best solution? the only core plugin for mobile in Nx seems to be React Native, would be great if the Nrwl team were to make a statement...

[AgentEnder]

There are no current plans to add ionic as a first-party plugin, but there are existing community plugins.

@nstudio/xplat provides support for both Ionic and NativeScript @nxtend also provides Ionic support

More can be found on nx.dev/community.

I'm going to close out this issue since it's not requesting any additional functionality, feel free to open new issues for plugin functionality that is desired and it can be evaluated as-needed.