Install the Angular CLI & Create a Project

Angular apps are created, run, tested and built with the Angular CLI, a command-line tool called ng. The CLI writes the starting files for you, runs a development server that reloads the page when you save, and produces optimised files for production.

In this lesson you will install Node.js and the CLI, create your first Angular 22 project, run it in the browser and learn the CLI commands you will use every day.

Step 1: install Node.js

The Angular CLI runs on Node.js, a program that runs JavaScript outside the browser. It also brings npm, the package manager that downloads Angular and its tools.

Angular 22 needs Node.js 22.22.3 or newer in the 22 line, 24.15.0 or newer in the 24 line, or Node.js 26 and later. The simplest choice is the current LTS (long-term support) release, Node.js 26, from the official site nodejs.org. After installing, open a new terminal and check the versions:

node -v
npm -v

v26.13.0
11.20.0

Your exact numbers may be higher. If node -v prints something older, the CLI will refuse to start with a message like this one:

Node.js version v22.14.0 detected.
The Angular CLI requires a minimum Node.js version of v22.22.3 or v24.15.0 or v26.0.0.

Step 2: install the Angular CLI

Install the CLI once, globally (-g), so the ng command works in any folder:

npm install -g @angular/cli
ng version

ng version prints a banner and a table with the CLI version (22.x), your Node.js version and your operating system.

Step 3: create a project

Go to the folder where you keep your code and run ng new with a project name. Use lowercase letters and hyphens:

cd D:\projects
ng new canteen

The CLI asks a couple of questions:

• Which stylesheet system would you like to use? Choose CSS for now. Sass (SCSS), Less and Tailwind CSS are also offered.
• Do you want to enable Server-Side Rendering (SSR) and Static Site Generation? Choose No for now. You will learn SSR later in SSR & Hydration.

If it asks anything else, the default answer is fine. The CLI then creates a canteen folder, writes the starting files and runs npm install to download Angular. This can take a minute or two. You can also answer the questions with options, which is handy in scripts:

ng new canteen --style=css --ssr=false

A new Angular 22 project is standalone (no NgModule), zoneless (no zone.js), uses TypeScript 6.0 and uses Vitest for unit tests.

Step 4: run the development server

Move into the project and start the development server:

cd canteen
ng serve

Initial chunk files | Names         | Raw size
main.js             | main          | 48.85 kB |
styles.css          | styles        | 95 bytes |

Application bundle generation complete. [9.138 seconds]

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

Open http://localhost:4200/ in your browser to see the welcome page. Leave the terminal running. When you edit and save a file, the CLI rebuilds and the browser updates on its own. Press Ctrl+C in the terminal to stop the server. npm start does the same as ng serve, and ng serve --open also opens the browser for you.

Everyday CLI commands

The ng generate command (short form ng g) creates new files that follow the official style guide:

ng generate component menu-card
ng g service cart
ng g pipe rupee
ng g directive highlight

CREATE src/app/menu-card/menu-card.spec.ts (569 bytes)
CREATE src/app/menu-card/menu-card.ts (206 bytes)
CREATE src/app/menu-card/menu-card.css (0 bytes)
CREATE src/app/menu-card/menu-card.html (25 bytes)
CREATE src/app/cart.spec.ts (325 bytes)
CREATE src/app/cart.ts (80 bytes)

Notice the file names: since Angular 20, the CLI writes menu-card.ts, not menu-card.component.ts, and the class is called MenuCard, not MenuCardComponent. You will meet the longer names in older projects.

When you are ready to publish, run ng build. The output goes to dist/canteen/browser, a folder of plain HTML, CSS and JavaScript files that any static web host can serve.

Set up your editor

Use Visual Studio Code. The new project includes a recommendation for the Angular Language Service extension, so VS Code offers to install it when you open the folder. It gives you autocomplete, error checking and "go to definition" inside templates, which saves a lot of time.

Common mistakes

• Old Node.js version. The CLI stops with "requires a minimum Node.js version". Install the current LTS and open a new terminal.
• Running ng serve in the wrong folder. You must be inside the project folder (the one with angular.json), or you get "This command is not available when running the Angular CLI outside a workspace".
• Port already in use. If another server uses port 4200, run ng serve --port 4300.
• Spaces or capitals in the project name. Use names like canteen or exam-portal.

Key points

• Install Node.js (26 LTS is a good choice), then the CLI with npm install -g @angular/cli.
• ng new canteen creates a standalone, zoneless Angular 22 project with TypeScript 6.0 and Vitest.
• ng serve runs the app at http://localhost:4200/ and reloads when you save.
• ng generate creates components, services, pipes and more, using short file names like menu-card.ts.
• ng build writes production files to dist/<project>/browser.

ng new college-fest --style=scss --ssr=false
cd college-fest
ng serve --port 4300

ng g component event-list
ng g service registration