opencode Angular projelerinde doğrudan terminalde çalışan bir kodlama ajanıdır. Proje klasöründe opencode komutuyla başlattığınızda AGENTS.md dosyasındaki talimatları okur ve Angular CLI komutlarını, testleri ve lint’i çalıştırabilir. Aşağıda standalone component, signal, RxJS ve DI ağırlıklı bir Angular kod tabanında nasıl verimli kullanılacağını anlatıyorum.
Neden opencode Angular işlerine uygun?
Angular projeleri kural ve yapı ağırlıklıdır: dosya isimleri, dekoratörler, DI, module yerine standalone importlar, test dosyaları. opencode terminalde yaşadığı için ng generate, ng test, ng build gibi komutları gerçekten çalıştırabilir ve TypeScript hatalarını okuyup düzeltebilir. Bu, yalnızca kod öneren bir asistan değil, projeyle etkileşime giren bir ajan olmasını sağlar. Angular’ın şablon ve sınıf arasındaki bağlamı koruması gerektiğinde, ajan dosya değişikliklerini kendisi yapıp derleyiciyi çalıştırarak doğrular. Özellikle signal geçişleri, RxJS zincirleri ve test güncellemeleri gibi mekanik ama dikkat gerektiren işlerde hız kazandırır. Daha fazla genel kullanım için opencode nasıl kullanılır? Adım adım rehber sayfasına bakabilirsiniz.
Projeyi ajana hazırlama
opencode’un Angular projenizde doğru kararlar vermesi için AGENTS.md dosyasını deponun köküne koyun. Bu dosyada build, test, lint komutları, klasör kuralları ve Angular’a özgü kısıtlar olsun. Ajan her oturumda bu dosyayı okur; ne kadar net olursa o kadar az düzeltme gerekir. Aşağıdaki örnek, standalone component ve signal kullanan bir proje için kısa ama yeterli bir başlangıç sunar.
# AGENTS.md
## Komutlar
- Kurulum: `npm install`
- Geliştirme sunucusu: `ng serve`
- Build: `ng build --configuration production`
- Test: `ng test --watch=false`
- Lint: `ng lint`
## Klasör yapısı
- `src/app/features/` her özellik kendi klasöründe.
- `src/app/shared/` ortak component, pipe, directive'ler.
- `src/app/core/` servisler, guard'lar, interceptor'lar.
## Angular kuralları
- Yalnızca standalone component, directive ve pipe kullan.
- State için önce signal, karmaşık akışlarda RxJS kullan; ikisini gereksiz karıştırma.
- Component'lerde `changeDetection: ChangeDetectionStrategy.OnPush` varsayılan olsun.
- DI için constructor yerine `inject()` fonksiyonunu kullan.
- Tip güvenliğini bozan `any` kullanma; asla `@ts-ignore` ekleme.
- Yeni dosyalar Angular CLI ile üretilsin: `ng generate component ...` gibi.
- Testler mevcut çalıştırıcıya uygun olsun; her yeni özellik için birim testi güncelle.Bu dosyayı kısa tutun; çelişen kurallar ajanı yavaşlatır.
Çalışma döngüsü
opencode ile Angular’da tek seferde büyük refactor istemek yerine küçük adımlarla ilerleyin. Her adımda önce plan isteyin, sonra değişikliği yapmasını, ardından ilgili testleri çalıştırmasını ve en son diff’i incelemeniz için özetlemesini söyleyin. Bu döngü, template bağlamalarının bozulmasını ve DI hatalarını erken yakalar.
Aşağıdaki tablo tipik görevler için net prompt örneklerini gösterir:
| Görev | Sağlam opencode promptu |
|---|---|
| Mevcut bileşeni signal API’sine geçirmek | “ProductListComponent’i OnPush bırakarak signal tabanlı state’e çevir; product.service’teki BehaviorSubject yerine signal kullan, testleri güncelle ve ng test --watch=false çalıştır.” |
| RxJS zincirini sadeleştirmek | “OrderService’teki getOrderDetails akışını switchMap ve catchError kullanacak şekilde yeniden düzenle; hata durumunda boş dizi dön, ilgili spec dosyasını güncelle.” |
| Yeni standalone pipe eklemek | “CurrencyPipe’i saran ve locale göre kur simgesi ekleyen ‘formatPrice’ adında standalone pipe oluştur, ProductList template’inde kullan ve pipe için birim testi yaz.” |
| Test hatasını çözmek | “Çalışan testlerden biri ExpressionChangedAfterItHasBeenChecked hatası veriyor; önce ilgili testi çalıştır, hatayı analiz et, sonra component veya testte düzeltmeyi öner.” |
Angular’da güçlü olduğu yerler ve dikkat edilecekler
opencode, Angular CLI komutlarını ve dosya üretimini iyi yönetir. Özellikle şu işlerde başarılıdır: standalone component veya pipe oluşturma, mevcut servisi inject() ile DI’a çevirme, RxJS pipe zincirlerini sadeleştirme, @if ve @for gibi yeni kontrol akışı sözdizimine geçiş, test dosyalarını güncelleme. Yine de her çıktıyı gözden geçirin. Angular’a özgü tuzaklar şunlardır:
- Ajan bazen standalone import eklemeyi unutabilir; component’i oluşturur ama
importsdizisine yeni pipe veya directive’i eklemez, runtime’da şablon hatası alırsınız. - Signal ve RxJS birlikte kullanılırken gereksiz
toSignalveyatoObservabledönüşümleri üretebilir; state kaynağını tek yerde tutmak daha iyidir. OnPushkullanırken ajan, mutable veri güncellemesi yaparsa view güncellenmez; bu yüzden signal veya yeni referans döndüren RxJS operator’lerini tercih etmesini isteyin.- Testlerde async/await ile
fixture.whenStable()veyafakeAsync/tickkullanımını karıştırabilir; hata mesajını ajanla paylaşarak düzeltmesini sağlayın. - Angular sürümüne özgü API farkları önemlidir; ajan bazen yeni sözdizimini eski bir projeye uygulayabilir, bu yüzden
ng buildve mevcut testler mutlaka çalıştırılmalıdır.
Test ve doğrulama
opencode’a bir değişiklik yaptırdıktan sonra doğrulamayı hep ajan üzerinden yürütün. Şu sırayı izleyin: değişiklik sonrası ng test --watch=false çalıştırın, ardından ng lint ve ng build --configuration production komutlarını çalıştırmasını isteyin. Test çıktısındaki hataları ajan okusun ve kendi önerdiği düzeltmeyi uygulasın. Angular testleri çoğu zaman template bağlama hatalarını derleme aşamasında değil, test çalışırken ortaya çıkarır; bu yüzden yalnızca build yeterli olmaz. Karmaşık bir RxJS akışında test yazarken, ajanın fakeAsync ve tick kullanmasını isteyin ve fixture.detectChanges() çağrılarını açıkça belirtin. Böylece testler yalnızca çalışmakla kalmaz, gerçek davranışı doğrular. Ajan testin başarısız olduğu noktada durup çıktıyı analiz edebiliyorsa, hata çözüm süresi kısalır.
AgentVera ile paralel Angular çalışması
Angular projelerinde birden fazla işi aynı anda yürütmek istiyorsanız AgentVera kullanışlıdır. Her ajan ayrı bir git worktree içinde çalışabildiği için biri signal geçişi yaparken diğeri form modülünü refactor edebilir ve dosyalar çakışmaz. Ajanın sırası bittiğinde ikinci bir model kod incelemesi yapar ve bulgular file:line olarak gösterilir; bu, Angular’a özgü kaçan import veya OnPush hatalarını yakalar. Checkpoint’ler sayesinde yanlış bir DI değişikliği tek tıkla geri alınabilir ve oturum adım adım tekrar izlenebilir. Token bütçeleri ise uzun refactor sırasında ajanın kontrolden çıkmasını engeller. Paralel ajan kurulumlarıyla ilgili daha fazla bilgi için paralel kodlama ajanları için en iyi araçlar sayfasına bakın.
Sonuç
opencode’u Angular projenizde iyi bir AGENTS.md ile beslediğinizde; standalone component, signal, RxJS ve DI dönüşümlerini hızlı, test edilebilir adımlarla yöneten pratik bir terminal ajanına dönüşür. Önemli olan büyük refactor’ları küçük parçalara bölmek, testleri sürekli çalıştırmak ve Angular’a özgü tuzakları gözden geçirmektir. Bu disiplinle opencode, günlük Angular iş akışının doğal bir parçası olur.