How to run Ionic 3 and Ionic 4 environments on same machine without conflicts on macOS

Background:

I have several production apps in Ionic 3 that I don’t want to screw up. I previously tried to install Ionic 4, but that screwed up my machine environment so badly that I had to revert with TimeMachine.

  • I tried a separate user account on macOS, but since installs are global, that didn’t isolate anything. Although that’d be my preference if it’s possible?

  • So…Is there a trusted way to run both Ionic versions on one machine without compromising the build processes?

I.e.

  • NodeJS - I use the downloadable .app package installer usually,
  • Cordova,
  • Ionic 3/4
  • Any dependency I’ve forgotten.

Thanks.

“Ionic” isn’t a monolithic thing in this case, which confuses the situation. The CLI is (supposed to be) backwards-compatible, meaning modern versions of it should be able to build both v3 and v4 apps (where “v3” and “v4” here mean the version of the framework, which is local to each app and controlled by package.json). So the answer to your question should be “you shouldn’t care”.

However, if you still do care, and even if you don’t, I highly recommend nvm for managing node and npm, and a side effect of using it will be that you can easily install multiple node versions with correspondingly isolated versions of everything node-related that you ordinarily consider “global”. Don’t use “the downloadable .app package installer” and never run anything node-related as root or under sudo, and you will never again have to worry about “that screwed up my machine environment so badly that I had to revert with TimeMachine”.

Ok that makes sense. Apologies for the extra questions, but this setup is not my forté, so a few pointers would really help:

  1. What you’re saying is that Node installation was probably the culprit before?

  2. So if I use nvm instead of the package installer, I shouldn’t have that issue again, including cordova versions?

  3. At the moment, node and cordova are installed globally, so I assume I need to uninstall them and install them directly into their respective projects as a local dependency?

  4. Would you be able to suggest a set of sequential steps I can run then in my command line that will appropriately set up the environment so I can build the existing apps and start a new v4 project too?

Thanks for your time.

More or less, although I would phrase it this way: whenever you run anything as root, you’re completely at the mercy of whoever wrote it as far as what gets modified where on the system. This is why I rail so persistedly about people recommending sudo, and it sounds like you literally did have to pretty much reinstall your OS.

Again more or less yes, but to elaborate: if you do run into issues once nvm is in charge, it’s a one-liner to switch node environments, or get a completely clean one with:

$ nvm uninstall --lts
$ nvm install --lts
$ npm i -g ionic @angular/cli whatever-other-global-npm-things-you-use

In a catastrophic scenario, everything nvm uses sits in the .nvm folder of your home directory, which can be manually removed. And since it’s in home directories, your strategy of using different OS users will become feasible (although I doubt you’ll need to resort to it).

It would be cleanest to uninstall the package-manager stuff, in case you have priority problems with PATH, but I think nvm is engineered to deal with this situation and should properly get its stuff ahead of package-manager-installed node. But no, you don’t have to install node locally in each project. Cordova is a bit like Ionic in the sense that it has a “global” CLI and local bits. The locally-needed bits are probably already in your various projects, and the global bits will become managed by nvm like Ionic’s CLI will.

After following the steps in here to get nvm itself running,

$ nvm install --lts
$ which node

…check that it’s something under your home directory, not /usr or /usr/local or /brew/whatever (it’s been a long time since I’ve done anything with Node on MacOS without the nvm safety blanket)

$ npm i -g ionic cordova @angular/cli
$ which ionic

…should also be somewhere underneath your home directory.

$ ionic -v

…should be 5.4.something as I write this.

1 Like

Thanks for this, I’m up and running - I’ll try getting some builds done and may come back to you if I need some further pointers, but this is great.

Really appreciate the time you took to write that.

D

Hi again,

So I’m all completed on my new project and wanted to check in with you regarding how nvm is supposed to function from here on.

So say I now want to switch over to developing on an older project needing its own version of node and cordova installed, how would I switch my environment, without destroying the newer setup?

Things I’ve been doing:

  • Installing npm modules normally, e.g. npm install - g...,
  • No sudo ever.

Thanks again for your help, really appreciate it.

D

See the bit about .nvmrc here.

1 Like

For anyone else here:

  1. I added a file at the root of the project .nvmrc
  2. put 8.16.2 in that file
  3. ran npm use
  4. ran commands as usual e.g.
ionic serve -l
ionic cordova build android --prod --release

All works fine now. Worth nothing that when that NodeJs release reaches end of life, it will have to be changed I guess.