# GitHub Copilot CLI ile Angular Geliştirme Rehberi

Adres: https://agentvera.dev/blog/copilot-cli-ile-angular/ · Yayın: 2026-11-01

Angular projelerinde GitHub Copilot CLI ile nasıl çalışılır? Kurulum, talimat dosyaları, prompt örnekleri, test ve çok ajanlı iş akışı bu rehberde.

**Kısaca:**

- GitHub Copilot CLI, Angular projesinde terminalde copilot ile başlar ve talimat dosyalarındaki kurallara göre bileşen, servis ve test üretir.
- Angular’a özgü ayarları .github/copilot-instructions.md içine yazmak, ajanın standalone component ve DI kurallarına uymasını sağlar.
- Testleri ng test --watch=false ile çalıştırıp diff’i inceleyerek güvenli ve tekrarlanabilir bir döngü kurarsınız.

GitHub Copilot CLI, Angular projesinde terminalde `copilot` komutuyla başlar; proje talimatlarını .github/copilot-instructions.md veya AGENTS.md dosyasından okur. Angular’ın güçlü kuralları sayesinde bileşen, servis, test ve refactor işlerini doğrudan kod tabanında yapar. Genel kurulum ve ilk adımlar için [GitHub Copilot CLI](/ajanlar/copilot-cli/) sayfasına bakabilirsiniz.

## Neden GitHub Copilot CLI Angular işine uygun

Angular projeleri TypeScript, katı klasör yapısı, standalone component desteği, dependency injection ve signals gibi net kurallara sahiptir. GitHub Copilot CLI bu kuralları `tsconfig.json`, `angular.json` ve ESLint konfigürasyonundan okur. Bu sayede ajan, `ng generate component` ile dosya oluşturmak yerine var olan yapıya uyumlu, standalone bir bileşen üretebilir; `imports` dizisini tamamlar, selector ve template dosyasını doğru yerleştirir. Servislerde `providedIn: 'root'` tercih eder, constructor yerine `inject()` kullanabilir ve RxJS akışlarını `signal` veya `computed` yapılarına dönüştürürken import’ları günceller. Angular’ın test altyapısı Jasmine veya Jest fark etmeksizin spec dosyalarını üretir ve `ng test` komutlarıyla doğrular.

Ajan ayrıca Angular CLI’yı doğrudan çalıştırabilir; `ng generate service`, `ng add` gibi komutlar projeye resmi schematic’lerle dosya eklerken kurallara uyumu garanti eder. Büyük refactorlarda TypeScript derleyicisi tarafından yakalanacak hataları önceden tahmin eder, özellikle strict template checking ve standalone migration senaryolarında `ng update` çıktısını yorumlayabilir. Bu, genel amaçlı bir kod üreticiden çok projeye özel bir Angular asistanı gibi çalışmasını sağlar.

## Projeyi ajan için hazırlama

Ajanın Angular’a özgü davranması için repo köküne .github/copilot-instructions.md dosyası ekleyin; AGENTS.md de çalışır ancak GitHub Copilot CLI öncelikle .github/copilot-instructions.md dosyasını arar. Bu dosyada build, test, lint komutlarını, klasör kurallarını ve Angular’a özel kararları kısa maddeler halinde yazın. Talimat dosyası yazımında daha geniş bir rehber için [CLAUDE.md nasıl yazılır? AGENTS.md ve GEMINI.md rehberi](/blog/claude-md-nasil-yazilir/) sayfasına göz atabilirsiniz.

Dosyayı oluştururken ajanın sıkça başvuracağı şu noktaları netleştirin: package manager (npm, pnpm veya yarn), çalıştırılacak test komutu (`npm test -- --watch=false`), lint komutu, build komutu ve ortam değişkenleri. Angular’a özel olarak standalone component kullanımı, signals mı RxJS mi, state yönetim yaklaşımı, hangi Angular sürümü ve strict mod ayarları önemlidir. Eğer projede Angular Material, Tailwind veya NgRx gibi kütüphaneler varsa bunları da belirtin.

