How to generate Angular application in a specific version using ng new command

January 31, 2021 No comments Angular CLI Version npx

1. Introduction

In this article, we are going to present a way to create a new Angular application in the specific version using the ng new command. Sometimes when we have installed the latest version of @angular/cli globally there is a need to build other applications in an older version of Angular.

2. Uninstall/Install @angular/cli

The simplest way to 'switch' to a different version of Angular is to uninstall the current @angular/cli and install the version in which we want to create an application.

Let's say we have @angular/cli in the latest version and we want to downgrade it to version 8.

First, we need to uninstall the latest version, then simply install the version we are interested in:

npm uninstall -g @angular/cli
npm install -g @angular/cli@8.3.25

After it is installed, we can run:

ng new angular8

This will create an Angular 8 project with the correct dependencies.

3. Using npx for executing npm package binaries

The other method to create Angular application in a specific version is to use npx command that executes npm package binaries.

First, we need to install npx, and let's do it globally:

npm install -g npx

Then we just need to execute npx command with the -p parameter where we put a specific @angular/cli version. The last element of this statement is a command that creates an application on a specific @angular/cli version ng new [name of the project].

#Angular 2:the last RC version before switching to angular 4 as far as I can tell — based on this and the next version now depends on angular
npx -p @angular/cli@1.0.0-rc.2 ng new angular2app

#Angular 4: the last CLI version before angular 5
npx -p @angular/cli@1.4.10 ng new angular4app

#Angular 5: the last CLI version before 6
npx -p @angular/cli@1.7.4 ng new angular5app

#Angular 6: the last CLI version before 7
npx -p @angular/cli@6.2.9 ng new angular6app 

# Angular 7: the last CLI version before 8
npx -p @angular/cli@7.3.10 ng new angular8app 

#Angular 8: the last CLI version before 9
npx -p @angular/cli@8.3.29 ng new angular8app 

#Angular 9: not last CLI version 9 
npx -p @angular/cli@9.1.13 ng new Angular9App

#Angular 11: last CLI version 11
npx -p @angular/cli@11.1.2 ng new Angular11App

For example, when we want to create an Angular application in version 8 we just need to run the following command:

npx -p @angular/cli@8.3.29 ng new angular8app

The generated package.json file has the following content:

{
  "name": "angular8app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.25",
    "@angular/cli": "~8.3.25",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@types/node": "~8.9.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

As you can see all application dependencies are in version 8:

4. Conclusion

Probably every web developer faced this problem once in their career: "How to use ng new app and have an Angular 5 app? Or Angular 4?. In this article, we presented two ways to generate Angular applications in a particular version. We prefer using the npx command because it is simple.

{{ message }}

{{ 'Comments are closed.' | trans }}