Use NVM to handle Angular-Node.js incompatibility (e.g., Uncaught SyntaxError: Unexpected token 'export')
Overview
If you are a fullstack developer, the chances are that you will be creating multiple frontend or Node.js projects along the way. When you are creating new projects using the newest version of the cli (command-line interface) of a particular framework, you might be asked to install the most updated version of Node.js in order to utilize the newest feature. This might involve upgrading your Node.js version, which might not be compatible with other existing projects (e.g., using Angular) you have created before.
A potential solution is to use nvm (Node Version Manager) to install multiple versions of Node.js and use a particular version of the Node.js to install the proper version of the cli (e.g., Angular-CLI) that can be used to manage a particular project.
Here I will use a problem I run into to explain how to solve it.
Problem
There is a compatibility issue between Node.js and angular.js. For instance, I run into an error when I was using an incompatible version of Node.js and Angular-CLI:
Uncaught SyntaxError: Unexpected token 'export'
Here is a StackOverflow post discussing a similar issue, with a table detailing the required version of Node.js for each version of Angular-CLI.
Additionally, several articles have discussed solutions to this problem.
- https://www.tallan.com/blog/2020/07/21/how-to-switch-between-angular-applications-with-conflicting-node-js-requirements-like-a-pro/
- https://levelup.gitconnected.com/how-to-run-multiple-node-and-angular-versions-simultaneously-1f58e6d150de
These articles are really helpful in understanding the issue and the possible solution.
The problem I have is, after I follow these instructions, when I run "ng serve," the wrong version of Angular-CLI is being run. One of the possible causes, I suspect, is that, before using nvm, I have to add the path to Node.js executable to the system's variable (i.e., "Path"). The Angular-CLI I installed with that version of Node.js can be found even if I am running another version of Node.js using nvm.
Here is a list of steps I found useful to solve the problem.
Solution
Step 1: Remove Node.js executable from system's path (environment variable)
If you have manually added Node.js to your system's path and/or installed Angular-CLI using that particular Node.js, you need to first remove the Node.js path from your system's variables.
On windows, you can find it through the following: Edit the system environment variables -> Advanced -> Environment Variables.
Find the variable "Path" and remove Node.js from it.
An example of the value might look like this:
C:\Users\Patrick\.nvm\versions\node\v16.13.2\bin\
Step 2: Install nvm
Follow the instructions here for installing nvm: https://github.com/nvm-sh/nvm
Step 3: Install Angular-CLI using the proper version of Node.js
Find available versions of Node.js installed through nvm:
nvm list
If the desirable Node.js version (the one that is compatible with the desirable Angular-CLI version for a project) is not installed, use the following command to install a particular version of ndoe.js.
nvm install 14.7.0
After installing the desirable Node.js version, use the following command to indicate you would like to execute commands under that particular version.
nvm use 14.7.0
You can then use the following command to install Angular-CLI using that particular Node.js version:
nvm exec npm install -g @angular/cli@12.1.3
Because the "ng" executable will literally be installed under the folder for a particular Node.js version. This step ensures that the Angular-CLI you can later invoke through a particular Node.js version, will be that specific version.
Step 4: Run the project
In your project folder, execute the following commands to use a Node.js version you choose (e.g., 14.7.0) and a compatible Angular-CLI version (i.e., 12.1.3) to run your project.
nvm exec ng serve
Comments