https://github.com/wolf-361/angular-21-standalone-template
Production-ready Angular 21 standalone template with feature-first clean architecture
https://github.com/wolf-361/angular-21-standalone-template
angular angular-material material-design playwright signals standalone starter-kit template typescript vitest
Last synced: 2 months ago
JSON representation
Production-ready Angular 21 standalone template with feature-first clean architecture
- Host: GitHub
- URL: https://github.com/wolf-361/angular-21-standalone-template
- Owner: wolf-361
- Created: 2026-04-20T16:22:16.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-21T15:39:35.000Z (3 months ago)
- Last Synced: 2026-04-21T16:40:24.376Z (3 months ago)
- Topics: angular, angular-material, material-design, playwright, signals, standalone, starter-kit, template, typescript, vitest
- Language: TypeScript
- Homepage: http://angular.wolf-361.ca/
- Size: 347 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular 21 Standalone Template
A production-ready Angular 21 starter with Material M3 theming, feature-first architecture, and a full quality gate out of the box.
---
## Stack
| Layer | Choice |
| :-------------- | :----------------------------------- |
| Framework | Angular 21 (standalone, no NgModule) |
| UI | Angular Material M3 |
| State | Signals + `httpResource()` |
| Styling | SCSS with M3 design tokens |
| Tests | Vitest (unit) · Playwright (e2e) |
| Linting | ESLint + `eslint-plugin-boundaries` |
| Formatting | Prettier |
| Git hooks | Husky + lint-staged + commitlint |
| Package manager | Bun |
---
## Getting started
```bash
bun install
bun run init # interactive theme initializer (palette, font, radius)
bun start # dev server at http://localhost:4200
```
The dev server proxies `/api` → `http://localhost:8080`. Edit `proxy.conf.json` to change the target.
---
## Commands
```bash
bun start # dev server
bun run build # production build
bun test # unit tests (vitest)
bun run test:watch # unit tests in watch mode
bun run test:e2e # Playwright e2e tests
bun run lint # ESLint
bun run format # Prettier
bun run init # re-run theme initializer
```
---
## Architecture
```
src/app/
├── core/ # Singletons: auth, guards, interceptors, layout, theme
├── shared/ # Reusable UI: components (ui-*), directives, models, pipes
└── features/ # One folder per domain
```
Import boundaries are enforced by ESLint:
- `features` → can import `core` and `shared`
- `shared` → cannot import `core` or `features`
- `core` → cannot import `features`
- Features cannot cross-import each other
See [ARCHITECTURE.md](./ARCHITECTURE.md) for the full guide and [docs/adr/](./docs/adr/) for the reasoning behind each decision.
---
## Theming
- 12 built-in Material palettes, switchable at runtime
- Light / dark mode driven by a `dark` class on ``
- All tokens live in `src/styles/_tokens.scss` — edit palette, font, and radius there
- Run `bun run init` for an interactive prompt
---
## Adding a feature
```bash
mkdir -p src/app/features/{name}/{models,services,guards,components,pages}
```
1. Add a `loadComponent` route in `app.routes.ts`
2. Create a service using `httpResource()` for reads, `ApiService` methods for mutations
3. Pages are smart (inject services), components are dumb (`@Input` / `@Output` only)