Angular: Create a project with any Angular version you like
240113
Intro
The Angular ecosystem provides all the necessary tools for creating a new Angular project, with any version we like. So, take the following guidelines and create a new Angular project with the version of your choice. Bash script included!
Prerequisite
It is supposed that the nvm script-based tool is installed in your system and you have some familiarity with it. You can get some grasp of nvm by taking a look at my post, below:
Preparation and selections
Check the Angular CLI available versions
You can check Angular versions and target the version of your choice at the official page:
(Also at: https://angular.dev/reference/versions)
In the list you check version compatibility and/or minimum requirements with Node.js and Typescript versions.
Select your preferred Angular version
e.g. 16.2.12
Ensure about the exact Angular CLI version
Note that not always an Angular CLI version matches the Angular core package So, if you select an Angular (angular-core) version, then you have to see if this version matches an angular-cli version, and if not, then try to locate the closer version. E.g.: If you wish to use Angular (i.e. angular-core) version 16.2.12, because it seems to be the last 16.x.x version, then you can select the angular-cli 16.2.11 version, since angular-cli 16.2.12 version does not exist (at least, as per Jan 13, 2024). You can find here the version history for angular-core, and here for angular-cli.
Select a compatible node version
Specify the Node.js version that you will use e.g.: 18.10.0. You can take a look at the Node.js versions by running the ‘nvm ls-remote’ command:
Identify a compatible Typescript version
Specify the Typescript version you will use e.g.: 5.1.6
Installation
Create a new folder for your project and jump in it.
➜ mydemos mkdir angular2 ➜ mydemos cd angular2 ➜ angular2
Create a new .nvmrc file in that folder with the selected Node.jes version
➜ angular2 echo "18.10.0" > .nvmrc ➜ angular2 cat .nvmrc 18.10.0 ➜ angular2 nvm use Found '/Users/DEV/PROJ/AngularProjects2/mydemos/angular2/.nvmrc' with version <18.10.0> Now using node v18.10.0 (npm v8.19.2) ➜ angular2
Typescript
Typescript is automatically installed when you create a new Angular project, as a dependency, however, one can also install a specific version.
npm i -D typescript@5.1.6
or
npm install typescript@5.1.6 –save-dev
➜ angular2 npm i -D typescript@5.1.6
added 1 package, and audited 2 packages in 582ms
found 0 vulnerabilities
➜ angular2 ls -al
total 24
drwxr-xr-x 6 zaf admin 192 Jan 12 11:29 .
drwxr-xr-x 11 zaf admin 352 Jan 12 10:52 ..
-rw-r--r-- 1 zaf admin 8 Jan 12 10:53 .nvmrc
drwxr-xr-x 5 zaf admin 160 Jan 12 11:29 node_modules
-rw-r--r-- 1 zaf admin 890 Jan 12 11:29 package-lock.json
-rw-r--r-- 1 zaf admin 58 Jan 12 11:29 package.json
➜ angular2
➜ angular2 node_modules/.bin/tsc -v
Version 5.1.6
Version 5.1.6
➜ angular2
➜ angular2 cat package.json
{
"devDependencies": {
"typescript": "^5.1.6"
}
}
➜ angular2
Angular using npm
Install the selected version of Angular CLI
Use npm to install Angular CLI, e.g.: npm i @angular/cli@16.2.11
➜ angular2 npm i @angular/cli@16.2.11
npm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fs
added 269 packages, and audited 271 packages in 6s
39 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
➜ angular2 cat package.json
{
"devDependencies": {
"typescript": "^5.1.6"
},
"dependencies": {
"@angular/cli": "^16.2.11"
}
}
➜ angular2
➜ angular2 node_modules/.bin/ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.2.11
Node: 18.10.0
Package Manager: npm 8.19.2
OS: darwin arm64
Angular: undefined
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1602.11
@angular-devkit/core 16.2.11
@angular-devkit/schematics 16.2.11
@angular/cli 16.2.11
@schematics/angular 16.2.11
typescript 5.1.6
➜ angular2
Note: If you have installed Typescript before Angular, you should remove the package files to avoid errors like “A merge conflicted on path “/package.json”.”:
➜ angular2 rm pack* ➜ angular2 ls -al pack* zsh: no matches found: pack* ➜ angular2
Create your project by using the local Angular CLI just installed
Use the project-locally-installed ng (Angular CLI) instead of the globally installed one.
- The global one: /usr/local/bin/ng
- The local one: node_modules/.bin/ng
➜ angular2 node_modules/.bin/ng new angular2 --directory=./
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE README.md (1062 bytes)
CREATE .editorconfig (274 bytes)
CREATE .gitignore (548 bytes)
CREATE angular.json (2884 bytes)
CREATE package.json (1039 bytes)
CREATE tsconfig.json (901 bytes)
CREATE .vscode/extensions.json (130 bytes)
CREATE .vscode/launch.json (470 bytes)
CREATE .vscode/tasks.json (938 bytes)
CREATE src/app/app-routing.module.ts (245 bytes)
CREATE src/app/app.module.ts (393 bytes)
CREATE src/app/app.component.scss (0 bytes)
CREATE src/app/app.component.html (23115 bytes)
CREATE src/app/app.component.spec.ts (997 bytes)
CREATE src/app/app.component.ts (213 bytes)
CREATE src/main.ts (214 bytes)
CREATE tsconfig.app.json (263 bytes)
CREATE tsconfig.spec.json (273 bytes)
CREATE src/favicon.ico (948 bytes)
CREATE src/index.html (294 bytes)
CREATE src/styles.scss (80 bytes)
CREATE src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
Successfully initialized git.
➜ angular2 git:(main)
Angular using npx
Alternatively, you can combine the steps of Angular CLI installation and the new project creation in just 1 step, using the npx.
The npx is a Node.js package runner, that is pre-bundled with npm (since npm version 5.2.0). Using the npx we leave intact the globally installed packages.
The npx “Executes either from a local node_modules/.bin, or from a central cache, installing any packages needed for to run.” For instance, you can run the npx -v to check its version, which is the same as you run the ‘nvm current’ command:
➜ angular2 git:(main) npx -v 8.19.2 ➜ angular2 git:(main) nvm current v18.10.0 ➜ angular2 git:(main)
So, use the following command (from within the current project folder): npx @angular/cli@16.2.11 new angular2 –directory=./
➜ angular2 npx @angular/cli@16.2.11 new angular2 --directory=./ --commit=false
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE README.md (1063 bytes)
CREATE .editorconfig (274 bytes)
CREATE .gitignore (548 bytes)
CREATE angular.json (2884 bytes)
CREATE package.json (1041 bytes)
CREATE tsconfig.json (901 bytes)
CREATE .vscode/extensions.json (130 bytes)
CREATE .vscode/launch.json (470 bytes)
CREATE .vscode/tasks.json (938 bytes)
CREATE src/app/app-routing.module.ts (245 bytes)
CREATE src/app/app.module.ts (393 bytes)
CREATE src/app/app.component.scss (0 bytes)
CREATE src/app/app.component.html (22709 bytes)
CREATE src/app/app.component.spec.ts (997 bytes)
CREATE src/app/app.component.ts (213 bytes)
CREATE src/main.ts (214 bytes)
CREATE tsconfig.app.json (263 bytes)
CREATE tsconfig.spec.json (273 bytes)
CREATE src/favicon.ico (948 bytes)
CREATE src/index.html (294 bytes)
CREATE src/styles.scss (80 bytes)
CREATE src/assets/.gitkeep (0 bytes)
✔ Packages installed successfully.
Successfully initialized git.
➜ angular2 git:(main) ✗
➜ angular2 git:(main) ✗ code .
➜ angular2 git:(main) ✗ node_modules/.bin/tsc -v
Version 5.1.6
➜ angular2 git:(main) ✗
Check the installation
Check the project folders
➜ angular2 git:(main) tree -L 1 . |-- README.md |-- angular.json |-- node_modules |-- package-lock.json |-- package.json |-- src |-- tsconfig.app.json |-- tsconfig.json `-- tsconfig.spec.json 3 directories, 7 files ➜ angular2 git:(main)
Check the package.json
➜ angular2 git:(main) ✗ cat package.json
{
"name": "angular2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.0",
"@angular/common": "^16.2.0",
"@angular/compiler": "^16.2.0",
"@angular/core": "^16.2.0",
"@angular/forms": "^16.2.0",
"@angular/platform-browser": "^16.2.0",
"@angular/platform-browser-dynamic": "^16.2.0",
"@angular/router": "^16.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.13.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^16.2.11",
"@angular/cli": "^16.2.11",
"@angular/compiler-cli": "^16.2.0",
"@types/jasmine": "~4.3.0",
"jasmine-core": "~4.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.1.3"
}
}
Note that Angular is possible to set a slightly different version of a package than the one installed.
~version “Approximately equivalent to version”, will update you to all future patch versions, without incrementing the minor version. ~1.2.3 will use releases from 1.2.3 to <1.3.0.
^version “Compatible with version”, will update you to all future minor/patch versions, without incrementing the major version. ^1.2.3 will use releases from 1.2.3 to <2.0.0.
Run the app
Running the project locally installed ng instead of the globally installed one
node_modules/.bin/
node_modules/.bin/ng serve –host 0.0.0.0 –port 4203
➜ angular2 git:(main) ✗ node_modules/.bin/ng serve --host 0.0.0.0 --port 4203
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.35 MB |
polyfills.js | polyfills | 333.17 kB |
styles.css, styles.js | styles | 230.91 kB |
main.js | main | 48.32 kB |
runtime.js | runtime | 6.51 kB |
| Initial Total | 2.95 MB
Build at: 2024-01-12T16:49:48.618Z - Hash: 28312f4a6607abca - Time: 1504ms
** Angular Live Development Server is listening on 0.0.0.0:4203, open your browser on http://localhost:4203/ **
✔ Compiled successfully.
Build at: 2024-01-12T11:04:23.359Z - Hash: 22b179bf9a123262 - Time: 3814ms
** Angular Live Development Server is listening on 0.0.0.0:4203, open your browser on http://localhost:4203/ **
✔ Compiled successfully.
^C
➜ angular2 git:(main)
Note that Angular CLI automatically adds ng entries in the scripts section of our project’s package.json:
. . .
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
. . .
This allows us to run the “local” ng by just using the npm run command, instead of the full local path of node_modules binaries (node_modules/.bin), e.g.: npm run ng serve –host:0.0.0.0 –port:4203
Note that you can also use the npx with ng to run the ‘locally’ installed ng. E.g.:
npx ng v
npx ng serve –host 0.0.0.0 –port 4203
Take-offs
You need to have 2 numbers: The Angular CL version and a matching Node.js version.
- Decide/select what is the appropriate Angular version (angular-core) for your project. You can see the official compatibility list here and/or here. In the list, you can also locate the matching/compatible Node.js version.
- Ensure the matching Angular CLI version and select it. You can find here the version history for angular-core, and here for angular-cli.
- Next create you project folder. In it, create a .nvmrc file with the matching/compatible Node.js version. After that use the ‘nvm use’ to switch to this Node.js version.
- Finally, create your new Angular project within the project folder by using the npx runner with the Angular CLI you selected, and passing it to your current folder to the –directory parameter, and/or any other appropriate parameter.
- The appropriate Typescript version will be installed as a dependency package, as well as all other necessary dependencies.
- Keep using npx for running ng commands, or prefix ng with local path: node_modules/.bin/ (or use npm run …)
Update Bonus!
You can use the following bash script to automate the whole process described above:
So, that’s it for now! I hope you enjoyed it!
Thanks for reading and stay tuned!
About Post Author