# mathisgarberg/angular-folder-structure architecture

> Architecture diagram of the GitHub repository mathisgarberg/angular-folder-structure, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/mathisgarberg/angular-folder-structure
- Repository: https://github.com/mathisgarberg/angular-folder-structure

## Overview

This repository is an Angular demonstration app accompanying a scalable folder-structure proposal. Its principal workflow routes visitors into the authentication screens or the project dashboard; the dashboard resolves project data through a service backed by bundled JSON. About and contact pages, shared validation, layouts, and core theme/auth infrastructure illustrate additional application layers. Edges are limited to relationships shown in excerpts or the source index; unsampled feature details are represented by their exact paths without inferred wiring.

Main entry points: [`src/app/app-routing.module.ts`](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app-routing.module.ts) (Application routes), [`src/app/app.module.ts`](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app.module.ts) (App module), [`src/app/modules/auth/auth.routing.ts`](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/auth.routing.ts) (Auth routes), [`src/app/data/service/project.service.ts`](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/project.service.ts) (Project service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_bootstrap["App bootstrap<br/>[main.ts]"]
  node_routing["Application routes"]
  node_appmodule["App module<br/>[app.module.ts]"]
  node_contentlayout["Content layout"]
  node_authlayout["Auth layout"]
  node_navigation["Navigation<br/>[nav.component.ts]"]
  node_footer["Footer"]
end

subgraph group_features["User features"]
  node_authroutes["Auth routes<br/>[auth.routing.ts]"]
  node_login["Login page<br/>[login.component.ts]"]
  node_register["Register page"]
  node_dashboard["Project dashboard<br/>[home.component.ts]"]
  node_projectdetails["Project details"]
  node_projectitem["Project item"]
  node_projectresolver["Project resolver"]
  node_about["About page<br/>[about.component.ts]"]
  node_contact["Contact page"]
end

subgraph group_data["Data access"]
  node_projectservice["Project service<br/>[project.service.ts]"]
  node_jsonapi["JSON API service"]
  node_projectmodel["Project schema<br/>[project.ts]"]
  node_userdataservice["User service<br/>[user.service.ts]"]
  node_userschema["User schema<br/>[user.ts]"]
end

subgraph group_platform["Core and shared"]
  node_authservice["Auth service<br/>[auth.service.ts]"]
  node_guard["Route guards<br/>[auth.guard.ts]"]
  node_noauthguard["No-auth guard<br/>[no-auth.guard.ts]"]
  node_moduleguard["Module guard"]
  node_interceptor["Token interceptor"]
  node_themeservice["Theme service<br/>[theme.service.ts]"]
  node_validation["Validation service"]
  node_controlmessages["Control messages"]
  node_spinner["Spinner"]
  node_environment["Environment config<br/>[environment.ts]"]
end

node_visitor(("Visitor"))

node_visitor -.->|"navigates"| node_routing
node_bootstrap -->|"bootstraps"| node_appmodule
node_routing -->|"routes through"| node_contentlayout
node_routing -->|"routes through"| node_authlayout
node_routing -->|"guards routes"| node_noauthguard
node_appmodule -->|"declares"| node_contentlayout
node_appmodule -->|"declares"| node_authlayout
node_appmodule -->|"declares"| node_navigation
node_appmodule -->|"declares"| node_footer
node_routing -->|"loads"| node_authroutes
node_authroutes -->|"routes to"| node_login
node_authroutes -->|"routes to"| node_register
node_routing -->|"loads feature"| node_dashboard
node_routing -->|"loads feature"| node_about
node_routing -->|"loads feature"| node_contact
node_projectresolver -->|"fetches project"| node_projectservice
node_projectservice -->|"requests data"| node_jsonapi
node_projectservice -->|"returns model"| node_projectmodel
node_dashboard -->|"uses resolver"| node_projectresolver
node_projectdetails -->|"uses resolver"| node_projectresolver
node_contentlayout -->|"reads theme"| node_themeservice
node_controlmessages -->|"uses validation"| node_validation

click node_bootstrap "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/main.ts"
click node_routing "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app-routing.module.ts"
click node_appmodule "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app.module.ts"
click node_contentlayout "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/content-layout/content-layout.component.ts"
click node_authlayout "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/auth-layout/auth-layout.component.ts"
click node_navigation "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/nav/nav.component.ts"
click node_footer "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/footer/footer.component.ts"
click node_authroutes "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/auth.routing.ts"
click node_login "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/page/login/login.component.ts"
click node_register "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/page/register/register.component.ts"
click node_dashboard "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/home.component.ts"
click node_projectdetails "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/project-details/project-details.component.ts"
click node_projectitem "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/project-item/project-item.component.ts"
click node_projectresolver "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/project-resolver.service.ts"
click node_about "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/about/page/about/about.component.ts"
click node_contact "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/contact/page/contact/contact.component.ts"
click node_projectservice "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/project.service.ts"
click node_jsonapi "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/json-api.service.ts"
click node_projectmodel "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/schema/project.ts"
click node_authservice "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/service/auth.service.ts"
click node_guard "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/auth.guard.ts"
click node_noauthguard "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/no-auth.guard.ts"
click node_moduleguard "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/module-import.guard.ts"
click node_interceptor "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/interceptor/token.interceptor.ts"
click node_themeservice "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/service/theme.service.ts"
click node_validation "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/service/validation.service.ts"
click node_controlmessages "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/component/control-messages/control-messages.component.ts"
click node_spinner "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/component/spinner/spinner.component.ts"
click node_userdataservice "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/user.service.ts"
click node_userschema "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/schema/user.ts"
click node_environment "https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/environments/environment.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_bootstrap,node_routing,node_appmodule,node_contentlayout,node_authlayout,node_navigation,node_footer toneBlue
class node_authroutes,node_login,node_register,node_dashboard,node_projectdetails,node_projectitem,node_projectresolver,node_about,node_contact toneAmber
class node_projectservice,node_jsonapi,node_projectmodel,node_userdataservice,node_userschema toneMint
class node_authservice,node_guard,node_noauthguard,node_moduleguard,node_interceptor,node_themeservice,node_validation,node_controlmessages,node_spinner,node_environment toneRose
class node_visitor toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/main.ts): `src/main.ts`
- [Application routes](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app-routing.module.ts): `src/app/app-routing.module.ts`
- [App module](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/app.module.ts): `src/app/app.module.ts`
- [Content layout](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/content-layout/content-layout.component.ts): `src/app/layout/content-layout/content-layout.component.ts`
- [Auth layout](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/auth-layout/auth-layout.component.ts): `src/app/layout/auth-layout/auth-layout.component.ts`
- [Navigation](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/nav/nav.component.ts): `src/app/layout/nav/nav.component.ts`
- [Footer](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/layout/footer/footer.component.ts): `src/app/layout/footer/footer.component.ts`

