Installing Angular CLI

Angular CLI (Command Line Interface) is your forge - a tool for creating, building, and managing Angular projects.

Prerequisites

Before installation you need:

• Node.js in the current LTS version (22.12 or newer; the latest Angular CLI no longer runs on Node.js 18)
• npm (installed together with Node.js)

Check versions:

node --version
# Should show v22.12.0 or newer

npm --version
# Should show 10.x or newer

Installing Angular CLI

Open the terminal and type:

npm install -g @angular/cli

The -g flag means global installation - the CLI will be available from anywhere in the system.

Verifying the Installation

ng version

You should see information about the installed Angular CLI version and supported Node.js and TypeScript versions.

Creating Your First Project

# Create a new project
ng new my-dojo

# CLI will ask:
# ? Which stylesheet format would you like to use? (CSS, SCSS, Sass, Less)
# ? Do you want to enable Server-Side Rendering (SSR)? (y/N)

Recommended answers for beginners:

• Stylesheet: SCSS (greater flexibility)
• SSR: No (we don't need it at the start)

Project Structure

After creating the project you will see:

my-dojo/
├── src/
│   ├── app/
│   │   ├── app.component.ts      # Main component
│   │   ├── app.component.html    # Template
│   │   ├── app.component.scss    # Styles
│   │   ├── app.config.ts         # Configuration
│   │   └── app.routes.ts         # Routing
│   ├── index.html                # Main HTML file
│   ├── main.ts                   # Entry point
│   └── styles.scss               # Global styles
├── angular.json                  # Project configuration
├── package.json                  # npm dependencies
└── tsconfig.json                 # TypeScript configuration

Note: since Angular 20 the CLI creates files without the .component suffix - instead of app.component.ts you will see app.ts with the App class, and app.html instead of app.component.html. The files play the same roles.

Running the Application

cd my-dojo
ng serve

The application will be available at: http://localhost:4200

Useful flags:

ng serve --open          # Automatically opens the browser
ng serve --port 3000     # Changes the port
ng serve --watch         # Automatic refresh (enabled by default)