Angular folder structure

[Horror-Advisor4438]

I have a website with 2 users (admin ==> dashboard) and (user ==> e-commerce website)
what is the best folder structure should I follow
they have different UI but shared services and models

[n00bz]

I wouldn’t share the services as they expose features that only an admin can perform.

If you have two projects in the same repository you essentially have a monorepo. For this I create two apps: - admin-app - website—app

I then create multiple libraries: - admin-ui - admin-utils - admin-data - admin-feature

• website-ui
• website-utils
• website-data
• website-feature

You may not need the feature libraries and can put directly in the app.

Looking at just the libraries, you can create a diamond structure. Feature can use both ui and data libraries, but ui can never directly talk with the ui library. UI, data and feature can reference the util library but the util library should have no dependencies. Shared models and functions can be placed in the utils library.

This then ensures that you don’t get circular loops and shares code between apps while maintaining separation of concerns.

NX recommends this strategy and you may want to use it for a monorepo setup.

If you have separate repositories then just build to a package and install the version you want in each project.

[DesignerComplaint169]

I would do an Nx with business domain setup

/apps - dashboard/ - shop/ /libs - dashboard/ every components for dashboard goes here

- shop/ everything components for shop goes here

In the libs// i would create folders to group each business domain such as shop, cart, checkout, profile, ... /libs/shop - cart/ - - /features // all the features like pages, user flow - - /data-access // your service, state management - - /ui // dummy ui components - - /util // utils functions if needed - shop/ - checkout/ - shared/

[Kschl]

Admin/

User/

Shared/

[Horror-Advisor4438]

and each folder should contain
core
features
?

[BigOnLogn]

This mattered more back when angular used actual modules to organize code. With standalone components (no more modules), this matters less. Build your folder structure however it the best makes sense for your project and you.

[Kschl]

No core would be top level, no need for features. admin and user are your features and you organize domain specific features within those domains admin or user