How to Run Different Versions of Angular on Your Windows Machine

As a developer, you might encounter projects requiring different Angular versions, especially if you work on legacy systems or contribute to multiple projects. Managing various Angular versions on the same machine might seem daunting, but with the right tools and approach, it’s completely achievable. This guide walks you through setting up multiple Angular versions on a Windows machine to ensure a smooth development experience.

Why Manage Multiple Angular Versions?

1. Compatibility with Legacy Projects: Older projects often require specific Angular versions due to dependency constraints.
2. Experimentation: Developers might need to test new Angular features while maintaining older versions for production.
3. Collaboration: Working on different team projects often means juggling different tech stacks.

The following step-by-step guide ensures that you can work seamlessly across Angular versions without conflicts.

Step 1: Install NVM for Windows

To manage different Node.js versions (and indirectly Angular CLI versions), install Node Version Manager (NVM) for Windows:

1. Download the NVM installer for Windows from the official repository.
2. Run the installer and follow the on-screen instructions. During installation:
   • Choose a directory for NVM (e.g., C:\nvm).
   • Set the path for global Node.js installations (e.g., C:\Program Files\nodejs).
3. Verify the installation by opening a terminal (e.g., Command Prompt or PowerShell) and running:
4. Here's a complete guide of downloading and installing NVM from FreeCodeCamp

5. nvm --version

Step 2: Set Up Project-Specific Folders

To keep Angular versions isolated:

1. Create a parent directory for your projects, such as C:\AngularProjects.
2. Inside this directory, create subfolders for each Angular version you plan to work with. For example:
   • C:\AngularProjects\Angular9
   • C:\AngularProjects\Angular12
   • C:\AngularProjects\Angular18

This organization ensures that each Angular version has its own workspace.

Step 3: Avoid Installing Angular CLI Globally

Global Angular CLI installations can lead to version conflicts. Instead, install Angular CLI locally within each project folder.

1. Navigate to one of your version-specific folders, e.g., C:\AngularProjects\Angular9.

2. Install the desired Angular CLI version locally:

   npm install @angular/cli@<version>
   

   Replace <version> with the desired Angular CLI version, e.g., @angular/cli@9.

Step 4: Install Compatible Angular Stable Releases

1. Use the official Angular Versions Guide to identify stable releases.
2. Install Angular in each version-specific folder. For example:

   • For Angular 9: Run in C:\AngularProjects\Angular9:

     npx @angular/cli@9 new my-angular9-app
     

   • Repeat this step for other Angular versions, adjusting the version number accordingly.

Step 5: Check Node.js Version Compatibility

Different Angular versions are compatible with specific Node.js versions. Refer to the Angular Documentation to identify the appropriate Node.js version for each Angular version.

Step 6: Install Compatible Node.js Versions with NVM

1. Use NVM to install the required Node.js versions:

   nvm install <version>
   

   Replace <version> with the compatible Node.js version, e.g., nvm install 14.17.0.

2. Verify the installation:

   nvm list
   

Step 7: Switch Node.js Versions for Each Angular Project

To work on a specific Angular version:

1. Navigate to the corresponding project folder, e.g., C:\AngularProjects\Angular9.

2. Switch to the compatible Node.js version:

   nvm use <version>
   

   For example:

   nvm use 14.17.0
   

3. Install Angular CLI (if not already installed) locally:

   npm install @angular/cli@<version>
   

4. Create or maintain your Angular project as needed.

Step 8: Switch Node.js Versions When Switching Projects

Whenever you switch between Angular projects, ensure you switch the Node.js version accordingly:

1. Open the terminal.
2. Run the nvm use <version> command for the project you want to work on.

Step 9: Test Your Setup

Test your environment by:

1. Running the Angular development server in a specific project folder:

   ng serve
   

2. Verifying that the correct Angular CLI and Node.js versions are in use:

   ng version
   node -v
   

Final Tips

• Backup Your Setup: Keep a record of your folder structure, Angular versions, and Node.js versions for future reference.
• Use a Version Manager for Angular CLI: Consider using tools like npx to run Angular CLI commands without installing them permanently.

By following these steps, you'll be able to manage multiple Angular versions effectively, making your development workflow more flexible and efficient.