# Architecture

> Standards for Angular project structure, feature modules, and lazy loading.

- Skill: `fierzone/architecture-2` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add fierzone/architecture-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fierzone/architecture-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: fierzone (https://skillmd.com/u/fierzone)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/fierzone/architecture-2

---


# Angular Architecture

## **Priority: P0 (CRITICAL)**

## Principles

- **Feature-Based**: Organize by feature, not type (e.g., `features/dashboard/` containing components, services, and models).
- **Standalone First**: Use Standalone Components/Pipes/Directives. Eliminate `NgModule` unless interacting with legacy libs.
- **Core vs Shared**:
  - `core/`: Global singletons (AuthService, Interceptors).
  - `shared/`: Reusable UI components, pipes, utils (Buttons, Formatters).
- **Smart vs Dumb**:
  - **Smart (Container)**: Talks to services, manages state.
  - **Dumb (Presentational)**: Inputs/Outputs only. No logic.

## Guidelines

- **Lazy Loading**: All feature routes MUST be lazy loaded using `loadComponent` or `loadChildren`.
- **Flat Modules**: Avoid deep nesting of modules.
- **Barrel Files**: Use carefully. Prefer direct imports for better tree-shaking in some build tools (though modern bundlers handle barrels well).

## References

- [Folder Structure](references/folder-structure.md)