Перейти к содержанию

Локальное окружение и рабочее пространство

📅 30.09.2026

Это руководство объясняет, как подготовить окружение для разработки на Angular с помощью Angular CLI. Здесь — установка CLI, первое рабочее пространство со стартовым приложением и локальный запуск, чтобы проверить настройку.

Angular без локальной установки

Если Angular ещё не знаком, начните с Попробовать сейчас!: он знакомит с основами Angular прямо в браузере. Этот самостоятельный учебник идёт в интерактивной среде StackBlitz. Локальное окружение понадобится, только когда будете к нему готовы.

Прежде чем начать

Для Angular CLI нужно знакомство с:

Нужен и опыт работы с инструментами командной строки (CLI), и общее представление о командных оболочках. Знание TypeScript помогает, но не обязательно.

Зависимости

Чтобы поставить Angular CLI локально, нужен Node.js. CLI ставит и запускает инструменты JavaScript вне браузера через Node и связанный с ним менеджер пакетов npm.

Скачайте и установите Node.js — вместе с ним будет CLI npm. Angular нуждается в активной LTS или maintenance LTS версии Node.js. Подробности — в руководстве совместимости версий Angular.

Установка Angular CLI

Чтобы установить Angular CLI, откройте терминал и выполните команду:

1
npm install -g @angular/cli

1
pnpm install -g @angular/cli

1
yarn global add @angular/cli

1
bun install -g @angular/cli

Политика выполнения PowerShell

На клиентских компьютерах Windows выполнение сценариев PowerShell по умолчанию выключено, поэтому команда выше может завершиться ошибкой. Глобальным исполняемым файлам npm нужно выполнение сценариев PowerShell. Задайте такую политику выполнения:

1
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Внимательно прочитайте сообщение после команды и следуйте ему. Нужно понимать, к чему ведёт смена политики выполнения.

Права в Unix

На части Unix-систем глобальные сценарии принадлежат пользователю root, и команда выше может упасть с ошибкой прав. Запустите её через sudo, чтобы выполнить команду от имени root, и введите пароль по запросу:

1
sudo npm install -g @angular/cli

1
sudo pnpm install -g @angular/cli

1
sudo yarn global add @angular/cli

1
sudo bun install -g @angular/cli

Нужно понимать, к чему ведёт запуск команд от имени root.

Рабочее пространство и первое приложение

Приложения разрабатывают в рабочем пространстве Angular.

Новое рабочее пространство и стартовое приложение создаёт команда CLI ng new с именем my-app, как ниже. Затем CLI спросит, какие возможности включить:

1
ng new my-app

Angular CLI ставит нужные пакеты npm Angular и остальные зависимости. Это занимает несколько минут.

CLI создаёт новое рабочее пространство и небольшое приветственное приложение в каталоге с тем же именем. Оно готово к запуску. Перейдите в этот каталог: следующие команды будут работать уже с этим рабочим пространством.

1
cd my-app

Запуск приложения

В Angular CLI есть сервер разработки: он собирает приложение и отдаёт его локально. Выполните команду:

1
ng serve --open

Команда ng serve запускает сервер, следит за файлами, пересобирает приложение и перезагружает браузер, когда файлы меняются.

Параметр --open (или просто -o) сам открывает браузер на http://localhost:4200/, где видно собранное приложение.

Файлы рабочего пространства и проекта

Команда ng new создаёт каталог рабочего пространства Angular и генерирует в нём новое приложение. В одном рабочем пространстве может быть несколько приложений и библиотек. Первое приложение, которое создаёт ng new, лежит в корне рабочего пространства. Дополнительное приложение или библиотека в уже существующем пространстве по умолчанию попадает в подкаталог projects/.

Только что созданное приложение содержит исходники корневого компонента и шаблона. У каждого приложения есть каталог src с компонентами, данными и ресурсами.

Сгенерированные файлы правят напрямую или через команды CLI. Команда ng generate добавляет файлы новых компонентов, директив, пайпов, сервисов и другого. Команды вроде ng add и ng generate, которые создают приложения и библиотеки или работают с ними, запускают изнутри рабочего пространства. Команду ng new, напротив, запускают вне рабочего пространства: она создаёт новое.

Следующие шаги

  • Подробнее о структуре файлов и конфигурации созданного рабочего пространства.

  • Проверьте новое приложение командой ng test.

  • Заготовки компонентов, директив и пайпов даёт ng generate.

  • Разверните приложение и отдайте его пользователям командой ng deploy.

  • Сквозные тесты приложения настраивают и запускают через ng e2e.

Источник: https://angular.dev/tools/cli/setup-local

Комментарии