How mathisgarberg/angular-folder-structure works
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: app-routing.module.ts Application routes · app.module.ts App module · auth.routing.ts Auth routes · project.service.ts Project service
Components 32
Application shell
- App bootstrap
src/main.ts - Application routes
src/app/app-routing.module.ts - App module
src/app/app.module.ts - Content layout
src/app/layout/content-layout/content-layout.component.ts - Auth layout
src/app/layout/auth-layout/auth-layout.component.ts - Navigation
src/app/layout/nav/nav.component.ts - Footer
src/app/layout/footer/footer.component.ts
User features
- Auth routes
src/app/modules/auth/auth.routing.ts - Login page
src/app/modules/auth/page/login/login.component.ts - Register page
src/app/modules/auth/page/register/register.component.ts - Project dashboard
src/app/modules/home/page/home.component.ts - Project details
src/app/modules/home/page/project-details/project-details.component.ts - Project item
src/app/modules/home/page/project-item/project-item.component.ts - Project resolver
src/app/modules/home/project-resolver.service.ts - About page
src/app/modules/about/page/about/about.component.ts - Contact page
src/app/modules/contact/page/contact/contact.component.ts
Data access
- Project service
src/app/data/service/project.service.ts - JSON API service
src/app/data/service/json-api.service.ts - Project schema
src/app/data/schema/project.ts - User service
src/app/data/service/user.service.ts - User schema
src/app/data/schema/user.ts
Core and shared
- Auth service
src/app/core/service/auth.service.ts - Route guards
src/app/core/guard/auth.guard.ts - No-auth guard
src/app/core/guard/no-auth.guard.ts - Module guard
src/app/core/guard/module-import.guard.ts - Token interceptor
src/app/core/interceptor/token.interceptor.ts - Theme service
src/app/core/service/theme.service.ts - Validation service
src/app/shared/service/validation.service.ts - Control messages
src/app/shared/component/control-messages/control-messages.component.ts - Spinner
src/app/shared/component/spinner/spinner.component.ts - Environment config
src/environments/environment.ts
Other components
- Visitor
Connections 22
- Visitor → Application routes: navigates
- App bootstrap → App module: bootstraps
src/main.ts - Application routes → Content layout: routes through
src/app/app-routing.module.ts - Application routes → Auth layout: routes through
src/app/app-routing.module.ts - Application routes → No-auth guard: guards routes
src/app/app-routing.module.ts - App module → Content layout: declares
src/app/app.module.ts - App module → Auth layout: declares
src/app/app.module.ts - App module → Navigation: declares
src/app/app.module.ts - App module → Footer: declares
src/app/app.module.ts - Application routes → Auth routes: loads
src/app/app-routing.module.ts - Auth routes → Login page: routes to
src/app/modules/auth/auth.routing.ts - Auth routes → Register page: routes to
src/app/modules/auth/auth.routing.ts - Application routes → Project dashboard: loads feature
src/app/app-routing.module.ts - Application routes → About page: loads feature
src/app/app-routing.module.ts - Application routes → Contact page: loads feature
src/app/app-routing.module.ts - Project resolver → Project service: fetches project
src/app/modules/home/project-resolver.service.ts - Project service → JSON API service: requests data
src/app/data/service/project.service.ts - Project service → Project schema: returns model
src/app/data/service/project.service.ts - Project dashboard → Project resolver: uses resolver
src/app/modules/home/home.routing.ts - Project details → Project resolver: uses resolver
src/app/modules/home/home.routing.ts - Content layout → Theme service: reads theme
src/app/layout/content-layout/content-layout.component.ts - Control messages → Validation service: uses validation
src/app/shared/component/control-messages/control-messages.component.ts