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

24.04.2023

Вы разрабатываете приложения в контексте рабочего пространства Angular workspace. Рабочее пространство содержит файлы для одного или нескольких проектов.

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

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

ng new <my-project>

Когда вы выполняете эту команду, CLI устанавливает необходимые пакеты Angular npm и другие зависимости в новое рабочее пространство с приложением корневого уровня с именем my-project. Корневая папка рабочего пространства содержит различные файлы поддержки и конфигурации, а также файл README со сгенерированным описательным текстом, который вы можете настроить.

По умолчанию ng new создает начальное скелетное приложение на корневом уровне рабочего пространства вместе с его сквозными тестами. Этот скелет предназначен для простого приложения Welcome, которое готово к запуску и легко модифицируется.

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

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

Angular также поддерживает рабочие пространства с несколькими проектами. Этот тип среды разработки подходит для опытных пользователей, которые разрабатывают разделяемые библиотеки,

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

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

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

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

Файлы конфигурации рабочей области	Назначение
.editorconfig	Конфигурация для редакторов кода. См. сайт EditorConfig.
.gitignore	Указывает намеренно неотслеживаемые файлы, которые Git должен игнорировать.
README.md	Вводная документация для корневого приложения.
angular.json	Конфигурация CLI по умолчанию для всех проектов в рабочем пространстве, включая параметры конфигурации инструментов сборки, обслуживания и тестирования, используемых CLI, таких как Karma и Protractor. Подробнее см. раздел Angular Workspace Configuration.
package.json	Настраивает npm package dependencies, которые доступны всем проектам в рабочем пространстве. Об особенностях формата и содержания этого файла см. в документации npm.
package-lock.json	Предоставляет информацию о версии всех пакетов, установленных в node_modules клиентом npm. Подробности см. в npm documentation. Если вы используете клиент yarn, то вместо этого файла будет yarn.lock.
src/	Исходные файлы для проекта приложения корневого уровня.
node_modules/	Предоставляет npm-пакеты всему рабочему пространству. Зависимости node_modules в рабочем пространстве видны всем проектам.
tsconfig.json	Базовая конфигурация TypeScript для проектов в рабочей области. Все остальные файлы конфигурации наследуются от этого базового файла. Дополнительную информацию см. в разделе Наследование конфигурации с помощью extends документации по TypeScript.

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

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

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

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

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

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

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

Файлы поддержки приложений	Назначение
app/	Содержит файлы компонентов, в которых определены логика и данные вашего приложения.
assets/	Содержит файлы изображений и других активов, которые будут скопированы "как есть" при сборке приложения.
favicon.ico	Значок, который будет использоваться для данного приложения на панели закладок.
index.html	Основная HTML-страница, которая открывается при посещении сайта. CLI автоматически добавляет все файлы JavaScript и CSS при создании приложения, поэтому обычно нет необходимости добавлять сюда теги <script> или <link> вручную.
main.ts	Основная точка входа для вашего приложения. Компилирует приложение с помощью JIT-компилятора и загружает корневой модуль приложения (AppModule) для запуска в браузере. Также можно использовать AOT-компилятор без изменения кода, добавив флаг --aot к командам CLI build и serve.
styles.css	Перечисляет CSS-файлы, задающие стили для проекта. Расширение отражает препроцессор стилей, настроенный для проекта.

Новые проекты Angular по умолчанию используют строгий режим. Если это нежелательно, вы можете отказаться от него при создании проекта.

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

src/app/ files	Назначение
app/app.config.ts	Определяет логику конфигурации приложения, которая указывает Angular, как собрать приложение. По мере добавления в приложение новых провайдеров они должны быть объявлены в этом файле. Генерируется только при использовании опции --standalone.
app/app.component.ts	Определяет логику для корневого компонента приложения с именем AppComponent. Представление, связанное с этим корневым компонентом, становится корнем иерархии представлений по мере добавления компонентов и сервисов в приложение.
app/app.component.html	Определяет HTML-шаблон, связанный с корневым AppComponent.
app/app.component.css	Определяет базовую таблицу стилей CSS для корневого AppComponent.
app/app.component.spec.ts	Определяет модульный тест для корневого AppComponent.
	app/app.module.ts

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

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

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

Файлы конфигурации для конкретного приложения	Цель
tsconfig.app.json	Конфигурация для конкретного приложения TypeScript, включая параметры компилятора шаблонов TypeScript и Angular. Смотрите TypeScript Configuration и Angular Compiler Options.
tsconfig.spec.json	TypeScript конфигурация для тестов приложения. Смотрите TypeScript Configuration.

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

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

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

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

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

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

cd my-workspace
ng generate application my-first-app

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

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

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

my-workspace
    …                  (workspace-wide config files)
    projects           (generated applications and libraries)
        my-first-app   --(an explicitly generated application)
            …          --(application-specific config)
            src        --(source and support files for application)
        my-lib         --(a generated library)
            …          --(library-specific config)
            src        --(source and support files for library)

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

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

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

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

Исходные файлы библиотеки	Назначение
src/lib	Содержит логику и данные библиотечного проекта. Как и проект приложения, проект библиотеки может содержать компоненты, сервисы, модули, директивы и пайпы.
src/public-api.ts	Определяет все файлы, экспортируемые из вашей библиотеки.
ng-package.json	Конфигурационный файл, используемый ng-packagr для сборки вашей библиотеки.
package.json	Конфигурация npm package dependencies, необходимых для данной библиотеки.
tsconfig.lib.json	Конфигурация библиотеки, специфичная для TypeScript, включая параметры компилятора шаблонов TypeScript и Angular. См. раздел TypeScript Configuration.
tsconfig.lib.prod.json	Специфическая для библиотеки TypeScript конфигурация, которая используется при сборке библиотеки в режиме производства.
tsconfig.spec.json	TypeScript конфигурация для тестов библиотеки. См. раздел TypeScript Configuration.

Ссылки

• Workspace and project file structure

Комментарии