Professional Toolbox

Install Angular Command Line Interface (CLI)

Overview

Angular CLI is a tool that helps you build and manage web applications easily. By installing it globally on your computer with `npm install -g @angular/cli`, you can quickly set up new projects and add features anywhere on your computer. The Angular CLI makes the development process faster and more consistent. For example, when starting a new Angular project, there are many files and configurations needed. Angular CLI automatically creates all these files and sets up everything correctly for you. Additionally, it helps you add new features to your project with simple commands. For example, if you want to add a new page or component to your application, you just type a command, and Angular CLI does the rest in setting up the page or component.

When you install the Angular CLI, you get a suite of tools designed to simplify various tasks involved in developing Angular applications:

Project Setup and Management	Angular CLI provides commands like `ng new` to create new projects and `ng serve` to start a local development server with live reloading. These tools simplify starting and running Angular projects.
Component and Module Generation	With commands such as `ng generate component` and `ng generate module`, Angular CLI can automatically create new components and modules, complete with the necessary files and configuration, helping developers quickly build out their applications.
Service and Directive Generation	Angular CLI includes `ng generate service` and `ng generate directive` commands to create services for shared functionality and custom directives for adding behaviors to elements, streamlining the process of enhancing application capabilities.
Building and Testing	Commands like `ng build` compile the application into deployable files, while `ng test` and `ng e2e` run unit and end-to-end tests to ensure code quality and functionality.
Updating and Linting	The CLI provides `ng update` to keep dependencies up to date and `ng lint` to analyze code for errors and enforce standards, helping maintain the project’s integrity and compatibility.
Configuration and Deployment	Commands such as `ng config` manage project settings and `ng deploy` facilitate deployment to hosting services, simplifying the management and deployment of Angular applications.
Running Commands with Schematics	Schematics are customizable templates that extend Angular CLI commands, allowing developers to create or modify commands to fit specific needs, making the CLI adaptable to various workflows.

Windows Install

This section assumes you have git bash installed as well as Node.js and npm installed. Commands ran are assumed to be input and ran inside git bash.

1. Installation Steps


# RUN THE FOLLOWING IN A GIT BASH TERMINAL
# ENSURE ANTI-VIRUS IS DISABLED DURING INSTALL
# installs Angular CLI via NPM
$ npm install -g @angular/cli

added 223 packages in 7s
npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g npm@10.8.1
npm notice

2. Test Angular CLI is installed

To test whether Angular CLI was correctly installed we will test this by going straight into creating an Angular project.


# ENSURE NODE LOCATION IS LISTED IN WINDOWS ENV PATH
# IF NOT, ADD IT WITH THE FOLLOWING COMMAND
$ ng new first-angular-app
CREATE first-angular-app/angular.json (2730 bytes)
CREATE first-angular-app/package.json (1086 bytes)
CREATE first-angular-app/README.md (1103 bytes)
CREATE first-angular-app/tsconfig.json (1054 bytes)
CREATE first-angular-app/.editorconfig (290 bytes)
CREATE first-angular-app/.gitignore (629 bytes)
CREATE first-angular-app/tsconfig.app.json (439 bytes)
CREATE first-angular-app/tsconfig.spec.json (449 bytes)
CREATE first-angular-app/.vscode/extensions.json (134 bytes)
CREATE first-angular-app/.vscode/launch.json (490 bytes)
CREATE first-angular-app/.vscode/tasks.json (980 bytes)
CREATE first-angular-app/src/main.ts (256 bytes)
CREATE first-angular-app/src/index.html (314 bytes)
CREATE first-angular-app/src/styles.css (81 bytes)
CREATE first-angular-app/src/app/app.component.html (20239 bytes)
CREATE first-angular-app/src/app/app.component.spec.ts (978 bytes)
CREATE first-angular-app/src/app/app.component.ts (326 bytes)
CREATE first-angular-app/src/app/app.component.css (0 bytes)
CREATE first-angular-app/src/app/app.config.ts (318 bytes)
CREATE first-angular-app/src/app/app.routes.ts (80 bytes)
CREATE first-angular-app/public/favicon.ico (15086 bytes)
- Installing packages (npm)...
√ Packages installed successfully.

# THIS TEST SHOWS ANGULAR CLI CREATED THE PROJECT:
$ ls -ltr --time-style=long-iso -n first-angular-app
total 662
-rw-r--r-- 1 197609 197121   2730 2024-06-17 14:45 angular.json
-rw-r--r-- 1 197609 197121   1086 2024-06-17 14:45 package.json
-rw-r--r-- 1 197609 197121   1103 2024-06-17 14:45 README.md
-rw-r--r-- 1 197609 197121   1054 2024-06-17 14:45 tsconfig.json
-rw-r--r-- 1 197609 197121    449 2024-06-17 14:45 tsconfig.spec.json
-rw-r--r-- 1 197609 197121    439 2024-06-17 14:45 tsconfig.app.json
drwxr-xr-x 1 197609 197121      0 2024-06-17 14:45 src/
drwxr-xr-x 1 197609 197121      0 2024-06-17 14:45 public/
drwxr-xr-x 1 197609 197121      0 2024-06-17 14:47 node_modules/
-rw-r--r-- 1 197609 197121 491684 2024-06-17 14:47 package-lock.json

3. Media

Install Angular CLI on macOS

1. Install Steps

This section covers how to install Node.js and npm on a macOS system. Node.js can be installed via a package manager or directly from the Node.js website.

2. Installation Steps


public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, Java!");
        int a = 10;
        int b = 20;
        int sum = a + b;
        System.out.println("Sum of " + a + " and " + b + " is: " + sum);
    }
}

3. Media

Diego De La Puente

Angular Command Line Interface (CLI) Installation Guide

Install Angular Command Line Interface (CLI)

Overview

Windows Install

1. Installation Steps

2. Test Angular CLI is installed

3. Media

Install Angular CLI on macOS

1. Install Steps

2. Installation Steps

3. Media