Angular folder structure and component services

Question

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

score 4 · Answer 1 · answered Aug 10 '18 at 04:54

I don't think there is a one size fit all for a folder structure as it is completely opinionated and really it's just a nice to have.

Some say we should group based on features.

Some say we should group based on similarities.

The list goes on...

I remember a guide from Dan Abramov the really speaks about how we should truly look at structuring our app. It can be found Here.

Simple but not simple just work with what you think is best.

score 3 · Accepted Answer · answered Aug 10 '18 at 05:11

3

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

answered Aug 10 '18 at 05:11

Mithil Mohan

223
2
11

"Shared services should be placed under a meaningful folder" Second method I suggested does not have shared services under services folder. It contains all components services under services directory – pantonis Aug 10 '18 at 05:34
You should create a folder Shared and place those particular services in that folder so that it becomes readable. – Mithil Mohan Aug 10 '18 at 05:38
You mean place component services under Shared folder? But they are not shared across the app but instead used only by their respective components – pantonis Aug 10 '18 at 05:40
Say if Shop Module has components Order, Tracking, Shipment and Delivery. Say, a service OrderData is being shared by them. In such a scenario, create a folder Shared in the Shop Module outside the component folders and place the service file in that folder. – Mithil Mohan Aug 10 '18 at 05:42
Yes that one is well understood. As I explained I tend to put all business logic in a service rather than a component. My original question was about a service that is only used by a component. – pantonis Aug 10 '18 at 05:47
In that case, the common standard suggested by many as I pointed out is to put the services under Services folder in the module – Mithil Mohan Aug 10 '18 at 05:49
Ok although in a big project with dozens of components in a module this is not the best approach. too many files. – pantonis Aug 10 '18 at 05:51
Using numerous singleton services serving merely one component isn't a good practice either, try optimizing your code using shared services and handling not so major logic in components itself – Mithil Mohan Aug 10 '18 at 05:53
I totally get your concern because even I would prefer the first approach, unfortunately that isn't what the industry suggests. Probably we have to keep our conveniences aside :) – Mithil Mohan Aug 10 '18 at 05:54

score 2 · Answer 3 · edited Jun 06 '23 at 18:11

Personally, I'll prefer this architecture, Since everything related to clients is in client module.It is easy for someone new to get this architecture and it is predeicatble.

--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

Apart from this, the architecture is for own ease...

My current architecture is like

--app.component.html
--app.component.ts
--app.module.ts
--app-routing.module.ts
--pages
----- About
-------- Component
----------- Has Details
--------------Component.ts
-----------------Html
--------- Service
------------All services here
----- Contact US
-------- Component
----------- Details
--------------Component.ts
-----------------Html
-------- Models
------------Model.ts
--------- Service
------------All services here 
--Theme
---- Common components

score 0 · Answer 4 · answered Jun 03 '22 at 17:20

I prefer having services separately from components because the package structure for components will probably reflect where they are on the page visually for most apps. While for services you probably want to package "by domain/feature" https://medium.com/sahibinden-technology/package-by-layer-vs-package-by-feature-7e89cde2ae3a Also components needing their own folders doesn't help with navigation when you also have to cram services into the same folder structure.

Angular folder structure and component services

4 Answers4

Linked