Claude Code’u Angular projesinde kullanmak için terminalde proje kökünde claude komutunu çalıştırın ve proje köküne CLAUDE.md dosyası koyarak Angular’a özgü komutları, klasör yapısını ve kuralları tanımlayın. Bu sayede ajan, standalone component mantığını, DI, signals ve RxJS kullanımını bilerek görevleri daha az hata ile tamamlar. Aşağıda kurulabilir bir çalışma düzeni, örnek promptlar ve dikkat edilecek noktalar var.
Claude Code neden Angular işine uygun
Angular, TypeScript’in tam gücünü kullanan, şablon ve sınıf ayrımı net olan bir çatıdır. Claude Code, proje dosyalarını okur; tsconfig.json, angular.json ve CLAUDE.md içeriğine göre hareket eder. Angular CLI’nin ürettiği yapıyı bilir; ng generate ile benzer component, service, guard ve pipe iskeletlerini çıkarabilir. En önemli avantajı, DI zincirini takip edip eksik providedIn veya import hatalarını düzeltebilmesi, signals ile RxJS arasında doğru seçimi yapmak için yönlendirilebilmesidir. Örneğin, UserService’i inject ile alan bir standalone component istediğinizde @Component decorator’ünü, imports dizisini ve şablonu birlikte üretir; HttpClient çağrısını toSignal ile signals’e bağlayabilir. RxJS tabanlı eski bir component’i signals’e geçirirken mevcut subscription’ları kaldırmayı ve computed ile türetilmiş state’i güncellemeyi planlayabilir. Ayrıca testleri çalıştırıp başarısız assertion’ları okuyarak düzeltme önerebilir.
Bu yetenekler, Claude Code’un Angular ekiplerindeki en büyük sıkıntı olan küçük tekrarlı görevleri üstlenmesini sağlar. Örneğin, 12 component’i signals’e geçirme veya HttpClient servislerine error handling ekleme gibi işleri hızlıca yapar; siz yalnızca diff’i inceleyip commitlersiniz. Böylece mimari kararlara odaklanabilirsiniz.
Angular’ın katmanlı yapısı burada avantajdır: component, service, module veya standalone import gibi kavramlar net sınırlara sahiptir. Claude Code bu sınırlara uyar; yanlış yerde service oluşturmaz, imports dizisine eksik modül eklemez. Ancak yine de ürettiği kodu gözden geçirmek gerekir; özellikle şablon içindeki tip kontrolleri strictTemplates ile sıkı tutulduğunda hatalar çıkabilir. Ajan bu hataları ng build çıktısından okuyup düzeltebilir, fakat siz de kontrol etmelisiniz.
Projeyi ajana hazırlama: CLAUDE.md
Claude Code, her çalıştırmada proje kökündeki CLAUDE.md dosyasını okur. Bu dosya ne kadar Angular’a özgü olursa ajan o kadar az yanlış varsayım yapar. İçine mutlaka şunları yazın: kullandığınız paket yöneticisine göre kurulum, build, test ve lint komutları; klasör yapısı; standalone component, signals, DI ve RxJS kullanım kuralları; Jasmine mi Jest mi kullandığınız. Örnek bir CLAUDE.md:
# CLAUDE.md
## Komutlar
- Kurulum: `npm install`
- Geliştirme sunucusu: `ng serve`
- Derleme: `ng build --configuration production`
- Test: `ng test --watch=false --browsers=ChromeHeadless`
- Lint: `ng lint`
## Klasör yapısı
- `src/app/features/` her özellik için ayrı klasör
- `src/app/shared/` ortak bileşenler, direktifler, pipe'lar
- `src/app/core/` singleton servisler, guard'lar, interceptor'lar
## Angular kuralları
- Yeni bileşenler standalone olmalı; `imports` ile bağımlılıklar açıkça eklenmeli.
- Servisler `providedIn: 'root'` ile sağlanmalı; testlerde `TestBed.inject` kullanılmalı.
- Durum yönetimi için signals tercih edilmeli; RxJS yalnızca async akışlarda kullanılmalı.
- Şablonlarda tip güvenliği için `strictTemplates` açık; `any` kullanma.
- Testler Jasmine ile `describe`/`it` yazılmalı ve her yeni özellik ile birlikte unit test güncellenmeli.Bu dosyayı güncel tutun; özellikle test komutlarını doğru verirseniz (headless Chrome gibi) ajan testleri kendisi çalıştırabilir. Eğer Jest kullanıyorsanız npm test -- --watch=false gibi uyarlayın. Ayrıca, birden fazla Angular projesi olan bir monorepo’da her proje için ayrı CLAUDE.md veya ortak kurallar ekleyebilirsiniz. Unutmayın: ajan bu dosyayı her seferinde okur; kısa ama net kurallar en iyisidir.
Çalışma döngüsü ve örnek promptlar
Angular’da Claude Code ile verimli çalışmanın anahtarı, görevi küçük adımlara bölmek ve her adımdan sonra test + diff incelemesi yapmaktır. Şu döngüyü izleyin:
- Ajanla sorunu netleştirin: hangi dosyaların değişeceğini sorun.
- Tek küçük değişiklik isteyin; örneğin, bir component’i standalone yapmak.
- Değişiklikten sonra
ng testveng lintçalıştırın. - Diff’i inceleyin, yanlış anlaşılmaları düzeltin.
- Onay verin ve bir sonraki adıma geçin.
Aşağıdaki tablo, tipik Angular görevleri için iyi prompt örnekleri sunar:
| Görev | Etkili prompt |
|---|---|
| RxJS’ten signals’e geçiş | “UserListComponent içindeki BehaviorSubject<user[]>’i signal ve computed ile değiştir; subscription’ları kaldır ve şablonda async pipe yerine signals kullan.” |
| Standalone component’e dönüştürme | “ProductCardComponent’i standalone yap, gerekli imports dizisini ekle, NgModule referansını kaldır.” |
| Yeni servis ekleme | “AuthService’i providedIn: 'root' ile oluştur; login() metodu HttpClient kullansın, hata durumunda throwError döndürsün.” |
| Guard yazma | “canActivate fonksiyonuna sahip authGuard oluştur; AuthService’teki isLoggedIn signal’ini kontrol etsin ve yönlendirme yapsın.” |
| Test ekleme | “ProductListComponent için TestBed ile ProductService mock’lanmış bir test yaz; products signal’inin render edildiğini doğrula.” |
| Input/output dönüşümü | “ChildComponent’in @Input değerini signal ile değiştir; @Output event emitter’ı output() fonksiyonuyla güncelle.” |
Bu promptlar, ajanın Angular’a özgü bağlamı anlamasını sağlar. Her istekte dosya adı ve beklenen davranışı açıkça belirtin. Komut listesi için Claude Code komutları sayfasına bakabilirsiniz.
Ayrıca, ajanı plan moduna alıp önce dosya listesi ve değişiklik özeti istemek, büyük işlerde hata riskini azaltır. Claude Code plan modu yazısında bu yöntem anlatılıyor.
Hangi görevlerde iyi, nelere dikkat etmeli
Claude Code, tekrarlı ve yapısal işlerde başarılıdır: standalone component üretimi, DI servisleri, guard/interceptor yazımı, karmaşık RxJS zincirlerini signals’e çevirme, Jasmine/Jest testlerini doldurma. Ayrıca template üzerindeki tip hatalarını (ng build hataları) okuyup düzeltebilir.
Ancak şu noktalara dikkat edin:
- Template tip güvenliği: Ajan bazen
strictTemplatesaltında hata verecek şablonlar üretebilir; sonrang buildile kontrol etmek şart. - RxJS ve signals karışımı: Ajan, gereksiz yere
toSignalveyatoObservablekullanabilir; state türetme mantığını karıştırabilir. Kodu satır satır inceleyin. - DI hataları: Özellikle lazy loading modüllerinde veya standalone component’lerde eksik
providedInveya unutulanimportyaygındır; derleme hatasıyla kendini gösterir. - Büyük refactor’lar: Ajan tek seferde 20 dosyayı değiştirirse hata riski artar; refactor’u component bazında adımlara bölün.
- Test kalitesi: Ajan, istenen assertion’ı yazabilir ama bazen testin gerçekten niyeti karşılayıp karşılamadığını kontrol etmeniz gerekir; özellikle DOM assertion’ları kırılgan olabilir.
- RxJS operatör zincirleri: Karmaşık
switchMap,mergeMapveyacombineLatestiçeren kodları dönüştürürken yan etkileri gözden kaçırabilir. Önce davranışı test eden birim testler yazın, sonra dönüştürme yaptırın.
Bu tuzaklara rağmen, düzenli diff incelemesi ve test koşumu ile güvenle kullanılabilir. Ajanı bir çalışan gibi düşünün: küçük iş verin, sonucu doğrulayın.
Test ve doğrulama süreci
Angular projelerinde Claude Code ile değişiklik yaparken doğrulama adımlarını asla atlamayın. Ajan kodu yazdıktan sonra şu sırayı izleyin:
ng build --configuration production(veya en azındanng build) çalıştırın; template type-check hatalarını yakalar.ng test --watch=falseile unit testleri koşun; başarısız test varsa ajanın düzeltmesini isteyin.ng lintile kod stilini denetleyin; Angular’a özgü lint kuralları ihlal edilmiş olabilir.- Eğer değişiklik UI içeriyorsa uygulamayı
ng serveile açıp manuel kontrol edin.
Ajan, test çıktılarını okuyabilir; örneğin, “ng test şu hatayı verdi: Expected true to be false” diyerek doğrudan düzeltme isteyebilirsiniz. Ancak son karar her zaman sizde olsun; ajan ‘her şey geçti’ dese bile diff’i gözden geçirin. E2E testleriniz varsa (Cypress, Playwright) ajan bu komutları da çalıştırabilir, ancak CLAUDE.md’ye eklemelisiniz. Daha fazla pratik ipucu için Claude Code en iyi pratikler yazısını okuyabilirsiniz.
Doğrulama sürecinde şu emirleri uygulayın: ajanın eklediği her yeni component için bir spec dosyası isteyin; testlerde TestBed.configureTestingModule ile servisleri mock’layın; fixture.detectChanges() çağrılarını kontrol edin. Ajan bunları yapmayı bilir, ancak siz de gözden geçirin.
Aynı Angular projesinde birden fazla ajanı AgentVera ile çalıştırma
AgentVera, birden fazla Claude Code oturumunu aynı Angular projesinde paralel çalıştırmanıza olanak tanır; her ajan kendi git worktree’sinde çalıştığı için dosya çakışmaları olmaz. Ajan bir görevi bitirdiğinde ikinci bir model otomatik kod incelemesi yapar ve Angular’a özgü hataları (örneğin eksik imports, yanlış signal kullanımı) dosya:satır olarak işaretler. Checkpoint’ler sayesinde yanlış bir refactor’u tek tıkla geri alabilir; token bütçeleri ise maliyetinizi kontrol altında tutar. Bu özellikler, Angular’ın katmanlı yapısında paralel işleri güvenle yönetmenizi sağlar.
Sonuç
Claude Code, Angular projelerinde CLAUDE.md ile iyi yapılandırıldığında güçlü bir yardımcıdır. Küçük, net görevler vererek, her adımda test ve diff incelemesi yaparak yüksek kaliteli kod elde edersiniz. Angular’a özgü tuzakları bilmek ve doğrulama disiplinini korumak, bu aracı ekibinizin günlük iş akışına güvenle entegre etmenizi sağlar.