### User features

- [Auth routes](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/auth.routing.ts): `src/app/modules/auth/auth.routing.ts`
- [Login page](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/page/login/login.component.ts): `src/app/modules/auth/page/login/login.component.ts`
- [Register page](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/auth/page/register/register.component.ts): `src/app/modules/auth/page/register/register.component.ts`
- [Project dashboard](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/home.component.ts): `src/app/modules/home/page/home.component.ts`
- [Project details](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/project-details/project-details.component.ts): `src/app/modules/home/page/project-details/project-details.component.ts`
- [Project item](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/page/project-item/project-item.component.ts): `src/app/modules/home/page/project-item/project-item.component.ts`
- [Project resolver](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/home/project-resolver.service.ts): `src/app/modules/home/project-resolver.service.ts`
- [About page](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/about/page/about/about.component.ts): `src/app/modules/about/page/about/about.component.ts`
- [Contact page](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/modules/contact/page/contact/contact.component.ts): `src/app/modules/contact/page/contact/contact.component.ts`

### Data access

- [Project service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/project.service.ts): `src/app/data/service/project.service.ts`
- [JSON API service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/json-api.service.ts): `src/app/data/service/json-api.service.ts`
- [Project schema](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/schema/project.ts): `src/app/data/schema/project.ts`
- [User service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/service/user.service.ts): `src/app/data/service/user.service.ts`
- [User schema](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/data/schema/user.ts): `src/app/data/schema/user.ts`

### Core and shared

- [Auth service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/service/auth.service.ts): `src/app/core/service/auth.service.ts`
- [Route guards](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/auth.guard.ts): `src/app/core/guard/auth.guard.ts`
- [No-auth guard](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/no-auth.guard.ts): `src/app/core/guard/no-auth.guard.ts`
- [Module guard](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/guard/module-import.guard.ts): `src/app/core/guard/module-import.guard.ts`
- [Token interceptor](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/interceptor/token.interceptor.ts): `src/app/core/interceptor/token.interceptor.ts`
- [Theme service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/core/service/theme.service.ts): `src/app/core/service/theme.service.ts`
- [Validation service](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/service/validation.service.ts): `src/app/shared/service/validation.service.ts`
- [Control messages](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/component/control-messages/control-messages.component.ts): `src/app/shared/component/control-messages/control-messages.component.ts`
- [Spinner](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/app/shared/component/spinner/spinner.component.ts): `src/app/shared/component/spinner/spinner.component.ts`
- [Environment config](https://github.com/mathisgarberg/angular-folder-structure/blob/master/src/environments/environment.ts): `src/environments/environment.ts`

### Other components

- **Visitor**

## Connections

- Visitor → Application routes: navigates
- App bootstrap → App module: bootstraps (evidence: `src/main.ts`)
- Application routes → Content layout: routes through (evidence: `src/app/app-routing.module.ts`)
- Application routes → Auth layout: routes through (evidence: `src/app/app-routing.module.ts`)
- Application routes → No-auth guard: guards routes (evidence: `src/app/app-routing.module.ts`)
- App module → Content layout: declares (evidence: `src/app/app.module.ts`)
- App module → Auth layout: declares (evidence: `src/app/app.module.ts`)
- App module → Navigation: declares (evidence: `src/app/app.module.ts`)
- App module → Footer: declares (evidence: `src/app/app.module.ts`)
- Application routes → Auth routes: loads (evidence: `src/app/app-routing.module.ts`)
- Auth routes → Login page: routes to (evidence: `src/app/modules/auth/auth.routing.ts`)
- Auth routes → Register page: routes to (evidence: `src/app/modules/auth/auth.routing.ts`)
- Application routes → Project dashboard: loads feature (evidence: `src/app/app-routing.module.ts`)
- Application routes → About page: loads feature (evidence: `src/app/app-routing.module.ts`)
- Application routes → Contact page: loads feature (evidence: `src/app/app-routing.module.ts`)
- Project resolver → Project service: fetches project (evidence: `src/app/modules/home/project-resolver.service.ts`)
- Project service → JSON API service: requests data (evidence: `src/app/data/service/project.service.ts`)
- Project service → Project schema: returns model (evidence: `src/app/data/service/project.service.ts`)
- Project dashboard → Project resolver: uses resolver (evidence: `src/app/modules/home/home.routing.ts`)
- Project details → Project resolver: uses resolver (evidence: `src/app/modules/home/home.routing.ts`)
- Content layout → Theme service: reads theme (evidence: `src/app/layout/content-layout/content-layout.component.ts`)
- Control messages → Validation service: uses validation (evidence: `src/app/shared/component/control-messages/control-messages.component.ts`)