Правильная ли структура каталогов в Angulra проекте?

Question

[Jake Taylor]

Добрый день.
Ознакомился по данной ссылке с тем, как должна выглядеть структура каталогов в Angular проекте. Понятно, что нет жёсткого подхода и всё варьируется от проекта к проекте. И на этой почве возникли такие вопросы. Рассмотрим на примере минимального проекта.
В проекте есть main, header, footer, sign-in и sign-up html-страницы.

Для начала создам катагол modules.
В каталоге modules я уже буду создавать модули main, header, footer, sign-in и sign-up.
Правильно ли я понял, что:
1) Создаю каталог для модулей аутентификации и назову его auth
2) Внутри auth создаю модули sign-in и sing-up (регистрация):

$ ng g m sign-in
$ ng g m sign-up

3) Теперь мне надо создать для каждого из этих модулей по компоненту. Но перед этим внутри каталога каждого модуля я создам каталог components, куда и буду складывать компоненты:



4) Теперь с помощью CLI мне необходимо создать компонент для каждого модуля (auth, footer, header):
$ ng g c NAME

ВОПРОС: какое имя задать для компонента? Ведь CLI команда для создания компонента создаст каталог с заданным именем и ещё создаст внутри компонент с заданным именем и в итоге получится дублирование каталогов (см. на скрине ниже) какое-то. Это нормально? Получается, что имя модуля и имя компонента будет совпадать?

Answer 1

[historydev]

А теперь представим что нам понадобится компонент sign-in в компоненте header)

Comments

[Jake Taylor]

Так и будет. Как на скрине ниже будет правильно?

[historydev]

Jake Taylor, так уже лучше, у меня такая структура

[Jake Taylor]

Владимир, Я немного не понимаю вот что... почему структура первоначальная не подойдет... Модуль же объединяем в себе компоненты и сервис, логично (вроде) ,чтобы была папка модуль, а внутри этой папки были папки с компонентами и папки с сервисами.

[historydev]

Jake Taylor, кроме index.ts, у тебя вход в приложение компонент app, что в index.ts?

[Jake Taylor]

Владимир, index.ts будет объединять внутри себя все компоненты (индексация). Хорошее решение или бесполнезное?

[historydev]

Jake Taylor, Суть этих компонентов и сервисов в повторном использовании, а ограничивая их папкой ты явно говоришь что они будут только здесь, однако они 100% понадобятся где-то ещё. Если есть условный локальный сервис, возможно его можно кинуть в папку с модулем или компонентом в котором он используется, но лучше так не делать как по мне.
Я видел пару проектов где сервисы кидали в папку с компонентом, это неудачное решение по моему мнению, решать конечно тебе, но и работать тебе :)

[historydev]

Jake Taylor, импорты длинной в жизнь, если делать бесконечные вложенности)

[Jake Taylor]

Владимир, Окей, спасибо за объяснение. Подскажи ещё, пожалуйста, куда правильно положить папку со шрифтами относительно каталога ./src/?

[historydev]

Jake Taylor, покажи что в index.ts, класс или экспорты?

[historydev]

Jake Taylor, app, assets, src, fonts

[Jake Taylor]

Владимир, index.ts пока ещё пустой

[historydev]

Jake Taylor,

[Jake Taylor]

Владимир,

Может первый вариант более логичен или я ошибаюсь?
1) /src/assets/fonts
2) /app/assets/src/fonts

[historydev]

Jake Taylor, вот такая у меня структура, по поводу index.ts не уверен что он тебе нужен с нормально структурой, просто импортируй то что тебе нужно в модуль/компонент или сервис

[Jake Taylor]

Владимир, Спасибо!

[historydev]

Jake Taylor, src => app, assets, fonts, environments

[Jake Taylor]

Владимир, Туда же и картинки в src -----> /src/imges/ ?

[historydev]

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

Answer 2

[Антон Швец]

Но перед этим внутри каталога каждого модуля я создам каталог components, куда и буду складывать компоненты

Складывай прям так, зачем лишняя папка components
Папка должна говорить о смысле, типа

layout
  header
    header-buttons
    header-menu
  footer
    footer-annotation

И тому подобное.