I have read many articles about Angular folder structure. It is still not clear to me where do we put component services. Shared services between components are put under shared. But what about a service that is used only by a component? Usually I put all my component logic into a service and leave the component with code relevant only to UI stuff. Which one is better to use:
Each component and its service into the same folder
.
├── app.component.html
├── app.component.ts
├── app.module.ts
├── app-routing.module.ts
└── shop
├── clients
│ ├── clients.component.html
│ ├── clients.component.ts
│ ├── clients.component.css
│ └── clients.service.ts
├── orders
│ ├── orders.component.html
│ ├── orders.component.ts
│ ├── orders.component.css
│ └── orders.service.ts
├── shop.module.ts
└── shop-routing.module.ts
or all services of a module under a services folder
.
├── app.component.html
├── app.component.ts
├── app.module.ts
├── app-routing.module.ts
└── shop
├── clients
│ ├── clients.component.html
│ ├── clients.component.ts
│ └── clients.component.css
├── orders
│ ├── orders.component.html
│ ├── orders.component.ts
│ └── orders.component.css
├── services
│ ├── clients.service.ts
│ └── orders.service.ts
├── shop.module.ts
└── shop-routing.module.ts
It is all about Semantics and Readability in my opinion. Just doing it in a way that suits you and your convenience won't make it a good practice. It should be easy for a newbie or substitute developer to figure out your method in not time, so you should probably focus on that.
Tips to keep in mind:
1) Services should be easily relatable and shouldn't create any confusion
2) Path navigation shouldn't become complex ( for eg: avoid cases of ../../../../ )
3) Shared services should be placed under a meaningful folder
I would say that the second method you suggested is the common standard followed.
Refer : https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7