Aşağıdaki örnek, gerçek bir Angular reposunda işe yarar:

```markdown
# Angular Proje Talimatları

## Komutlar
- Bağımlılık kur: npm install
- Geliştirme sunucusu: npm start
- Build: npm run build
- Test: npm test -- --watch=false
- Lint: npm run lint
- Format: npm run format

## Klasör kuralları
- src/app/features altına her özellik için ayrı klasör aç
- src/app/shared altına ortak bileşenler, servisler ve directive'ler koy
- Standalone components kullan; NgModule yalnızca gerçekten gerekliyse kullan
- Her feature için `components`, `services`, `models` alt klasörleri oluştur

## Angular kuralları
- Yeni bileşenler `standalone: true` olmalı ve `imports` dizisini açıkça yazmalı
- Servisler `providedIn: 'root'` ile tanımlanmalı; constructor yerine `inject()` kullan
- State yönetimi için signals kullan; RxJS'i yalnızca HTTP ve async event akışlarında kullan
- `any` kullanma; TypeScript strict mode açık; `strictTemplates` etkin
- Her değişiklikte ilgili spec dosyasını güncelle ve `ng test --watch=false` çalıştır
- Angular Material veya taşıma bileşen kullanılıyorsa ilgili import'ları ekle
- Route tanımları lazy loading kullanmalı; `loadComponent` veya `loadChildren` ile yapılmalı
- Formlar için Reactive Forms kullan; template-driven forms tercih etme
```

Bu dosyayı proje geliştikçe güncel tutun. Örneğin yeni bir ESLint kuralı eklediğinizde veya signals geçişi tamamlandığında talimatları yansıtın; böylece ajan gelecekteki değişikliklerde tutarlı kalır.

## Çalışma döngüsü: planla, küçük adımlar, testleri çalıştır, diff’i incele

Ajanla tek seferde büyük bir refactor istemek yerine döngüyü şöyle kurun: önce yapılacak işi net bir prompt ile sınırlandırın, ajanın ürettiği değişiklikleri `git diff` ile inceleyin, ardından testleri çalıştırın. Hata varsa ajanın test çıktısını görmesini sağlayın; çoğu durumda kendi hatasını düzeltir. Her adımda değişiklikleri commit’lemek, geri dönüşü kolaylaştırır.

Prompt yazarken ajanın tam olarak ne yapacağını söyleyin: hangi dosyaları değiştireceği, hangi Angular özelliğini kullanacağı, test isteyip istemediğiniz. Örneğin "AuthService’i signals kullanacak şekilde refactor et, `user` signal’ini expose et, `login` metodunu async yap ve tüm kullanım yerlerini düzelt" demek yeterli değildir; "spec dosyalarını da güncelle, `ng test --watch=false` çalıştır ve çıktıyı göster" eklerseniz ajan kendi kendini doğrular.

Aşağıdaki promptlar Angular projelerinde tipik başlangıç noktalarıdır:

- Angular 17 standalone `UserCardComponent` oluştur; @Input() user sinyali alsın, template’de ad ve e-posta göstersin, spec dosyasını da yaz.
- Mevcut `AuthService`'i signals kullanacak şekilde refactor et; `user` signal’ini expose et, `login` metodunu async güncelle, tüm kullanım yerlerini düzelt ve ilgili spec’leri güncelle.
- `DashboardComponent` içindeki `combineLatest` ile birleştirilen üç observable’ı `computed` sinyale çevir; gereksiz subscription’ları kaldır ve testleri güncelle.
- `TodoService`'e `deleteCompleted` metodu ekle, HTTP DELETE çağrısını yap, ilgili bileşende butona bağla, test yaz ve `ng test --watch=false` çalıştır.
- Angular CLI ile `ProductListComponent`'i standalone oluştur, `ProductService`'i inject et, signal ile ürünleri yönet, `AsyncPipe` yerine `@for` bloğu kullan ve test ekle.

