Структура файлов рабочего пространства и проекта

Вы разрабатываете приложения в контексте рабочего пространства (workspace) Angular. Рабочее пространство содержит файлы для одного или нескольких проектов. Проект — это набор файлов, составляющих приложение или библиотеку общего пользования.

Команда Angular CLI ng new создает рабочее пространство.

ng new my-project

При запуске этой команды CLI устанавливает необходимые npm-пакеты Angular и другие зависимости в новом рабочем пространстве с корневым приложением под названием my-project.

По умолчанию ng new создает начальный скелет приложения на корневом уровне рабочего пространства вместе со сквозными ( e2e) тестами. Скелет представляет собой простое приветственное приложение, готовое к запуску и легкое для изменения. Корневое приложение имеет то же имя, что и рабочее пространство, а исходные файлы находятся в подпапке src/ рабочего пространства.

Это поведение по умолчанию подходит для типичного стиля разработки "multi-repo", где каждое приложение находится в собственном рабочем пространстве. Новичкам и пользователям среднего уровня рекомендуется использовать ng new для создания отдельного рабочего пространства для каждого приложения.

Angular также поддерживает рабочие пространства с несколькими проектами. Этот тип среды разработки подходит для опытных пользователей, разрабатывающих библиотеки общего пользования, и для предприятий, использующих стиль разработки "monorepo" (монорепозиторий) с единым репозиторием и глобальной конфигурацией для всех проектов Angular.

Чтобы настроить рабочее пространство monorepo, следует пропустить создание корневого приложения. См. раздел Настройка рабочего пространства с несколькими проектами ниже.

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

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

Файлы проекта приложения

По умолчанию команда CLI ng new my-app создает папку рабочего пространства с именем "my-app" и генерирует новый скелет приложения в папке src/ на верхнем уровне рабочего пространства. Вновь созданное приложение содержит исходные файлы для корневого модуля с корневым компонентом и шаблоном.

Когда структура файлов рабочего пространства готова, вы можете использовать команду ng generate в командной строке для добавления функциональности и данных в приложение. Это начальное корневое приложение является приложением по умолчанию для команд CLI (если вы не измените значение по умолчанию после создания дополнительных приложений).

Для рабочего пространства с одним приложением подпапка src рабочего пространства содержит исходные файлы (логику приложения, данные и ресурсы) для корневого приложения. Для рабочего пространства с несколькими проектами дополнительные проекты в папке projects содержат подпапку project-name/src/ с такой же структурой.

Исходные файлы приложения

Файлы на верхнем уровне src/ обеспечивают запуск вашего приложения. Подпапки содержат исходный код приложения и специфичную для приложения конфигурацию.

Внутри папки src папка app содержит логику и данные вашего проекта. Компоненты, шаблоны и стили Angular находятся здесь.

Файлы конфигурации приложения

Специфичные для приложения файлы конфигурации для корневого приложения находятся на корневом уровне рабочего пространства. Для рабочего пространства с несколькими проектами специфичные для проекта файлы конфигурации находятся в корне проекта, в папке projects/project-name/.

Специфичные для проекта файлы конфигурации TypeScript наследуются от tsconfig.json всего рабочего пространства.

Несколько проектов

Рабочее пространство с несколькими проектами подходит для организации, которая использует единый репозиторий и глобальную конфигурацию для нескольких проектов Angular (модель "monorepo"). Рабочее пространство с несколькими проектами также поддерживает разработку библиотек.

Настройка рабочего пространства с несколькими проектами

Если вы планируете иметь несколько проектов в рабочем пространстве, вы можете пропустить генерацию начального приложения при создании рабочего пространства и дать рабочему пространству уникальное имя. Следующая команда создает рабочее пространство со всеми файлами конфигурации рабочего пространства, но без корневого приложения.

ng new my-workspace --no-create-application

Затем вы можете генерировать приложения и библиотеки с именами, уникальными в рамках рабочего пространства.

cd my-workspace
ng generate application my-app
ng generate library my-lib

Структура файлов нескольких проектов

Первое явно сгенерированное приложение попадает в папку projects вместе со всеми остальными проектами в рабочем пространстве. Вновь сгенерированные библиотеки также добавляются в projects. При создании проектов таким образом структура файлов рабочего пространства полностью соответствует структуре файла конфигурации рабочего пространства, angular.json.

my-workspace/
  ├── …                (файлы конфигурации всего рабочего пространства)
  └── projects/        (приложения и библиотеки)
      ├── my-app/      (явно сгенерированное приложение)
      │   └── …        (код и конфигурация, специфичные для приложения)
      └── my-lib/      (сгенерированная библиотека)
          └── …        (код и конфигурация, специфичные для библиотеки)

Файлы проекта библиотеки

Когда вы генерируете библиотеку с помощью CLI (командой типа ng generate library my-lib), сгенерированные файлы попадают в папку projects/ рабочего пространства. Для получения дополнительной информации о создании собственных библиотек см. Создание библиотек.

В отличие от приложения, библиотека имеет свой собственный файл конфигурации package.json.

В папке projects/ папка my-lib содержит код вашей библиотеки.