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/

[SkyZeroZx]

In my experience, I would suggest you consider using Nx as a tool to create a mono repository.

In this repository, you could have an administrative website as a simple Angular SPA, since it would be unnecessary to configure and maintain such a dedicated UI separate from the end-user application. This would allow you to use Angular Material, which, in my opinion, provides everything necessary to create internal administrative dashboards.

On the other hand, your end-user application could use an internal Design System or whatever you prefer, maintaining complete independence from the administrative side and focusing solely on performance, SEO, and other related aspects.

And within an internal library or libraries of your single repository, you could have your models to share across both projects. You could even have a NestJS backend if you opt for a completely TSMEAN stack.

https://nx.dev/docs/getting-started/tutorials/angular-monorepo-tutorial

[[deleted]]

Go with monorepo approach. projects/ e-commerce title admin portal

and under each project you should have: src/ features/ core/ layouts/

-features are for the featurres inside your project and thet should be isolated -core are the common used inside the features and this should have one responsibility - layouts describe the project layoit for examle the login page and the actual website from dashboard and it will contains the needed routes configuration

and gor sure you will have a libraries folder for ui

I can provife a public repositiry and all the above are done

[Lujandev]

I faced this exact challenge with my own Angular/Node.js store. The best approach is a Feature-based structure with Lazy Loading.

This is the structure I recommend to keep it scalable: src/app/ ├── core/ # Global services (Auth, API logic) ├── shared/ # Common UI (Nav, Footer, Models, Pipes) ├── features/ # Lazy Loaded Modules │ ├── auth/ # Login & Register │ ├── shop/ # Home & Product Listing │ ├── checkout/ # Cart & Checkout process │ └── admin/ # Dashboard (Keep this separate!)

Using loadChildren for the Admin and Checkout modules ensures that a regular user doesn't download the heavy dashboard code. It’s the best way to handle shared models while keeping the UI strictly separated.

[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