Установка и новый проект

Angular CLI — консольная программа ng, которая создаёт проект, запускает его, генерирует файлы и собирает приложение. Почти вся работа с Angular идёт через неё.

Что нужно заранее

Нужен Node.js актуальной LTS-версии (22 или новее) — вместе с ним устанавливается npm. Проверьте версии:

node -v
npm -v

Установка CLI

npm install -g @angular/cli

Флаг -g ставит пакет глобально, и команда ng становится доступна в любой папке. Проверка: ng version выводит версию Angular CLI.

Создание проекта

ng new my-app

CLI задаст несколько вопросов. Для курса выбирайте формат стилей CSS, а от серверного рендеринга (SSR) откажитесь — он нужен для отдельных задач и усложняет первые шаги. Остальное оставьте по умолчанию. CLI создаст папку my-app и установит зависимости — это занимает минуту-другую.

cd my-app
ng serve

Откройте http://localhost:4200 — появится стартовая страница Angular.

Обзор папок

my-app/
├── public/            файлы как есть: favicon.ico, картинки
├── src/
│   ├── app/
│   │   ├── app.ts          главный компонент App
│   │   ├── app.html        его шаблон
│   │   ├── app.css         его стили
│   │   ├── app.spec.ts     его тест
│   │   ├── app.config.ts   настройки приложения
│   │   └── app.routes.ts   маршруты
│   ├── index.html     единственная HTML-страница
│   ├── main.ts        точка входа
│   └── styles.css     общие стили
├── angular.json       настройки сборки
├── package.json
└── tsconfig.json

В Angular до версии 20 файлы назывались по-другому: app.component.ts, app.component.html, а класс — AppComponent. Смысл тот же.

Точка входа

// 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));

Функция bootstrapApplication запускает приложение: берёт компонент App и настройки из app.config.ts. Этот файл менять почти не придётся.

Главный компонент

В src/index.html есть тег <app-root></app-root>. На его место Angular выводит компонент App:

// 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 {}

Шаблон компонента лежит в app.html. Удалите всё его содержимое и напишите <h1>Мои задачи</h1> — страница в браузере обновится сама.

Частая ошибка

Команды ng serve и ng generate нужно запускать внутри папки проекта. Если запустить их в родительской папке, CLI ответит, что команда доступна только внутри рабочего пространства Angular. Сначала выполните cd my-app.