Настройка локального окружения и workspace

Это руководство объясняет, как настроить окружение для разработки на Angular с помощью Angular CLI. Оно включает информацию об установке CLI, создании начального workspace и стартового приложения, а также о локальном запуске этого приложения для проверки настройки.

Перед началом

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

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

Зависимости

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

Скачайте и установите Node.js, который также включает CLI npm. Angular требует активную LTS или maintenance LTS версию Node.js. См. руководство по совместимости версий Angular для дополнительной информации.

Установка Angular CLI

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

npm install -g @angular/cli

pnpm install -g @angular/cli

yarn global add @angular/cli

bun install -g @angular/cli

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

На клиентских компьютерах Windows выполнение PowerShell-скриптов по умолчанию отключено, поэтому приведённая выше команда может завершиться ошибкой. Чтобы разрешить выполнение PowerShell-скриптов, необходимое для глобальных бинарников npm, нужно установить следующую политику выполнения:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

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

Права Unix

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

sudo npm install -g @angular/cli

sudo pnpm install -g @angular/cli

sudo yarn global add @angular/cli

sudo bun install -g @angular/cli

Убедитесь, что понимаете последствия выполнения команд от имени root.

Создание workspace и начального приложения

Приложения разрабатываются в контексте workspace Angular.

Чтобы создать новый workspace и начальное стартовое приложение, выполните команду CLI ng new и укажите имя my-app, как показано здесь, затем ответьте на вопросы о включаемых возможностях:

ng new my-app

Angular CLI устанавливает необходимые npm-пакеты Angular и другие зависимости. Это может занять несколько минут.

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

cd my-app

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

Angular CLI включает development-сервер для локальной сборки и раздачи приложения. Выполните следующую команду:

ng serve --open

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

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

Workspace и файлы проекта

Команда ng new создаёт папку Angular workspace и генерирует в ней новое приложение. Workspace может содержать несколько приложений и библиотек. Начальное приложение, созданное командой ng new, находится в корневом каталоге workspace. При генерации дополнительного приложения или библиотеки в существующем workspace оно по умолчанию помещается в подпапку projects/.

Вновь сгенерированное приложение содержит исходные файлы корневого компонента и шаблона. У каждого приложения есть папка src, содержащая его компоненты, данные и ресурсы.

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

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

• Узнайте больше о структуре файлов и конфигурации сгенерированного workspace.

• Протестируйте новое приложение с помощью ng test.

• Генерируйте boilerplate вроде компонентов, директив и pipes с помощью ng generate.

• Разверните новое приложение и сделайте его доступным реальным пользователям с помощью ng deploy.

• Настройте и запустите сквозные тесты приложения с помощью ng e2e.