Bu tür spesifik promptlar ajanın odaklanmasını sağlar ve beklenmedik değişiklikleri azaltır.

## Angular’da iyi çözdüğü işler ve dikkat edilmesi gerekenler

Ajan, tekrarlayan üretim işlerinde iyidir; ancak Angular’a özgü bazı tuzaklar vardır. Aşağıdaki tablo, hangi alanda nelere dikkat etmeniz gerektiğini özetler:

| Alan | Ajanın iyi olduğu durum | Dikkat edilmesi gereken |
|---|---|---|
| Standalone component | `imports` dizisini tamamlar, spec üretir | Yanlış modül import’u veya eksik `standalone: true` |
| DI ve servisler | `providedIn: 'root'` ile servis ekler, `inject()` kullanır | Injection context dışında `inject()` çağırabilir, özellikle route guard veya interceptor’larda |
| Signals ve RxJS | `signal`, `computed` dönüşümlerini yapar | `toSignal` / `toObservable` karışıklığı, subscription sızıntısı, effect içinde yanlış state değişimi olabilir |
| Angular CLI | `ng generate` komutlarını çalıştırır, schematic seçeneklerini bilir | Yanlış dosya adı üretebilir, `--dry-run` yapmadan değişiklik uygulayabilir |
| Testler | Jasmine veya Jest spec taslakları üretir, `TestBed` kurulumu yapar | `async` / `fakeAsync` kullanımı, fixture.detectChanges() eksik kalabilir, async pipe testlerinde tick yanlış olabilir |
| Routing ve lazy loading | `loadComponent` ile route tanımları ekler, path parametrelerini çözer | Wildcard route sırası, redirectTo kafa karışıklığı, guard eklemeyi unutabilir |
| Forms ve validation | Reactive forms builder ile form kontrolü oluşturur, validators ekler | Custom validator’larda `this` bağlamı, form array yönetimi, async validator’da hata mesajları |
| Change detection | `OnPush` bileşenlerde `markForCheck` eklemeyi önerir | Gereksiz `ChangeDetectorRef` kullanımı, signal’lerle değişim tespiti kurallarını karıştırabilir |

Özellikle büyük refactorlarda ajanın tüm kullanım yerlerini bulmasını isteyin; `grep` benzeri aramalar için [Yapay zeka ajanları için kod haritası: grep’siz arama](/blog/yapay-zeka-ajanlari-icin-kod-haritasi/) yazısındaki yaklaşımlar işe yarar. Ajanın önerdiği değişiklikleri `git diff` ile satır satır inceleyin; Angular’da yanlış bir import, uygulamanın derlenmesini engelleyebilir. Ayrıca `ng build` sırasında template tip hataları ortaya çıkabilir; ajan her zaman `ng build` çalıştırmayabilir, bu yüzden siz de doğrulayın.

Ajanın signal/RxJS geçişlerinde ürettiği kodda `toSignal` ile `computed` arasında karışıklık olabilir; bu yüzden karmaşık akışlarda testleri mutlaka çalıştırın ve subscription sızıntılarını kontrol edin.

## Test ve doğrulama

Her değişiklikten sonra ajanın testleri çalıştırmasını sağlayın. Jasmine/Karma kullanan projelerde `ng test --watch=false` komutu yeterlidir; Jest kullanıyorsanız `npm test -- --watch=false` çalıştırın. Ajan, test çıktısındaki hataları okuyup düzeltebilir. Ayrıca `npm run build` ile production derlemesini doğrulayın çünkü testler geçse bile Angular şablon tip kontrolü veya eksik import derlemeyi bozabilir. `ng lint` ile kod stilini kontrol edin; ajan bazen import sıralamasını veya kullanılmayan değişkenleri atlayabilir.

