Architecture
Stack
- Angular 20, composants standalone (pas de NgModules).
- Signals pour le state.
- SCSS pour le style - pas de Tailwind.
- FontAwesome via
@fortawesome/angular-fontawesome. @ngx-translatepour l'i18n.- Construit avec le builder
@angular/build:application; Bun comme gestionnaire de paquets.
Organisation
Le code source de l'application se trouve dans src/app/ :
app.ts,app.config.ts,app.routes.ts- composant racine, providers, routing.app.config.server.ts,app.routes.server.ts- configuration du rendu côté serveur (SSR).components/- éléments d'UI réutilisables (hero,features,faq,screenshots,download,navigation,footer,legal,language-switcher,theme-toggle).pages/- vues routées (home,not-found).services/- services singleton (language,theme).
Conventions de code Angular 20
Ces conventions sont obligatoires pour toutes les contributions.
Composants
- Uniquement des composants standalone. Ne mets pas
standalone: truedans les décorateurs - c'est la valeur par défaut. - Utilise les fonctions
input()/output()plutôt que les décorateurs@Input()/@Output(). - Configure
changeDetection: ChangeDetectionStrategy.OnPush. - Garde les composants petits et à responsabilité unique ; privilégie les templates inline pour les petits composants.
- Privilégie les Reactive Forms aux formulaires template-driven.
- Place les host bindings dans l'objet
hostdu décorateur - n'utilise pas@HostBinding/@HostListener. - Utilise les bindings
classetstyle- pasngClass/ngStyle. - Utilise
NgOptimizedImagepour les images statiques (remarque : ne fonctionne pas pour les images en base64 inline). - Mets en place le lazy loading pour les routes de feature.
State
- Utilise les signals pour le state local des composants et
computed()pour le state dérivé. - N'utilise pas
mutatesur les signals - utiliseupdateouset. - Garde les transformations de state pures et prévisibles.
Templates
- Utilise le control flow natif (
@if,@for,@switch) - pas*ngIf/*ngFor/*ngSwitch. - Utilise le pipe
asyncpour les observables. Garde les templates exempts de logique complexe.
Services
- Responsabilité unique ;
providedIn: 'root'pour les singletons. - Utilise la fonction
inject()plutôt que l'injection par constructeur.
TypeScript
- Vérification de type stricte. Privilégie l'inférence de type quand elle est évidente.
- Évite
any; utiliseunknownquand le type est incertain.
