Installation and a new project

The Angular CLI is the ng command-line program that creates a project, runs it, generates files and builds the application. Almost all work with Angular goes through it.

What you need first

You need Node.js, a current LTS version (22 or newer) — npm is installed with it. Check the versions:

node -v
npm -v

Installing the CLI

npm install -g @angular/cli

The -g flag installs the package globally, so the ng command is available in any folder. To check: ng version prints the Angular CLI version.

Creating a project

ng new my-app

The CLI asks a few questions. For this course choose CSS as the stylesheet format and say no to server-side rendering (SSR) — it serves specific needs and makes the first steps harder. Leave the rest at the defaults. The CLI creates the my-app folder and installs dependencies, which takes a minute or two.

cd my-app
ng serve

Open http://localhost:4200 — the Angular welcome page appears.

Folder tour

my-app/
├── public/            files served as is: favicon.ico, images
├── src/
│   ├── app/
│   │   ├── app.ts          the main App component
│   │   ├── app.html        its template
│   │   ├── app.css         its styles
│   │   ├── app.spec.ts     its test
│   │   ├── app.config.ts   application settings
│   │   └── app.routes.ts   routes
│   ├── index.html     the only HTML page
│   ├── main.ts        the entry point
│   └── styles.css     global styles
├── angular.json       build settings
├── package.json
└── tsconfig.json

Before Angular 20 the files had other names: app.component.ts, app.component.html, and the class was AppComponent. The meaning is the same.

The entry point

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { App } from './app/app';
 
bootstrapApplication(App, appConfig)
  .catch((err) => console.error(err));

The bootstrapApplication function starts the application: it takes the App component and the settings from app.config.ts. You will rarely need to change this file.

The main component

src/index.html contains the tag <app-root></app-root>. Angular renders the App component in its place:

// src/app/app.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {}

The component's template is in app.html. Delete everything in it and write <h1>My tasks</h1> — the page in the browser updates by itself.

Common mistake

Run ng serve and ng generate inside the project folder. If you run them in the parent folder, the CLI replies that the command is only available inside an Angular workspace. Run cd my-app first.