Installation & Angular CLI

Angular is developed using the Angular CLI (Command Line Interface) — an official tool that handles project creation, development server, building, testing, and code generation. The CLI is the cornerstone of Angular development and you will use it every day.

This page walks you through installing Node.js, installing the Angular CLI, and creating your first Angular project.

Prerequisites

Node.js (LTS version recommended) — Angular requires Node 18.13+ for Angular 17+
npm (comes with Node.js) or yarn
A code editor — VS Code is strongly recommended (best Angular tooling)
A terminal (macOS Terminal, Windows PowerShell/WSL, or Linux shell)

Note

Check the Angular Compatibility Guide at angular.dev for the exact Node.js version required for your Angular version. Angular 17 requires Node 18.13 or 20+.

Step 1 — Install Node.js

Download Node.js from nodejs.org and install the LTS (Long Term Support) version.

Verify the installation:

Bash

node --version    # should output v18.x.x or v20.x.x
npm --version     # should output 9.x.x or 10.x.x

v20.11.0
10.2.4

Tip

Use nvm (Node Version Manager) to manage multiple Node versions on macOS/Linux, or nvm-windows on Windows. This makes switching between projects with different Node requirements easy.

Step 2 — Install Angular CLI

Install the Angular CLI globally using npm:

Bash

npm install -g @angular/cli

Verify the CLI installation:

Bash

ng version

     _                      _                 ____ _     ___
    /   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___  | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|      ____|_____|___|
                |___/

Angular CLI: 17.3.0
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin arm64

Step 3 — Create a New Angular App

Use the ng new command to scaffold a new project:

Bash

ng new my-angular-app

The CLI will ask a few questions:

? Which stylesheet format would you like to use?
  CSS
❯ SCSS   [ https://sass-lang.com/documentation/syntax#scss ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org ]

? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)?
  No / Yes

For beginners, choose CSS for styles and No for SSR. You can always add them later.

ng new — Common Flags

Flag	Description	Example
--standalone	Use standalone components (default in Angular 17+)	ng new app --standalone
--style	Set the default stylesheet format	ng new app --style=scss
--routing	Generate a routing module	ng new app --routing
--skip-tests	Do not generate .spec.ts test files	ng new app --skip-tests
--ssr	Enable server-side rendering	ng new app --ssr
--dry-run	Preview what would be created without writing files	ng new app --dry-run
--prefix	Set the component selector prefix (default: app)	ng new app --prefix=my

Step 4 — Start the Development Server

Bash

cd my-angular-app
ng serve

Initial chunk files | Names         |  Raw size
chunk-AFJKWPXQ.js  | -             |   4.94 kB |
main.js            | main          | 188.51 kB |
polyfills.js       | polyfills     |  82.71 kB |
styles.css         | styles        |   0 bytes |

Application bundle generation complete. [1.337 seconds]

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  Network: http://192.168.1.5:4200/

Open your browser to http://localhost:4200. You will see the default Angular welcome page. Any file you save will trigger an instant hot reload.

Tip

Use ng serve --open (or ng serve -o) to automatically open the browser when the dev server starts.

Angular CLI Commands Reference

Command	Description
ng new <name>	Create a new Angular workspace and project
ng serve	Start the development server (default port 4200)
ng build	Build for production (output to dist/)
ng generate component <name>	Generate a new component
ng generate service <name>	Generate a new service
ng generate pipe <name>	Generate a new pipe
ng generate directive <name>	Generate a new directive
ng generate guard <name>	Generate a route guard
ng generate interface <name>	Generate a TypeScript interface
ng test	Run unit tests (Karma + Jasmine)
ng e2e	Run end-to-end tests
ng lint	Run ESLint on the project
ng add <package>	Add a library with ng-add schematics (e.g., Angular Material)
ng update	Update Angular and its dependencies
ng version	Show Angular CLI and package versions

Generating Code with ng generate

The CLI's ng generate (shorthand: ng g) command creates files following Angular's conventions automatically:

Bash

# Generate a standalone component
ng generate component features/user-profile --standalone

# Generate a service in a subfolder
ng generate service core/auth

# Generate a pipe
ng generate pipe shared/truncate

# Generate a route guard
ng generate guard core/auth --implements CanActivate

# Shorthand
ng g c features/dashboard
ng g s services/products

CREATE src/app/features/user-profile/user-profile.component.ts (226 bytes)
CREATE src/app/features/user-profile/user-profile.component.html (28 bytes)
CREATE src/app/features/user-profile/user-profile.component.css (0 bytes)
CREATE src/app/features/user-profile/user-profile.component.spec.ts (566 bytes)

Note

The CLI always generates a spec file for tests. If you do not want test files, add --skip-tests to the generate command, or set "schematics": { "@schematics/angular:component": { "skipTests": true } } in angular.json.

ng build — Production Builds

Bash

ng build                # production build (default)
ng build --configuration development  # development build

Initial chunk files   | Names         |   Raw size | Estimated transfer size
main-XXXXXXXX.js      | main          |  205.68 kB |                56.74 kB
polyfills-XXXXXXXX.js | polyfills     |   34.00 kB |                11.64 kB
styles-XXXXXXXX.css   | styles        |    0 bytes |                 0 bytes

Application bundle generation complete. [8.021 seconds]

Output location: /path/to/my-angular-app/dist/my-angular-app/browser

The production build:

Compiles templates Ahead-of-Time (AOT)
Tree-shakes unused code
Minifies and uglifies JavaScript
Generates unique hash filenames for cache busting
Enables all Angular runtime optimizations

Installing Angular Material (Example: ng add)

Bash

ng add @angular/material

? Choose a prebuilt theme name, or "custom" for a custom theme:
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]

? Set up global Angular Material typography styles?  Yes
? Include the Angular animations module?  Yes

ng add runs a package's ng-add schematic, which installs the npm package AND automatically configures your Angular project (updating angular.json, importing modules, adding styles, etc.).

VS Code Extensions for Angular

Angular Language Service — template autocomplete, type checking in HTML templates
Angular Snippets (John Papa) — code snippets for components, services, etc.
ESLint — linting with Angular ESLint rules
Prettier — code formatting
GitLens — enhanced Git integration
Thunder Client — lightweight REST client (useful for testing APIs)

Updating Angular

Angular provides an interactive update guide at update.angular.io. The CLI's ng update command handles most of the work:

Bash

# Check what can be updated
ng update

# Update Angular core and CLI together
ng update @angular/core @angular/cli

# Update all packages (use with caution)
ng update --all

Warning

Always update Angular one major version at a time. Never skip from Angular 15 directly to Angular 17, for example. Follow the official migration guide at update.angular.io for each version.

angular.json — The Workspace Configuration

The angular.json file at the root of your project configures the Angular CLI build system. Key sections include:

JSON

{
  "projects": {
    "my-angular-app": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/my-angular-app",
            "index": "src/index.html",
            "main": "src/main.ts",
            "styles": ["src/styles.css"],
            "assets": ["src/favicon.ico", "src/assets"]
          },
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximumWarning": "500kB", "maximumError": "1MB" }
              ]
            }
          }
        },
        "serve": {
          "options": { "port": 4200 }
        }
      }
    }
  }
}

Note

The budgets configuration warns or errors when your bundle exceeds a size threshold — a great safety net to prevent performance regressions.

Quick Start Checklist

Install Node.js LTS from nodejs.org
Run: npm install -g @angular/cli
Run: ng new my-app (choose CSS, No SSR for beginners)
Run: cd my-app && ng serve
Open http://localhost:4200 in your browser
Install the Angular Language Service extension in VS Code
Start editing src/app/app.component.ts and watch hot-reload in action