Tallan Blog

Tallan’s Experts Share Their Knowledge on Technology, Trends and Solutions to Business Challenges

How to Switch Between Angular Applications with Conflicting Node.js Requirements Like a Pro

The Problem 

As web developers, it is not uncommon for us to switch back and forth across different code bases throughout our day. If you are working with applications whose front-end development processes depend on different versions of Node.js, your workflow can quickly grind to a halt. Let’s imagine you’re working on two Angular applications. Application 1 is production code that uses Angular 6 and has a custom build process that strictly depends on version 8.9 of Node.js. Application 2 is a greenfield project and uses Angular 9 which will work with the latest version of Node.js 

In normal circumstances we could install the latest version of Node.js and that would be enough to allow us to develop against both applications. However, because of Application 1’s strict dependency on Node versions we have a troublesome situation. Are we really going to need to uninstall and reinstall different versions of Node.js every time we switch between environments? Are we going to have to do the same thing for the Angular-CLI? How much time are we going to lose? I found myself in this situation recently and was frustrated with the time lost within the first day. Luckily after a quick search I found a tool that is both maintained and highly regarded by the front-end development community. 

Introducing NVM 

 NVM (not to be confused with NPM) stands for Node Version Manager and was created to elegantly handle this exact situation. With this command line tool installed you can switch between the versions of Node.js being used on your computer with a single command. The original NVM utility was built specifically for Unix and MacOS. The steps to install the utility are available on GitHub hereConversely, if you develop in a Windows environment (like me) then you’ll want to install NVM-Windows. The steps to install this version of the utility are available on GitHub here. Since this is the version I usedI’ve provided some high-level notes on the installation process below. 

Installing NVM-Windows 

1. Uninstall the existing version of Node.js from your machine 

2. Go to https://github.com/coreybutler/nvm-windows/releases/ find the latest release and download the nvm-setup.zip 

 

Picture1

 

 

 

 

 

 

 

 

 

 

 

3. Open the zip file and run nvm-setup.exe. Follow through and complete the installation wizard.

Picture2

4. Once completed, open your command line and type nvm -v. If everything worked as expected you should be able to retrieve your current version of the utility.

Picture4

If you run into any issues with installation you can always refer back to the original GitHub documentation or look specifically at common issues.

Switching Between Node Versions

Now that NVM is installed, we need to pull down the various versions of node required for our daily workflow. If you open your command line and enter nvm list it will show all versions of node that are installed, while highlighting the version that is currently in use. Doing this now will indicate that you have nothing installed.

Now that NVM is installed, we need to pull down the various versions of node required for our daily workflow. If you open your command line and enter nvm list it will show all versions of node that are installed, while highlighting the version that is currently in use. Doing this now will indicate that you have nothing installed.

Picture5

Let’s review our requirements again:

  • Application 1 specifically needs Node.js 8.9
  • Application 2 at minimum must use Node.js 12.0 due to the Angular CLI
    • The latest version of Node.js will therefore work

Let’s satisfy Application 1 first. In your command prompt enter nvm install 8.9. If successful, your command prompt will appear identical to the one below.

Picture6

Now let’s satisfy Application 2’s requirement. Just like the last instance you could determine a specific version to install, in our case it would have to be 12.0. But what if you simply need the latest version of Node.js and don’t know the specific version off hand? In your command prompt try nvm install latest. If successful you’ll see that this command installs the latest version available.

picture7

To view all the version of Node.js that are installed on your machine, you can again enter the command nvm list. Upon doing so you should now see the following:

Picture8

It’s important to note that right now, none of these versions are currently in use. If you type the command node -v, instead of getting the current version of node you’ll receive an error.

Picture9

You need to inform NVM which installed version of node to use. Let’s say we want to work on Application 1. To use Node.js 8.9, enter the command nvm use 8.9. If you now enter node -v you’ll see that it returns the expected version. If you enter nvm list you’ll now see that the current version in use is highlighted.

Picture10

You can now close the command prompt and start development in Application 1. If you need to switch to Application 2, open the command prompt and simply enter nvm use 14.5.0. You can then close the command prompt (if you wish) and begin development. It’s that simple.

What about the Angular-CLI?

As you know, a different version of the Angular-CLI exists for all versions of Angular. Each version has a dependency on some minimum version of Node.js to run. Within the context of the scenario described here you could not run version 9 of the Angular-CLI with version 8.9 of Node.js—it requires a minimum of version 12.0 of Node.js. If you have installed a version of the Angular-CLI globally on your machine you may be concerned that you’re still stuck having to install/uninstall it every time your switch applications. Luckily, this is not the case because you can always rely on each application’s local Angular-CLI to be the correct one corresponding to your version of Angular.

Remember, you may have globally installed a version of the Angular-CLI on your machine, but each Angular application references a dependency on its own version via the package.json file. I recreated what the package.json file would look like for Application 1 and Application 2 down below. I’m using the famous “Tour of Heroes” codebase for Angular 6 and 9 to represent each application respectively.

Picture11

When you perform an npm install you wind up pulling down these individual versions of the Angular-CLI into your node_modules folder. When you execute an ng command to invoke the Angular-CLI you’re running your global instance. If your global version is higher than the one required, you will get a warning, however, the utility is smart enough to run the local version without you noticing. To run the local Angular-CLI explicitly, we utilize both the npm and the package.json file.

Picture12

Note that in my package.json file I have a custom npm script I can run called “ng” which will try to run the ng command. Seems round about, right? The trick here is that when the ng command is invoked via npm it will look in the “node_modules” folder for such a command and find your local Angular-CLI instead of your global one.

So, in short, if you prefix your normal ng commands with npm run you will be running against the local Angular-CLI. You can try this out in your own application. Open your command line in the directory containing your application’s package.json folder and execute npm run ng serve. You can also experiment by running ng -v then npm run ng -v which will run the version of your global and local Angular-CLIs.

Final Thoughts

My current workflow is very similar to the situation described in this post. I’ve found that I don’t even have a global version of the Angular-CLI installed since I’m usually pulling down existing projects. I would, however, need a global version if I wanted to run ng new to create the boilerplate for a new application.

picture13

Given my current set up, I now run npm run ng <some command> out of habit so that I’m always invoking the right version of the Angular-CLI. This makes it so that the only thing I really ever have to worry about when jumping between applications is managing what version of Node.js I’m on. I’m thankful that the NVM tool exists and I’m especially thankful someone took the time to port it over to Windows. Any tool that streamlines my workflow so I’m spending more time coding and less time configuring is a win in my book.

Share this post:

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

\\\