When to Use
- User asks "where is..." or "where should I put..."
- User needs to understand the project organization
- User asks about naming conventions
- User needs to navigate between layers (Aurora, Fuse, Apps)
- User is new to Aurora Angular architecture
Critical Patterns
Layer Responsibilities
| Layer |
Path |
Responsibility |
Can Modify? |
| @fuse |
src/@fuse/ |
Fuse template library (animations, core components, services) |
NO (template) |
| @aurora |
src/@aurora/ |
Aurora framework (reusable components, modules, services) |
Exceptionally |
| Apps |
src/app/modules/admin/apps/ |
Business domain modules (generated + custom) |
YES (handlers) |
| Core |
src/app/core/ |
App core (auth, navigation, icons, transloco) |
Exceptionally |
| Layout |
src/app/layout/ |
Layout components (header, sidebar, settings) |
Exceptionally |
Module File Pattern
Each module in apps/[bounded-context]/[module]/ follows this structure:
[module]-detail.component.ts # Detail/Edit view (extends ViewDetailComponent)
[module]-detail.component.html # Detail template
[module]-list.component.ts # List view (extends ViewBaseComponent)
[module]-list.component.html # List template with au-grid
[module].columns-config.ts # Grid column definitions
[module].graphql.ts # GraphQL queries and mutations
[module].resolvers.ts # Route resolvers
[module].service.ts # CRUD service with Apollo
index.ts # Barrel exports
public-api.ts # Public API exports
Project Structure
cliter/ # Aurora YAML Definitions
├── [bounded-context]/
│ ├── [module].aurora.yaml # Module definition (source of truth)
│ └── [module]-lock.json # Generation lock file
│
src/
├── @fuse/ # Fuse Template Library (DO NOT MODIFY)
│ ├── animations/ # Animation utilities
│ ├── components/ # Core UI components
│ │ ├── alert/ # Alert component
│ │ ├── card/ # Card component
│ │ ├── confirmation/ # Confirmation dialog
│ │ ├── drawer/ # Drawer/sidebar component
│ │ ├── fullscreen/ # Fullscreen toggle
│ │ ├── highlight/ # Syntax highlighting
│ │ ├── loading-bar/ # Loading indicator
│ │ ├── masonry/ # Masonry grid layout
│ │ └── navigation/ # Navigation components
│ │ ├── horizontal/ # Horizontal nav
│ │ └── vertical/ # Vertical nav
│ ├── directives/ # Custom directives
│ │ ├── scroll-reset/ # Reset scroll position
│ │ └── scrollbar/ # Custom scrollbar
│ ├── lib/ # Libraries
│ │ └── mock-api/ # Mock API utilities
│ ├── pipes/ # Common pipes
│ ├── services/ # Core services
│ │ ├── config/ # App configuration
│ │ ├── confirmation/ # Confirmation service
│ │ ├── loading/ # Loading service
│ │ ├── media-watcher/ # Responsive breakpoints
│ │ ├── platform/ # Platform detection
│ │ ├── splash-screen/ # Splash screen
│ │ └── utils/ # Utility functions
│ ├── styles/ # SCSS styles
│ │ ├── components/ # Component styles
│ │ └── overrides/ # Material overrides
│ ├── tailwind/ # Tailwind plugins
│ │ ├── plugins/ # Custom plugins (theming, utilities)
│ │ └── utils/ # Tailwind utilities
│ └── validators/ # Form validators
│
├── @aurora/ # Aurora Framework Library
│ ├── components/ # Reusable UI Components
│ │ ├── attachments/ # File attachments
│ │ ├── breadcrumb/ # Breadcrumb navigation
│ │ ├── chat-timeline/ # Chat/timeline component
│ │ ├── datepicker/ # Custom datepicker
│ │ ├── dialog/ # Dialog wrapper
│ │ ├── file-upload/ # File upload component
│ │ ├── flag-icon/ # Country flag icons
│ │ ├── grid/ # Main grid component
│ │ │ ├── grid/ # Core grid
│ │ │ ├── grid-columns-config/ # Column configuration
│ │ │ ├── grid-filters-dialog/ # Filter dialog
│ │ │ ├── grid-search/ # Search component
│ │ │ ├── grid-translations/ # i18n support
│ │ │ ├── directives/ # Grid directives
│ │ │ └── pipes/ # Grid pipes
│ │ ├── grid-dialog/ # Grid in dialog
│ │ ├── grid-elements-manager/ # Element manager grid
│ │ ├── grid-select-element/ # Single selection grid
│ │ ├── grid-select-multiple/ # Multiple selection grid
│ │ ├── image-input/ # Image input control
│ │ ├── image-preview-overlay/ # Image preview
│ │ ├── password-strength/ # Password strength indicator
│ │ ├── phone-number-format/ # Phone formatting
│ │ ├── slug/ # URL slug generator
│ │ ├── split-button/ # Split button
│ │ ├── title/ # Page title
│ │ ├── validation-messages/ # Form validation messages
│ │ └── version-input/ # Version input (x.y.z)
│ ├── decorators/ # Custom decorators
│ ├── directives/ # Custom directives
│ │ ├── decimal.directive.ts # Decimal input
│ │ ├── focus.directive.ts # Auto focus
│ │ └── scroll-end.directive.ts # Infinite scroll
│ ├── foundations/ # Base classes and interfaces
│ │ └── interfaces/ # Common interfaces
│ ├── modules/ # Feature modules
│ │ ├── authentication/ # Auth adapters
│ │ ├── authorization/ # Permissions (can pipe)
│ │ ├── graphql/ # Apollo GraphQL setup
│ │ ├── iam/ # IAM adapters
│ │ ├── lang/ # Language services
│ │ ├── ms-entra-id/ # Azure AD integration
│ │ ├── routing/ # Route services
│ │ ├── session/ # Session management
│ │ └── action/ # Action service
│ ├── pipes/ # Common pipes
│ │ ├── date-format.pipe.ts # Date formatting
│ │ ├── get.pipe.ts # Object property getter
│ │ ├── safe.pipe.ts # Sanitizer pipe
│ │ └── truncate-words.pipe.ts # Text truncation
│ ├── providers/ # Angular providers
│ ├── services/ # Core services
│ │ ├── action.service.ts # Action dispatcher
│ │ ├── download.service.ts # File download
│ │ └── initializerService.service.ts # App initializer
│ └── styles/ # Aurora styles
│ ├── layout.scss # Grid layout system
│ ├── themes.scss # Theme configuration
│ └── overrides/ # Style overrides
│
├── app/
│ ├── core/ # Application Core
│ │ ├── auth/ # Authentication
│ │ │ └── guards/ # Route guards
│ │ ├── icons/ # Icon registration
│ │ ├── navigation/ # Navigation data
│ │ ├── transloco/ # i18n configuration
│ │ └── user/ # User service
│ │
│ ├── layout/ # Layout Components
│ │ ├── common/ # Common layout parts
│ │ │ ├── languages/ # Language selector
│ │ │ ├── messages/ # Messages dropdown
│ │ │ ├── notifications/ # Notifications
│ │ │ ├── quick-chat/ # Quick chat
│ │ │ ├── search/ # Search bar
│ │ │ ├── settings/ # Theme settings
│ │ │ ├── shortcuts/ # Shortcuts menu
│ │ │ └── user/ # User menu
│ │ └── layouts/ # Layout variants
│ │ ├── empty/ # Empty layout (login)
│ │ ├── horizontal/ # Horizontal navigation
│ │ │ ├── centered/ # Centered content
│ │ │ ├── enterprise/ # Enterprise layout
│ │ │ ├── material/ # Material style
│ │ │ └── modern/ # Modern style
│ │ └── vertical/ # Vertical navigation
│ │ ├── classic/ # Classic sidebar
│ │ ├── classy/ # Classy style
│ │ ├── compact/ # Compact sidebar
│ │ ├── dense/ # Dense sidebar
│ │ ├── futuristic/ # Futuristic style
│ │ └── thin/ # Thin sidebar
│ │
│ ├── mock-api/ # Mock API Data (development)
│ │ ├── apps/ # App mock data
│ │ ├── common/ # Common mock data
│ │ ├── dashboards/ # Dashboard mock data
│ │ └── ui/ # UI mock data
│ │
│ └── modules/ # Feature Modules
│ ├── admin/ # Admin section
│ │ ├── apps/ # Business Domain Modules
│ │ │ ├── [bounded-context]/ # Bounded context folder
│ │ │ │ ├── [bounded-context].component.ts # Container component
│ │ │ │ ├── [bounded-context].routes.ts # Module routes
│ │ │ │ ├── [bounded-context].types.ts # TypeScript types
│ │ │ │ ├── shared/ # Shared module resources
│ │ │ │ └── [module]/ # Entity module
│ │ │ │ ├── [module]-detail.component.ts
│ │ │ │ ├── [module]-detail.component.html
│ │ │ │ ├── [module]-list.component.ts
│ │ │ │ ├── [module]-list.component.html
│ │ │ │ ├── [module].columns-config.ts
│ │ │ │ ├── [module].graphql.ts
│ │ │ │ ├── [module].resolvers.ts
│ │ │ │ ├── [module].service.ts
│ │ │ │ ├── index.ts
│ │ │ │ └── public-api.ts
│ │ │ │
│ │ │ ├── auditing/ # Audit logs
│ │ │ ├── common/ # Common entities (country, lang)
│ │ │ ├── iam/ # Identity & Access Management
│ │ │ ├── message/ # Messaging system
│ │ │ ├── o-auth/ # OAuth management
│ │ │ ├── queue-manager/ # Job queues
│ │ │ ├── search-engine/ # Search configuration
│ │ │ ├── settings/ # User settings
│ │ │ ├── support/ # Support/Issues
│ │ │ └── tools/ # Admin tools
│ │ │
│ │ ├── example/ # Example components
│ │ ├── kitchen-sink/ # Component showcase
│ │ └── pages/ # Static pages
│ │
│ ├── auth/ # Authentication pages
│ │ ├── confirmation-required/ # Email confirmation
│ │ ├── forgot-password/ # Password reset request
│ │ ├── reset-password/ # Password reset
│ │ ├── sign-in/ # Login
│ │ ├── sign-out/ # Logout
│ │ ├── sign-up/ # Registration
│ │ └── unlock-session/ # Session unlock
│ │
│ └── landing/ # Public landing pages
│ └── home/ # Home page
│
├── assets/ # Static assets
│ ├── fonts/ # Custom fonts
│ ├── i18n/ # Translation files
│ │ ├── en.json # English translations
│ │ └── es.json # Spanish translations
│ ├── icons/ # SVG icons
│ └── images/ # Images
│
├── environments/ # Environment configurations
│ ├── environment.ts # Default environment
│ ├── environment.development.ts # Development
│ ├── environment.localhost.ts # Local development
│ ├── environment.production.ts # Production
│ └── environment.quality.ts # QA environment
│
├── index.html # Main HTML file
├── main.ts # Application bootstrap
└── styles.scss # Global styles
Module File Naming Convention
Components
[module]-detail.component.ts # Detail view (create/edit)
[module]-detail.component.html # Detail template
[module]-list.component.ts # List view with grid
[module]-list.component.html # List template
[module]-dialog.component.ts # Optional dialog component
Services and Configuration
[module].service.ts # CRUD service with Apollo GraphQL
[module].graphql.ts # GraphQL queries and mutations
[module].resolvers.ts # Route resolvers for data loading
[module].columns-config.ts # Grid column configuration
Exports
index.ts # Barrel exports for module
public-api.ts # Public API exports
Decision Tree: Where to Put Code?
Need to add a new field/entity?
→ Modify cliter/[bounded-context]/[module].aurora.yaml
→ Run Aurora CLI to regenerate
Need custom business logic in component?
→ Add to handleAction() method in component
→ Or create a shared service in [bounded-context]/shared/
Need a reusable UI component?
→ Add to src/@aurora/components/
Need a custom pipe or directive?
→ src/@aurora/pipes/ or src/@aurora/directives/
Need to modify grid columns?
→ Edit [module].columns-config.ts
Need custom GraphQL query?
→ Add to [module].graphql.ts
Need new route?
→ Modify [bounded-context].routes.ts
Need to add translations?
→ Edit src/assets/i18n/[lang].json
Need to modify layout/theme?
→ Check src/app/layout/ and src/@fuse/styles/
Key Base Components
| Component |
Purpose |
Extend When |
ViewDetailComponent |
Detail/edit forms |
Creating entity detail views |
ViewBaseComponent |
List views |
Creating entity list views |
GridComponent |
Data grid |
Displaying tabular data |
ViewDetailComponent Pattern
export class CountryDetailComponent extends ViewDetailComponent
{
breadcrumb: Crumb[] = [...];
managedObject: Country;
constructor(private readonly countryService: CountryService) { super(); }
init(): void { /* After ngOnInit */ }
createForm(): void { this.fg = this.fb.group({...}); }
async handleAction(action: Action): Promise<void> { /* Handle CRUD */ }
}
ViewBaseComponent Pattern
export class CountryListComponent extends ViewBaseComponent
{
gridId: string = 'common::country.list.mainGridList';
gridData$: Observable<GridData<Country>>;
originColumnsConfig: ColumnConfig[] = [...];
async handleAction(action: Action): Promise<void> { /* Handle actions */ }
}
Quick Navigation Commands
# Find all files for a module
fd "country" src/app/modules/admin/apps/
# Find all components
fd ".component.ts$" src/app/modules/admin/apps/
# Find all services
fd ".service.ts$" src/
# Find YAML definitions
ls cliter/*/
# Find GraphQL files
fd ".graphql.ts$" src/
# Find column configurations
fd ".columns-config.ts$" src/
Path Aliases
| Alias |
Path |
Usage |
@apps/* |
src/app/modules/admin/apps/* |
Business modules |
@core/* |
src/app/core/* |
Core functionality |
@aurora |
src/@aurora/ |
Aurora framework |
@fuse |
src/@fuse/ |
Fuse template |
import { GridComponent, ActionService } from '@aurora';
import { CountryService } from '@apps/common/country';
import { AuthService } from '@core/auth';
Resources
- YAML Definitions: See
cliter/[bounded-context]/[module].aurora.yaml
- Aurora Components: See
src/@aurora/components/
- Fuse Template: See
src/@fuse/
- Layouts: See
src/app/layout/layouts/
- Translations: See
src/assets/i18n/
