Angular 2 file structure for project

Question

Let say I have file structure like below in my project (taken from documentation):

-app
--core
--feature1
--feature2
--shared

So, where should I put something like:

- communicates.service (service to manage communicates (.message(), .error())
- communicates.component (component which is responsible for content of communicates on my page)
- authorization.service
- and for example feature1.service (feature2 uses this service)
- feature2.service

I am not sure if I should put it to core or shared.

Regards

I normally just created a "services" directory and stick them in there under the "app" — Harry
– Harry, Commented Jun 26, 2017 at 9:00

crash · Accepted Answer · 2017-06-26 09:15:18Z

3

Usually app-wide services should be kept in the core module. This way you'll be sure that they will be singletons and you won't have multiple instances of the same service running at the same time.

So

I would keep most of the app-wide services in the core module
All common presentational components, directives, pipes, modules in the shared module
All section specific elements (eg. services, components...) in it's feature module

You should have a read here, it's very well explained:

Shared modules: https://angular.io/guide/ngmodule#shared-modules
Core module: https://angular.io/guide/ngmodule#the-core-module
Feature modules: https://angular.io/guide/ngmodule#feature-modules

answered Jun 26, 2017 at 9:15

crash

4,5829 gold badges36 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Michal Bialek Over a year ago

Yes, I know it, but for example I have features: task and task-list. Task list should be "shared" for other features which can display task list. But also task-list can be as subfolder in task feature folder. How to solve this case?

crash Over a year ago

I'm sorry I didn't quite get your question... if both task and task-list are shared features, why don't you add them in the shared module?

Michal Bialek Over a year ago

task is not a shared feature. Task.component feature is a subpage but task-list.component may be used in other features.

crash Over a year ago

So, as I understood: task-list.component is shared and it uses internally task.component. In this case I would put both of them in the shared.module but I'll just export only task-list.component since it's the only one used other features.

Michal Bialek Over a year ago

If some components use each other should they both be in shared?

|

Markus · Accepted Answer · 2017-06-26 09:11:16Z

It a bit depends on your project size, but I prefer structuring by use case. And stuff that is used site-wide will be in a shared or in a use-case specific folder. Looks like it makes sense to refactor the project a bit.

Maybe this helps you a bit, it is based on mgechev/angular-seed, which is a great starting point for larger size projects:

./auth
./auth/store
./auth/store/actions
./auth/store/actions/action-creators
./auth/store/async-services
./auth/store/facades
./auth/store/reducers
./data-models
./data-models/classes
./data-models/interfaces
./data-models/types
./root-store
./root-store/async-services
./root-store/facades
./root-store/store
./shared
./shared/accordion
./shared/config
./shared/disclaimer
./shared/footer
./shared/helpers
./shared/loading-spinner
./shared/navbar
./shared/pipes
./storefront
./storefront/breadcrumbs
./storefront/error
./storefront/facets
./storefront/hero-banner
./storefront/product-catalog
./storefront/product-catalog/product-list
./storefront/product-catalog/product-list/product-card
./storefront/product-detail
./storefront/product-detail/aside
./storefront/product-detail/assets
./storefront/product-detail/features
./storefront/product-detail/header
./storefront/product-detail/media
./storefront/search
./storefront/store
./storefront/store/actions
./storefront/store/actions/action-creators
./storefront/store/async-services
./storefront/store/facades
./storefront/store/reducers

Lalit Sachdeva · Accepted Answer · 2017-06-26 09:12:21Z

1

Before you do any code restructuring or shifting of modules, just to give you quick thought about this, every folder structuring is done to make the development easy and help developers to easily locate the modules.

so the feature related declaration need to go in feature folder itself and something which you makes out as common need to go in the shared folder with different folders in it

-app
--feature1
---feature1.module
---feature1.service
---feature1.model
--feature2
---feature2.module
---feature2.service
---feature2.model
--shared
---communicates
----communicates.service
----communicates.component

answered Jun 26, 2017 at 9:12

Lalit Sachdeva

6,6512 gold badges21 silver badges25 bronze badges

3 Comments

Michal Bialek Over a year ago

Yes, I know it, but for example I have features: task and task-list. Task list should be "shared" for other features which can display task list. But also task-list can be as subfolder in task feature folder. How to solve this case?

Lalit Sachdeva Over a year ago

not sure you expressed this correclty, but as per your comment you have already said that task-list need to be shared for other features, so this in any case need to go into shared folder

Michal Bialek Over a year ago

task.component in features uses task-list.component and task-editor.component. I have similar model also for other features, for example suites.component with suites-list.component and suites-editor.component. suites-editor.component may use task.list.component. There are many similar dependencies

Junior Gantin · Accepted Answer · 2017-11-24 22:51:59Z

0

Angular 2+ Style Guide is a work in progress. For example, you can take the following scenario like describe in this repository.

-app
--components
---components.module.ts
---feature1
---communicate
----communicate.component.|html|css|spec.ts|ts
--guards
--models
--pipes
--services
---feature1.service.ts
---feature2.service.ts
---communicate.service.ts
---authorization.service.ts

answered Nov 24, 2017 at 22:51

Junior Gantin

2,2021 gold badge22 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular 2 file structure for project

4 Answers 4

8 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related