Codex’i bir Angular proje klasöründe codex komutuyla başlatabilirsiniz. Ajan, Codex CLI’ında olduğu gibi proje kökündeki AGENTS.md dosyasını okur; bu yüzden build, test ve lint komutlarını, klasör yapısını ve Angular’a özgü kuralları önceden bu dosyaya yazmak çalışmanın temelini oluşturur. Bu rehberde Codex ile Angular’da verimli çalışmanın pratik yollarını ele alıyoruz.
Codex Angular işleri için neden uygundur
Angular, standalone component, inject() ve signal tabanlı reaktif model gibi güçlü ama katmanlı kurallara sahiptir. Codex, TypeScript ve şablon sözdizimini aynı bağlamda değerlendirebilir; bir servisin constructor’ındaki bağımlılıkları, component’in template’inde kullanılan sinyalleri ve spec dosyasındaki TestBed kurulumunu birlikte düzenleyebilir. Bu, providedIn: 'root' kullanan bir servis ile OnPush bir component arasında tutarlı değişiklik yapmayı kolaylaştırır.
Tekrarlayan işlerde Codex özellikle verimlidir: CRUD servisleri, form componentleri, route tanımları ve test dosyaları hızla üretilebilir. Ancak Angular’ın change detection, injection context ve zoneless davranışları projeden projeye değişebilir; ajan bu kuralları varsayılan bilgisiyle yanlış uygulayabilir. Bu nedenle bağlam mühendisliği disiplinini uygulamak, yani Bağlam mühendisliği: yapay zeka kodlama ajanları rehberi yazısındaki gibi projeye özgü bilgiyi AGENTS.md’de netleştirmek belirleyici olur.
Codex ayrıca Angular CLI komutlarını da çalıştırabilir; ancak ng generate kullanmak yerine dosyaları elle oluşturması, diff’in daha temiz olmasını sağlar. Ajan, ng lint veya ng test çıktısındaki hataları okuyup düzeltebilir; bu da iterasyon hızını artırır.
Projeyi Codex için hazırlama ve AGENTS.md
Codex her oturumda proje kökündeki AGENTS.md dosyasını okur. Angular projesinde bu dosya kısa ama net olmalı; komutlar, klasör kuralları ve Angular’a özgü kararlar tek bakışta anlaşılmalıdır. Aşağıdaki örnek, standalone component kullanan, Jest ve ESLint içeren bir projeye uygundur:
# AGENTS.md
## Proje
Angular v18+ standalone, pnpm, Jest, ESLint, zoneless change detection.
## Komutlar
- Kurulum: `pnpm install`
- Geliştirme: `pnpm start`
- Test (tek çalıştırma): `pnpm test -- --watch=false`
- Lint: `pnpm lint`
- Build: `pnpm build`
## Klasör kuralları
- `src/app/features/` altında her özellik kendi klasöründe.
- Servisler `src/app/core/services/` altında; `providedIn: 'root'` kullan.
- Paylaşılan component ve directive'ler `src/app/shared/`.
## Angular kuralları
- Yeni component'ler standalone olmalı.
- State için Signals kullan; RxJS yalnızca HTTP ve async event akışlarında.
- Component'lerde `changeDetection: ChangeDetectionStrategy.OnPush` tercih et.
- Constructor'da yan etki yok; `inject()` sonrası `ngOnInit` veya computed/effect kullan.
- Subscription'ları `takeUntilDestroyed` ile temizle.
- RxJS pipe'larında hata yakalamayı unutma.Bu dosyayı sürüm kontrolüne ekleyin ve komutlar değiştiğinde güncelleyin. Jasmine kullanıyorsanız test komutunu, npm kullanıyorsanız paket yöneticisini buna göre düzeltin. Gizli bilgi veya ortam değişkeni koymayın; ajan yalnızca proje kurallarını bilmelidir.
AGENTS.md’yi tek başına yeterli görmeyin; özellikle büyük projelerde mimari notları da ekleyin. Örneğin AuthService’in nereden inject edildiği, hangi route’ların lazy olacağı, hangi state yönetim deseninin kullanıldığı ajanın yanlış varsayım yapmasını engeller. Ajan yanlış bir değişiklik yaptığında önce AGENTS.md’de eksik kural olup olmadığını kontrol edin.
Codex ile çalışma döngüsü ve örnek komutlar
Codex’e büyük bir refactor yerine küçük, doğrulanabilir adımlar verin. Her adımdan sonra git diff inceleyin, testleri ve lint’i çalıştırın, ardından bir sonraki adıma geçin. Ajan değişiklik yaparken Angular’a özgü kurallara uydu mu kontrol edin; yalnızca derleme geçmesi yetmez. Aşağıdaki komutlar gerçek Angular görevleri için başlangıç noktasıdır:
Standalone UserListComponent oluştur; users sinyalini @for ile listele, track user.id kullan, OnPush ekle.AuthService içindeki currentUser$ BehaviorSubject'i currentUser adında bir signal'e çevir; tüm kullanımları güncelle ve testleri düzelt.OrderService içindeki HTTP çağrısına retry ve catchError ekle; hata durumunda bir error signal güncelle.Jasmine testlerini Jest'e taşımak için gerekli config değişikliklerini yap; package.json ve AGENTS.md'yi güncelle.Routing'de loadComponent ile lazy loading kullan; route guard'ı canActivate ile ekle.
Her istemden sonra Codex’e ilgili komutu çalıştırmasını söyleyin; örneğin pnpm test -- --watch=false ile testleri koşun ve çıkan hatayı düzeltmesini isteyin. Bu döngü, ajanın yanlış varsayımlarını erken ortaya çıkarır.
Kod incelemesi sırasında git diff çıktısını hızlıca tarayın; özellikle constructor içinde inject dışında işlem yapılıp yapılmadığını ve @for bloklarında track olup olmadığını kontrol edin. Ajanın önerdiği değişiklik testlerden geçse bile Angular’a özgü stil ihlalleri olabilir.
Codex’in iyi yaptığı Angular görevleri ve riskli noktalar
Codex’in Angular’da en güçlü olduğu alanlar, mevcut deseni takip eden yeni component veya servis üretimi, signal dönüşümleri, RxJS akışlarının düzenlenmesi ve test yazımıdır. Aşağıdaki tablo, görevler için iyi istemleri ve dikkat edilmesi gereken Angular’a özgü noktaları özetler:
| Görev | İyi prompt | Dikkat edilecek nokta |
|---|---|---|
| Standalone component | Standalone ProductCardComponent oluştur; @Input() product sinyali, OnPush, track product.id | Eski modül tabanlı projede NgModule import etmeye çalışabilir; AGENTS.md’de standalone zorunlu tutun. |
| Signal dönüşümü | UserService içindeki BehaviorSubject'i signal'e çevir, tüm kullanımları güncelle | Computed/effect içinde yazma yapılmamalı; ajan bazen RxJS operatörünü yanlış bağlayabilir. |
| RxJS akışları | HTTP isteğine switchMap, catchError ve takeUntilDestroyed ekle | Subscription temizliği unutulabilir; testlerde async tamamlanmayabilir. |
| Test yazımı | Jasmine/Jest ile bu servis için mock ve hata durumlarını test et | Angular TestBed kurulumu sürüm farklarına takılabilir; testi çalıştırarak doğrulayın. |
Riskli noktalar çoğunlukla change detection, injection context ve zoneless geçişlerle ilgilidir. Codex, eski Angular bilgisiyle setTimeout içinde değişiklik yapmayı veya ngOnChanges yerine signal hesaplamayı yanlış kullanabilir. Bu nedenle her değişiklikte test ve build çıktısını incelemek gerekir.
Eski Angular sürümlerinde standalone component bulunmaz; ajan güncel sözdizimini eski projeye uygulamaya çalışabilir. Bu nedenle package.json’daki Angular ana sürümünü AGENTS.md’de mutlaka belirtin. Ayrıca zoneless kullanıyorsanız NgZone bağımlı kodlardan kaçınması gerektiğini açıkça yazın.
Angular’da test ve doğrulama
Codex’e her görevin sonunda pnpm test -- --watch=false, pnpm lint ve pnpm build çalıştırmasını söyleyin. Ajan, hata çıktısını okuyup düzeltebilir; siz de terminalde hangi spec’in kaldığını ve neden kaldığını inceleyin. Angular testlerinde TestBed.configureTestingModule ve fixture.detectChanges() kullanımı sürümden sürüme değişebilir; Codex’in yazdığı spec’i gözden geçirmeden kabul etmeyin.
Değişiklikleri git diff ile inceleyin; yalnızca ilgili dosyaların değiştiğinden ve beklenmedik import kaldırma olmadığından emin olun. CI hatalarını ajanın düzeltmesini istiyorsanız CI hatasını yapay zeka düzeltsin, PR yorumunu da yazısındaki yaklaşımı uygulayabilirsiniz. Bir hata tekrar ediyorsa, ilgili kuralı AGENTS.md’ye ekleyin ve ajanın yeni bağlamla düzeltmesini isteyin.
Jasmine’den Jest’e geçiş gibi büyük test altyapısı değişikliklerinde Codex’e adım adım ilerlemesini söyleyin: önce config, sonra bir spec dosyası, sonra tüm suite. Coverage düşmesin istiyorsanız pnpm test -- --coverage komutunu da ekleyin. Ajan bazen mock’ları gerçek servislerle karıştırabilir; test dosyalarında provideHttpClientTesting gibi Angular’a özgü test yardımcılarını kullanmasını isteyin.
Birden fazla ajanı Angular projesinde çalıştırma
Angular projesinde birden fazla Codex ajanını paralel çalıştırmak isterseniz AgentVera gibi bir araç işinize yarar. AgentVera nasıl kullanılır: ilk proje, ajanlar ve ızgara yazısındaki gibi her ajan kendi gerçek terminal panelinde çalışır ve ayrı git worktree kullanabilir; böylece biri signal dönüşümü yaparken diğeri form component’i üzerinde çalışsa bile dosyalar çakışmaz. Ajanın turu bittiğinde ikinci bir model kod incelemesi yapar ve bulguları dosya:satır olarak gösterir; bu, Angular’a özgü change detection hatalarını erken yakalar. Ayrıca checkpoint’ler sayesinde başarısız bir RxJS refactor’ünü tek tıkla geri alabilirsiniz.
Sonuç
Codex, Angular projelerinde AGENTS.md ile doğru beslendiğinde güvenilir bir ekip üyesine dönüşür. Küçük adımlar, test ve diff incelemesi disiplinini koruduğunuz sürece signal dönüşümleri, RxJS akışları ve standalone component işlerini belirgin şekilde hızlandırır. Birden fazla ajanı aynı projede çalıştırmanız gerektiğinde terminal izolasyonu ve worktree kullanımı, Angular’a özgü dosya çakışmalarını önler.