This post shows students and new users steps to install and use Angular CLI on Ubuntu Linux.
If you don’t already know about Angular CLI, it’s a command-line interface tool that you use to initialize, develop and maintain Angular applications easily on compatible systems.
Installing Angular CLI is also easy and straightforward. Major versions of Angular CLI follow supported major versions. However, minor versions can be scheduled and released separately.
A single workspace configuration file, angular.json, is created at the top level of the workspace. This is where you can set per-project defaults for CLI command options, and specify configurations to use when the CLI builds a project for different targets.
Below is how to install and use Angular CLI on Ubuntu Linux.
How to install and use Angular CLI on Ubuntu Linux
As mentioned above, Angular CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain Angular applications.
Here’s how to install it on Ubuntu Linux.
First, open Ubuntu command line console and run the commands below to install NVM.
curl | bash
Next, run the commands to activate the NVM environment within your profile.
source ~/.bashrc
Once the environment is activated, run the commands below to install Node.js.
As of this writing, Angular v14 is the latest LTS version and supports Node.js 14 and 16 LTS versions.
For this post, we’re going to be installing Node.js version 16 LTS. Run the commands below to do so.
nvm install v16
After installing, you can check the version of Node.js and NPM using the commands below:
node -v npm -v
Once Node.js and NPM are installed, run the commands below to install the latest Angular CLI.
npm install @angular/cli --location=global
If you wish to install individual versions, simply specify the version with the commands.
npm install -g @angular/cli@10 npm install -g @angular/cli@11 npm install -g @angular/cli@12
Check the link below to view Angular CLI versions:
Check Angular version by running the commands below.
ng version
That should display an output similar to the lines below:
To create, build, and serve a new, basic Angular project on a development server, go to the parent directory of your new workspace use the following commands:
ng new my-first-project cd my-first-project ng serve
Replace my-first-project with the name of the project folder you wish to use.
After a successful build, you should see similar lines as below:
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? CSS CREATE my-first-project/README.md (1068 bytes) CREATE my-first-project/.editorconfig (274 bytes) CREATE my-first-project/.gitignore (548 bytes) CREATE my-first-project/angular.json (2972 bytes) CREATE my-first-project/package.json (1047 bytes) CREATE my-first-project/tsconfig.json (863 bytes) CREATE my-first-project/.browserslistrc (600 bytes) CREATE my-first-project/karma.conf.js (1433 bytes) CREATE my-first-project/tsconfig.app.json (287 bytes) CREATE my-first-project/tsconfig.spec.json (333 bytes) CREATE my-first-project/.vscode/extensions.json (130 bytes) CREATE my-first-project/.vscode/launch.json (474 bytes) CREATE my-first-project/.vscode/tasks.json (938 bytes) CREATE my-first-project/src/favicon.ico (948 bytes) CREATE my-first-project/src/index.html (300 bytes) CREATE my-first-project/src/main.ts (372 bytes) CREATE my-first-project/src/polyfills.ts (2338 bytes) CREATE my-first-project/src/styles.css (80 bytes) CREATE my-first-project/src/test.ts (749 bytes) CREATE my-first-project/src/assets/.gitkeep (0 bytes) CREATE my-first-project/src/environments/environment.prod.ts (51 bytes) CREATE my-first-project/src/environments/environment.ts (658 bytes) CREATE my-first-project/src/app/app-routing.module.ts (245 bytes) CREATE my-first-project/src/app/app.module.ts (393 bytes) CREATE my-first-project/src/app/app.component.css (0 bytes) CREATE my-first-project/src/app/app.component.html (23364 bytes) CREATE my-first-project/src/app/app.component.spec.ts (1103 bytes) CREATE my-first-project/src/app/app.component.ts (220 bytes) ✔ Packages installed successfully. /bin/sh: 1: git: not found
In your browser, open to see the new application run.
When you use the ng serve command to build an application and serve it locally, the server automatically rebuilds the application and reloads the page when you change any of the source files.
That should do it!
Conclusion:
This post showed you how to install and use Angular CLI on Ubuntu Linux. If you find any error above or have something to share, please use the comment form below.
