Architecture

Project Structure

Structure is subjective, but consistency is mandatory. This is the blueprint of the Aden Library.

The structure of a project is the foundation. If the foundation is shaky, the house will eventually collapse. I've chosen an architecture here that combines Angular Best Practices with a strict separation of "View" (App) and "Data" (Root-Level).

Especially in large libraries, it's important to immediately recognize: Is this a component for the user? Is this a global service? Or is this just configuration? Take a look at the Explorer and click through.

Explorer

📁 .angular
📁 .vscode
📁 dist
📁 node_modules
📁 public
📁 src
.gitignore
angular.json
package.json
package-lock.json
📄 README.md

Select a file

// Click on a file (e.g. Services, Interfaces) to see how it is structured.

Architecture Deep Dive

Here are the reasons why my folders are arranged exactly this way. I strongly distinguish between "Dumb Components" (which only display) and "Smart Features" (which manage logic).

📂 src/service & src/interface (Root Level)

You might wonder why these folders are located outside of src/app. This is intentional. I'm creating a physical barrier. The app (UI) consumes the services, but the services are completely independent of the UI structure. This massively prevents "spaghetti code" and circular dependencies.

📂 src/app/shared (The Library)

Here's my toolbox. Everything in here (Feedback, Inputs, Layout) is built to be "dumb". These components know nothing about logged-in users or databases. They only render what you give them. This makes them extremely reusable.

📂 src/app/dialogs & src/app/user (Features)

In contrast to the library, these are Feature Modules. The user folder contains, for example, the complex member-profil. These components are "smart", they communicate with services and manage business logic.

📂 public (Static Assets)

Static resources like fonts and images are located here, but also configuration files for the server (.htaccess, robots.txt). The clean subdivision into img/icons and img/logo helps me keep track of hundreds of assets.

💡

Use Environments: I often see hardcoded URLs in services. Always use the environments folder for API URLs. This way I can switch between Dev and Prod without having to change a single line of code.