Eğer projenizde tarayıcı testleri varsa Playwright veya Cypress gibi araçları devreye alabilirsiniz. Ajan, MCP sunucuları üzerinden tarayıcı otomasyonu da yönetebilir; kurulum için [MCP sunucusu nedir? Kodlama ajanları için kurulum](/blog/mcp-sunucusu-nedir/) yazısına göz atabilirsiniz. Son olarak `git diff --stat` ile değişen dosya sayısını, `git diff` ile içeriği kontrol edin; Angular’da bir bileşenin template’i değiştiyse ilgili spec dosyasının da güncellendiğinden emin olun.

## Birden fazla ajanı tek Angular projesinde çalıştırma: AgentVera

Angular projelerinde birden fazla ajanı paralel çalıştırmak isterseniz AgentVera masaüstü uygulaması, GitHub Copilot CLI dahil gerçek CLI araçlarını tek pencerede ayrı terminal panellerinde çalıştırır. Her ajan kendi git worktree’sinde ilerlediği için aynı dosyaları ezmez; bu, paralel refactor veya feature geliştirmede çakışmaları önler. Ajan bitince ikinci bir model kodu otomatik inceler ve bulguları file:line olarak gösterir; böylece Angular’a özgü hatalar (yanlış inject, eksik import) hızla yakalanır. Ayrıca checkpoint’ler sayesinde herhangi bir adım geri alınabilir; büyük refactor veya signal geçişlerinde hatalı bir değişikliği tek tıkla düzeltmeyi kolaylaştırır.

## Sonuç

GitHub Copilot CLI, Angular projelerinde doğru talimatlar ve disiplinli bir döngüyle ciddi zaman kazandırır. Küçük adımlar, test çalıştırma ve diff inceleme alışkanlığını bırakmayın. Proje kurallarınızı net yazarsanız ajan, standalone component, DI, signals ve RxJS geçişlerinde Angular’ın kurallarına uyum sağlar. Komutları ve davranışı projenize göre şekillendirmek için [CLAUDE.md nasıl yazılır? AGENTS.md ve GEMINI.md rehberi](/blog/claude-md-nasil-yazilir/) rehberini tekrar gözden geçirebilirsiniz; aynı prensipler GitHub Copilot CLI talimat dosyaları için de geçerlidir.

## Sık sorulanlar

**GitHub Copilot CLI bir Angular projesinde nasıl başlatılır?** Proje klasöründe terminalde copilot komutunu çalıştırın. Ajan, .github/copilot-instructions.md veya AGENTS.md dosyalarını okuyarak proje bağlamını anlar. Angular CLI komutlarını (ng generate, ng test) kullanabilmeniz için aynı ortamda Node.js ve Angular CLI kurulu olmalıdır.

**Angular projesinde GitHub Copilot CLI’ye hangi talimatları vermeliyim?** .github/copilot-instructions.md dosyasına build, test, lint komutlarını; klasör yapısını; standalone component, signals ve DI kurallarını yazın. Kısa ve net maddeler, ajanın yanlış NgModule veya any kullanmasını azaltır.

**GitHub Copilot CLI Angular testlerini kendisi çalıştırabilir mi?** Evet, terminal komutlarını çalıştırabildiği için npm test -- --watch=false veya ng test --watch=false gibi komutları koşabilir. Test çıktısına bakarak hataları düzeltmesini isteyebilirsiniz.

**GitHub Copilot CLI Angular’da refactor yaparken güvenli mi?** Küçük adımlarla ilerler ve her adımda test ile diff kontrolü yaparsanız güvenlidir. Büyük refactor isteklerini parçalara bölün ve ajanın kullanılmayan import’ları temizlemesini, signal/RxJS geçişlerinde spesifik olmasını isteyin.

---

**AgentVera hakkında.** AgentVera, Solviera Teknoloji tarafından geliştirilen macOS, Windows ve Linux masaüstü uygulamasıdır. 18 yapay zeka kodlama ajanını (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) proje bazında, gerçek terminallerde ve kullanıcının kendi CLI kurulum ve girişleriyle yan yana çalıştırır. Ücretsiz planda sınırsız ajan vardır. İndir: https://agentvera.dev/indir/ · Fiyatlar: https://agentvera.dev/fiyatlar/