Complete Guide to Installing Specific Angular Versions with Angular CLI

Introduction

In Angular development, there is often a need to install and use specific versions of the Angular framework. This may be necessary to maintain compatibility with existing projects or to test features of new versions. This article delves into how to achieve this goal through the Angular CLI and npm toolchain.

Core Concept: The Role of package.json

In the Node.js ecosystem, the package.json file is central to project dependency management. It defines all the packages required by the project and their version ranges. For Angular projects, the package.json file contains version information for Angular core packages, Angular CLI tools, and other related dependencies.

By directly modifying the dependency versions in the package.json file, we can precisely control the Angular version used in the project. This method does not rely on the globally installed Angular CLI version but is based on the project's local dependency configuration.

Basic Installation Method

The most straightforward approach is to create a new Angular project and then manually modify the Angular-related dependency versions in the package.json file. Here are the detailed steps:

// First, create a new project
ng new my-project

// Then edit the package.json file
// Modify the Angular package versions in dependencies and devDependencies
{
  "dependencies": {
    "@angular/animations": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/compiler": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/forms": "^12.0.0",
    "@angular/platform-browser": "^12.0.0",
    "@angular/platform-browser-dynamic": "^12.0.0",
    "@angular/router": "^12.0.0"
  },
  "devDependencies": {
    "@angular/cli": "^12.0.0",
    "@angular/compiler-cli": "^12.0.0"
  }
}

After making the modifications, run the npm install command to install the specified version of the dependency packages:

npm install

This method ensures that the project uses a specific version of Angular without being affected by the global Angular CLI version.

Advanced Method Using npx

npx is a powerful tool that allows us to temporarily use specific versions of packages without global installation. For Angular project creation, we can use the following command:

npx @angular/cli@12.0.0 new my-project

This command temporarily downloads and uses the specified version of Angular CLI to create a new project. npx automatically handles package download and execution, and does not leave a permanent installation on the system after completion.

For existing projects, we can also use npx to execute Angular CLI commands with specific versions:

npx ng generate component my-component
npx ng serve

This method is particularly suitable for scenarios where multiple Angular projects with different versions need to be managed on the same machine.

Version Compatibility Considerations

When selecting specific versions, it is important to consider version compatibility between Angular core packages and Angular CLI. Although Angular CLI is primarily used for project initialization and building, there may be compatibility issues between different versions.

The recommended practice is to keep the major version numbers of Angular core packages and Angular CLI consistent. For example, if using Angular 12.x.x, it is best to also use Angular CLI 12.x.x version.

Cache Cleaning and Reinstallation

In some cases, it may be necessary to clean the npm cache to ensure the correct version is installed:

npm cache clean --force
# Or for newer npm versions
npm cache verify

If version conflicts are encountered, the globally installed Angular CLI can be uninstalled:

npm uninstall -g @angular/cli

Then reinstall the specific version or use the npx method.

Best Practices Summary

Based on the above analysis, we summarize the following best practices: For new projects, it is recommended to use the npx method to create projects with specific versions; for existing projects, control versions by modifying the package.json file; avoid frequently changing the global Angular CLI version to reduce environmental conflicts; regularly check and update dependency versions to ensure security and performance.

Conclusion

By properly using package.json dependency management and the npx tool, developers can flexibly control the versions of Angular projects. This method is not only suitable for installing specific versions but also provides an effective solution for multi-version project management. Understanding the working principles and best practices of these tools will help improve development efficiency and project maintenance quality.