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.
- 📁 .angular
- 📁 .vscode
- 📁 dist
- 📁 node_modules
- 📁 public
- 📁 src
- .gitignore
.png)
- angular.json
- package.json
- package-lock.json
- 📄 README.md
// Click on a file (e.g. Services, Interfaces) to see how it is structured.Architecture Deep Dive
The folder structure follows a clear architectural principle: strict separation between Application UI (src/app) and Application Logic (src/service, src/interface, src/guards).
📂 src/service (Application Logic Layer)
The src/service folder contains all business logic and data interaction layers. Services handle API communication, global state, authentication logic and cross-feature utilities. They are completely independent of the UI structure inside src/app. This prevents circular dependencies and keeps the architecture scalable.
📂 src/interface (Domain Models)
The src/interface folder defines global TypeScript models and contracts. These interfaces describe how data flows through the application. By keeping them at root level (outside src/app), they become reusable across features, services, guards and environment configurations.
📂 src/guards (Route Protection Layer)
The src/guards folder contains navigation protection logic. Guards act as a bridge between routing and authentication services. They do not contain UI logic — they only decide whether access is granted.
📂 src/app (UI & Feature Layer)
The src/app folder represents the visual layer of the application. Here you will find feature modules like auth, user, dialogs, and reusable UI components inside shared. This layer consumes services and interfaces but does not define core business logic.
📂 src/environments (Configuration Layer)
The src/environments folder manages environment-specific configuration like API base URLs and production flags. This ensures that switching between development and production requires no code changes in services.
📂 public (Static Assets & Server Config)
The public folder contains static resources such as images, fonts, as well as server-related configuration files like .htaccess and robots.txt. These files are directly served by the web server and are not part of the Angular build output.
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.