Angular CLI ile Angular’a Hızlı Bir Başlangıç Yapmak

Angular CLI ile Angular’a Hızlı Bir Başlangıç Yapmak

Angular, modern web uygulamaları geliştirmek için kullanılan güçlü ve kapsamlı bir JavaScript framework’üdür. Tek sayfalık uygulamalardan (SPA) karmaşık kurumsal çözümlere kadar geniş bir yelpazede projeleri destekler. Ancak, Angular’ın sunduğu zengin özellik seti ve yapısal yaklaşım, yeni başlayanlar için bazen göz korkutucu olabilir. İşte tam bu noktada Angular CLI (Command Line Interface) devreye girer. Angular CLI, geliştiricilerin Angular uygulamalarını oluşturmasını, geliştirmesini, test etmesini ve dağıtmasını kolaylaştıran bir komut satırı aracıdır. Bu makale, Angular CLI’ın ne olduğunu, neden bu kadar önemli olduğunu ve onu kullanarak Angular geliştirme yolculuğunuza nasıl başlayacağınızı ayrıntılı bir şekilde ele alacaktır.

Giriş: Angular CLI Neden Bu Kadar Önemli?

Angular CLI, Angular ekibi tarafından geliştirilen ve bakımı yapılan resmi bir araçtır. Amacı, geliştirme sürecindeki tekrarlayan ve zaman alıcı görevleri otomatikleştirmek, böylece geliştiricilerin iş mantığına ve kullanıcı deneyimine odaklanmasını sağlamaktır. CLI olmadan, bir Angular projesini sıfırdan kurmak, gerekli bağımlılıkları yüklemek, yapılandırma dosyalarını ayarlamak ve geliştirme sunucusunu kurmak gibi adımlar oldukça zahmetli olabilir. CLI, tüm bu süreçleri birkaç basit komutla hallederek, geliştiricilere inanılmaz bir verimlilik artışı sunar.

Angular CLI’ın sunduğu başlıca avantajlar şunlardır:

* Hızlı Proje Oluşturma: Tek bir komutla tam yapılandırılmış bir Angular projesi başlatır.
* Kod Üretimi: Bileşenler (components), servisler (services), modüller (modules) gibi Angular yapı taşlarını otomatik olarak oluşturur, böylece dosya yapısı ve boilerplate kod yazma yükünü azaltır.
* Geliştirme Sunucusu: Canlı yeniden yükleme (live-reload) özelliğine sahip yerleşik bir geliştirme sunucusu sağlar, kod değişikliklerini anında tarayıcıda görmenizi sağlar.
* Test Araçları: Birim (unit) ve uçtan uca (end-to-end) testleri çalıştırmak için entegre destek sunar.
* Derleme ve Optimizasyon: Üretim ortamı için optimize edilmiş, küçük boyutlu ve hızlı bir derleme çıktısı oluşturur.
* Güncelleme Kolaylığı: Angular framework’ünü ve bağımlılıklarını kolayca güncellemenizi sağlar.
* Standartlaşma: Tüm Angular projelerinde tutarlı bir yapı ve iş akışı sağlar.

Bu makalenin amacı, Angular CLI’ı kullanarak Angular dünyasına adım atmanız için size kapsamlı bir rehber sunmaktır. Kurulumdan temel komutlara, gelişmiş kullanım senaryolarından sıkça karşılaşılan sorunlara kadar her şeyi ele alacağız.

Ön Koşullar: Başlamadan Önce İhtiyaç Duyduklarınız

Angular CLI’ı kullanmaya başlamadan önce sisteminizde bazı temel araçların yüklü olması gerekmektedir.

Node.js ve npm Kurulumu

Angular CLI ve Angular uygulamaları Node.js çalışma zamanı ortamı üzerinde çalışır. Node.js, aynı zamanda paket yöneticisi npm (Node Package Manager) ile birlikte gelir. npm, Angular projelerinizin bağımlılıklarını yönetmek için kullanılır.

* Node.js İndirme: Node.js’in resmi web sitesi olan [nodejs.org](https://nodejs.org/) adresine gidin. LTS (Long Term Support) sürümünü indirmeniz tavsiye edilir, çünkü bu sürüm daha kararlı ve uzun süreli desteklidir.
* Kurulum Kontrolü: Kurulum tamamlandıktan sonra, bir terminal veya komut istemcisi açın ve aşağıdaki komutları çalıştırarak Node.js ve npm’in doğru bir şekilde kurulup kurulmadığını kontrol edin:

node -v
    npm -v

Bu komutlar, yüklü Node.js ve npm sürümlerini göstermelidir.

Kod Düzenleyici

Angular geliştirme için modern bir kod düzenleyiciye ihtiyacınız olacak. Piyasada birçok seçenek bulunsa da, Visual Studio Code (VS Code), Angular ile entegrasyonu, zengin eklenti ekosistemi (TypeScript desteği, Angular Language Service gibi) ve genel kullanım kolaylığı nedeniyle en popüler ve önerilen seçenektir.

* VS Code İndirme: [code.visualstudio.com](https://code.visualstudio.com/) adresinden VS Code’u indirebilirsiniz.

Temel JavaScript/TypeScript Bilgisi

Angular, TypeScript ile yazılmıştır. TypeScript, JavaScript’in süper kümesidir ve isteğe bağlı statik tipleme, sınıflar, arayüzler gibi özellikler sunarak daha ölçeklenebilir ve bakımı kolay kod yazmanıza olanak tanır. Angular CLI’ı kullanmak için derinlemesine TypeScript uzmanlığına ihtiyacınız olmasa da, temel JavaScript (ES6+) ve TypeScript kavramlarına aşina olmak, geliştirme sürecinizi çok daha verimli hale getirecektir.

Angular CLI Kurulumu

Ön koşulları sağladıktan sonra, Angular CLI’ı global olarak sisteminize kurabilirsiniz. Bu, CLI komutlarını herhangi bir dizinden çalıştırabilmenizi sağlar.

1. Terminali Açın: Komut istemcisini (Windows’ta Command Prompt veya PowerShell, macOS/Linux’ta Terminal) açın.
2. Kurulum Komutu: Aşağıdaki komutu çalıştırın:

npm install -g @angular/cli

* npm install: npm paket yükleme komutu.
* -g: Paketi global olarak kurar, bu da CLI’ı sisteminizdeki herhangi bir yerden erişilebilir hale getirir.
* @angular/cli: Yüklenecek Angular CLI paketinin adıdır.

3. Kurulum Kontrolü: Kurulum tamamlandıktan sonra, CLI’ın doğru bir şekilde yüklendiğini doğrulamak için aşağıdaki komutu çalıştırın:

ng version

Bu komut, yüklü Angular CLI sürümünü, Node.js sürümünü ve diğer ilgili paketlerin sürümlerini gösterecektir. Bu çıktıyı gördüğünüzde, Angular CLI’ı kullanmaya hazırsınız demektir.

Yeni Bir Angular Projesi Oluşturma

Artık Angular CLI yüklü olduğuna göre, ilk Angular projenizi oluşturmaya hazırsınız. Bu işlem, ng new komutu ile yapılır.

1. Proje Oluşturma Komutu: Yeni bir proje oluşturmak istediğiniz dizine gidin (örneğin, C:\Projects veya ~/Documents/Projects) ve aşağıdaki komutu çalıştırın:

ng new my-first-angular-app

* ng new: Yeni bir Angular çalışma alanı (workspace) ve uygulama oluşturmak için kullanılan komut.
* my-first-angular-app: Oluşturulacak projenin adıdır. Bu aynı zamanda projenizin kök dizininin adı olacaktır.

2. CLI Soruları: Komutu çalıştırdıktan sonra CLI size birkaç soru soracaktır:
* Would you like to add Angular routing? (y/N): Angular yönlendirme (routing) modülünü projenize ekleyip eklemeyeceğinizi sorar. Çoğu modern web uygulaması için yönlendirme gereklidir, bu yüzden y (yes) seçeneğini seçmeniz önerilir.
* Which stylesheet format would you like to use? (Use arrow keys): Projenizde kullanmak istediğiniz stil sayfası formatını seçmenizi ister (CSS, SCSS, Sass, Less, Stylus). Tercihinize göre birini seçebilirsiniz. SCSS (Sass), daha gelişmiş özellikler sunduğu için popüler bir seçenektir.

Bu soruları yanıtladıktan sonra, Angular CLI projenizi oluşturmaya başlayacaktır. Bu işlem biraz zaman alabilir çünkü gerekli tüm bağımlılıkları (paketleri) npm aracılığıyla indirir ve yükler. İşlem tamamlandığında, “Project ‘my-first-angular-app’ created successfully.” gibi bir mesaj görmelisiniz.

Proje Yapısına Genel Bakış

Oluşturulan my-first-angular-app dizinine girdiğinizde ( cd my-first-angular-app ), aşağıdaki gibi bir dosya ve dizin yapısı göreceksiniz:

* e2e/: Uçtan uca testler için dosyalar.
* node_modules/: Projenizin tüm bağımlılıklarının yüklendiği dizin. Bu dizini doğrudan düzenlememelisiniz.
* src/: Uygulamanızın kaynak kodlarının bulunduğu ana dizin.
* app/: Uygulamanızın ana bileşenlerini ve modüllerini içeren dizin.
* app.component.ts, app.component.html, app.component.css, app.component.spec.ts: Ana bileşen dosyaları.
* app.module.ts: Uygulamanızın ana Angular modülü.
* app-routing.module.ts: Yönlendirmeyi seçtiyseniz, yönlendirme yapılandırmalarını içerir.
* assets/: Resimler, ikonlar, yazı tipleri gibi statik varlıkların bulunduğu dizin.
* environments/: Geliştirme ve üretim gibi farklı ortamlar için yapılandırma dosyaları (environment.ts, environment.prod.ts).
* favicon.ico: Uygulamanızın tarayıcı sekmesindeki ikonu.
* index.html: Uygulamanızın tek HTML sayfası. Angular uygulamaları tek sayfalık uygulamalar olduğu için tüm içerik bu dosyaya enjekte edilir.
* main.ts: Uygulamanızın başlangıç noktası. Angular modülünü bootstrap eder.
* polyfills.ts: Tarayıcı uyumluluğu için polyfill’leri içerir.
* styles.css: Global stil dosyası.
* .angular.json: Angular çalışma alanınızın yapılandırma dosyası. CLI’ın projenizi nasıl derleyeceğini, test edeceğini ve çalıştıracağını tanımlar.
* package.json: Projenizin bağımlılıklarını ve özel scriptlerini tanımlayan dosya.
* tsconfig.json: TypeScript derleyicisinin yapılandırma dosyası.
* README.md: Projeniz hakkında kısa bir açıklama ve talimatlar içeren markdown dosyası.

Bu yapı, Angular CLI tarafından en iyi uygulamalar göz önünde bulundurularak oluşturulmuştur ve geliştiricilere düzenli ve sürdürülebilir bir başlangıç noktası sunar.

Angular Uygulamasını Çalıştırma

Projenizi oluşturduktan sonra, onu geliştirme sunucusunda çalıştırmak ve tarayıcıda görmek isteyeceksiniz.

1. Proje Dizinine Girin: Oluşturduğunuz projenin kök dizinine gidin:

cd my-first-angular-app

2. Uygulamayı Çalıştırma Komutu: Geliştirme sunucusunu başlatmak için aşağıdaki komutu kullanın:

ng serve

Bu komut, uygulamanızı derler ve yerel bir geliştirme sunucusu başlatır. Varsayılan olarak, sunucu http://localhost:4200 adresinde çalışır.

3. Tarayıcıda Görüntüleme: Sunucu başladıktan sonra, web tarayıcınızı açın ve http://localhost:4200 adresine gidin. Angular’ın varsayılan başlangıç sayfasını görmelisiniz.

* --open veya -o Flag’i: ng serve komutuna --open veya -o bayrağını ekleyerek, uygulamanız derlendikten sonra tarayıcının otomatik olarak açılmasını sağlayabilirsiniz:

ng serve --open

Angular geliştirme sunucusu, live-reload (canlı yeniden yükleme) özelliğine sahiptir. Bu, kaynak kodunuzda herhangi bir değişiklik yaptığınızda, sunucunun uygulamayı otomatik olarak yeniden derleyeceği ve tarayıcının sayfayı yenileyeceği anlamına gelir. Bu özellik, geliştirme sürecini son derece hızlandırır.

Temel Angular CLI Komutları ve Kullanımları

Angular CLI, ng new ve ng serve dışında da birçok güçlü komuta sahiptir. Bu komutlar, Angular uygulamanızın farklı yönlerini yönetmenize yardımcı olur.

ng generate (ng g): Kod Üretimi

ng generate komutu (kısaca ng g), Angular uygulamalarında sıkça kullanılan yapı taşlarını (bileşenler, servisler, modüller vb.) otomatik olarak oluşturmak için kullanılır. Bu, boilerplate kodu yazma yükünü azaltır ve tutarlı bir dosya yapısı sağlar.

* Bileşen Oluşturma (ng g component veya ng g c):
Bileşenler, Angular uygulamalarının temel yapı taşlarıdır. Bir bileşen, bir HTML şablonu, bir TypeScript sınıfı (bileşen mantığı) ve bir stil dosyasından oluşur.

ng generate component my-new-component
    # veya kısaca
    ng g c my-new-component

Bu komut, src/app/my-new-component/ dizini altında my-new-component.component.ts, .html, .css ve .spec.ts dosyalarını oluşturur. Ayrıca, app.module.ts dosyasını otomatik olarak güncelleyerek yeni bileşeni declarations dizisine ekler.

* Faydalı Bayraklar:
* --skip-tests: Test dosyasının (.spec.ts) oluşturulmasını engeller.
* --inline-template: HTML şablonunu ayrı bir dosya yerine bileşen TypeScript dosyasına gömer.
* --inline-style: Stil dosyasını ayrı bir dosya yerine bileşen TypeScript dosyasına gömer.
* --flat: Bileşen için ayrı bir dizin oluşturmak yerine, dosyaları mevcut dizine yerleştirir.
* --module=app: Bileşenin hangi modüle ekleneceğini belirtir. (Varsayılan olarak en yakın modüle ekler.)

* Servis Oluşturma (ng g service veya ng g s):
Servisler, bileşenler arasında veri paylaşımı, API istekleri veya iş mantığı gibi yeniden kullanılabilir işlevleri kapsamak için kullanılır.

ng generate service data-service
    # veya kısaca
    ng g s data-service

Bu komut, src/app/data-service.service.ts ve src/app/data-service.service.spec.ts dosyalarını oluşturur. Servisler, varsayılan olarak providedIn: 'root' ile kök enjektöre kaydedilir, bu da uygulamanın her yerinde erişilebilir olmasını sağlar.

* Modül Oluşturma (ng g module veya ng g m):
Modüller, ilgili bileşenleri, servisleri ve diğer modülleri bir araya getirerek uygulamanın farklı bölümlerini düzenlemeye yardımcı olur.

ng generate module feature-module
    # veya kısaca
    ng g m feature-module

Bu komut, src/app/feature-module/feature-module.module.ts dosyasını oluşturur.

* Yönerge Oluşturma (ng g directive veya ng g d):
Yönergeler, DOM öğelerinin davranışını değiştirmek için kullanılır.

ng generate directive highlight
    # veya kısaca
    ng g d highlight

* Pipe Oluşturma (ng g pipe veya ng g p):
Pipe’lar, verileri HTML şablonlarında görüntülemeden önce dönüştürmek için kullanılır.

ng generate pipe currency-format
    # veya kısaca
    ng g p currency-format

* Guard Oluşturma (ng g guard veya ng g g):
Guard’lar, kullanıcıların belirli rotalara erişimini kontrol etmek için kullanılır (örneğin, kimlik doğrulama kontrolü).

ng generate guard auth-guard
    # veya kısaca
    ng g g auth-guard

Bu komut, size hangi guard arayüzlerini uygulamak istediğinizi soracaktır (CanActivate, CanDeactivate, CanLoad, CanMatch, CanActivateChild).

* Diğer Oluşturma Komutları:
* ng g class my-class
* ng g interface my-interface
* ng g enum my-enum
* ng g interceptor my-interceptor (HTTP isteklerini yakalamak ve değiştirmek için)

ng generate komutu, Angular geliştirme sürecini büyük ölçüde hızlandıran ve projenin tutarlılığını sağlayan temel bir araçtır.

ng build: Uygulamayı Üretim İçin Derleme

ng build komutu, Angular uygulamanızı üretim ortamına dağıtmak için statik dosyalar halinde derler. Bu işlem, uygulamanın boyutunu küçültmek, performansını artırmak ve tarayıcı uyumluluğunu sağlamak için çeşitli optimizasyonlar içerir.

ng build

Varsayılan olarak, bu komut geliştirme modu için bir derleme yapar. Çıktı, projenizin kök dizinindeki dist/my-first-angular-app/ klasörüne yerleştirilir.

* Üretim Derlemesi (--configuration=production veya --prod):
Üretim ortamı için derleme yaparken, daha fazla optimizasyon ve performans iyileştirmesi sağlayan --configuration=production (kısaca --prod) bayrağını kullanmanız çok önemlidir.

ng build --configuration=production
    # veya kısaca
    ng build --prod

Bu komut, şunları yapar:
* AOT (Ahead-of-Time) Derleme: Uygulama, tarayıcıya gönderilmeden önce derlenir, bu da daha hızlı başlangıç süreleri ve daha küçük paket boyutları sağlar.
* Tree-shaking: Kullanılmayan kodları kaldırır.
* Minification ve Uglification: Kodun boyutunu küçültür ve okunabilirliğini azaltır.
* Ortam Değişkenleri: environment.prod.ts dosyasındaki yapılandırmaları kullanır.

Üretim derlemesi sonucunda oluşan dosyaları (HTML, CSS, JavaScript) herhangi bir statik dosya sunucusuna (Nginx, Apache, Netlify, Vercel, Firebase Hosting vb.) yükleyerek uygulamanızı canlıya alabilirsiniz.

ng test: Birim Testlerini Çalıştırma

Angular CLI, birim testleri için Karma test çalıştırıcısını ve Jasmine test framework’ünü entegre olarak sunar. ng test komutu, uygulamanızdaki birim testlerini çalıştırır.

ng test

Bu komutu çalıştırdığınızda, bir Chrome (veya yapılandırılmış başka bir tarayıcı) penceresi açılır ve testler çalıştırılır. Test sonuçları hem tarayıcıda hem de terminalde görüntülenir.

* --watch=false: Testleri bir kez çalıştırıp çıkmak için kullanılır. Varsayılan olarak, testler dosya değişikliklerini izler ve değişiklik olduğunda yeniden çalışır.

ng e2e: Uçtan Uca Testleri Çalıştırma

Uçtan uca (End-to-End) testler, uygulamanızın gerçek bir kullanıcı gibi çalışıp çalışmadığını doğrular. Geleneksel olarak Angular CLI, Protractor’ı varsayılan e2e test framework’ü olarak kullanmıştır. Ancak, Protractor’ın aktif gelişimi durduğu için, güncel Angular projelerinde Cypress veya Playwright gibi daha modern e2e test araçları tercih edilmektedir.

Eğer projenizde hala Protractor kuruluysa:

ng e2e

Yeni projelerde ng e2e komutu artık varsayılan olarak gelmeyebilir. Bir e2e test framework’ü eklemek için ng add komutunu kullanmanız gerekebilir, örneğin:

ng add @cypress/schematic
veya
ng add @playwright/schematic

Bu komutlar, seçtiğiniz e2e test framework’ünü projenize entegre eder ve gerekli yapılandırmaları yapar.

ng lint: Kod Kalitesi Kontrolü

ng lint komutu, projenizdeki kodun stil ve kalitesini kontrol etmek için kullanılır. ESLint gibi araçlarla entegre olarak çalışır ve kodunuzdaki potansiyel hataları, stil ihlallerini ve en iyi uygulama uyumsuzluklarını bulmanıza yardımcı olur.

ng lint

Bu komut, yapılandırmanıza göre kodunuzu analiz eder ve sorunları raporlar. Kod kalitesini korumak ve ekip içinde tutarlı bir kod stili sağlamak için düzenli olarak ng lint çalıştırmak önemlidir.

ng update: Angular ve Bağımlılıkları Güncelleme

Angular ekibi, framework’ü düzenli olarak günceller ve yeni özellikler, performans iyileştirmeleri ve güvenlik yamaları sunar. ng update komutu, Angular ve bağımlılıklarını kolayca güncellemenizi sağlar.

ng update

Bu komut, projenizdeki tüm @angular paketlerini kontrol eder ve en son kararlı sürümlerine yükseltme önerileri sunar.

* Belirli Paketleri Güncelleme: Belirli paketleri güncellemek için paket adlarını belirtebilirsiniz:

ng update @angular/core @angular/cli

* Otomatik Migrasyonlar: Angular CLI’ın en güçlü özelliklerinden biri, güncellemeler sırasında otomatik migrasyon (geçiş) şemaları çalıştırmasıdır. Bu şemalar, eski sürümlerden yeni sürümlere geçerken kodunuzda yapılması gereken değişiklikleri otomatik olarak yapar, böylece manuel düzeltme ihtiyacını azaltır.

ng add: Harici Kütüphaneleri Entegre Etme

ng add komutu, Angular projenize üçüncü taraf kütüphaneleri (Angular Material, PWA, Firebase gibi) eklemek için kullanılır. Bu komut, sadece paketi yüklemekle kalmaz, aynı zamanda kütüphaneyi projenize entegre etmek için gerekli yapılandırma değişikliklerini de otomatik olarak yapar.

ng add @angular/material

Bu komut, Angular Material kütüphanesini yükler, angular.json dosyasını günceller, gerekli stilleri ekler ve hatta size başlangıç şablonları sunabilir. Bu, manuel yapılandırma hatalarını önler ve kurulum sürecini hızlandırır.

ng deploy: Uygulamayı Dağıtma

Angular CLI, ng deploy komutu ile uygulamanızı doğrudan çeşitli barındırma sağlayıcılarına dağıtma yeteneği sunar. Bu özellik, ng add komutuyla eklenen dağıtım schematics’leri sayesinde çalışır.

Örneğin, Firebase’e dağıtmak için:

ng add @angular/fire
ng deploy

Bu komutlar, Firebase’i projenize entegre eder ve ardından uygulamanızı Firebase Hosting’e dağıtmanızı sağlar. Bu özellik, dağıtım sürecini basitleştirir ve geliştiricilerin daha hızlı bir şekilde canlıya çıkmasını sağlar.

Angular CLI ile Gelişmiş Kullanım İpuçları

Angular CLI’ın temel komutlarının ötesinde, geliştirme sürecinizi daha da optimize edebilecek bazı gelişmiş özellikler de bulunmaktadır.

Ortam Değişkenleri (Environment Variables)

Angular CLI, uygulamanızın farklı ortamlar (geliştirme, üretim, test) için farklı yapılandırmalara sahip olmasını kolaylaştırır. Bu, src/environments/ dizinindeki dosyalar aracılığıyla yapılır:

* environment.ts: Geliştirme ortamı için yapılandırma.
* environment.prod.ts: Üretim ortamı için yapılandırma.

Bu dosyaları kullanarak, örneğin farklı API URL’leri veya özellik bayrakları tanımlayabilirsiniz:

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.yourdomain.com/api'
};

Derleme yaparken --configuration=production bayrağını kullandığınızda, CLI otomatik olarak environment.prod.ts dosyasını kullanır. Kendi özel ortamlarınızı da angular.json dosyasında tanımlayabilirsiniz.

Proxy Yapılandırması (Proxy Configuration)

Geliştirme sırasında, Angular uygulamanızın (genellikle localhost:4200 üzerinde çalışır) bir backend API’sine (örneğin localhost:3000 üzerinde çalışır) istek göndermesi gerekebilir. Tarayıcıların aynı kaynak politikası (CORS) nedeniyle doğrudan istekler engellenebilir. Angular CLI, bu sorunu çözmek için bir proxy yapılandırması sunar.

Bir proxy.conf.json dosyası oluşturarak API isteklerini geliştirme sunucusundan yönlendirebilirsiniz:

// proxy.conf.json
{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "changeOrigin": true
  }
}

Bu yapılandırma, http://localhost:4200/api/users adresine yapılan bir isteği http://localhost:3000/api/users adresine yönlendirir. Ardından, ng serve komutunu bu proxy yapılandırmasıyla çalıştırın:

ng serve --proxy-config proxy.conf.json

Bu, geliştirme sürecinde CORS sorunlarını aşmak için oldukça kullanışlıdır.

Çoklu Uygulama ve Kütüphane Yönetimi (Monorepo ile Multiple Apps/Libraries)

Angular CLI, bir çalışma alanı (workspace) içinde birden fazla Angular uygulaması ve kütüphanesi yönetmenize olanak tanıyan monorepo yapısını destekler. Bu, büyük ölçekli projeler veya paylaşılan bileşen kütüphaneleri geliştiren ekipler için çok faydalıdır.

* Yeni Bir Uygulama Oluşturma: Mevcut bir çalışma alanı içinde yeni bir uygulama oluşturmak için:

ng generate application my-second-app

Bu komut, çalışma alanınızın projects/ dizini altına yeni bir uygulama oluşturur.

* Kütüphane Oluşturma: Yeniden kullanılabilir bileşenler, servisler veya modüller içeren bir kütüphane oluşturmak için:

ng generate library my-shared-library

Bu komut, projects/my-shared-library/ dizini altında bir kütüphane projesi oluşturur. Bu kütüphane, çalışma alanınızdaki diğer uygulamalar tarafından kolayca kullanılabilir.

Bu yaklaşım, kod tekrarını azaltır, bağımlılık yönetimini merkezileştirir ve büyük projelerde modülerliği artırır.

Özel Schematics Oluşturma

ng generate ve ng add komutlarının arkasındaki mekanizma Schematics’tir. Schematics, dosya oluşturma, kod dönüştürme ve proje yapılandırma gibi görevleri otomatikleştiren bir araç setidir. Kendi özel schematics’lerinizi oluşturarak, projenize özel boilerplate kodlarını veya belirli bir deseni otomatik olarak uygulayabilirsiniz. Bu, özellikle büyük ekiplerde veya belirli bir kod stilini zorunlu kılmak istediğinizde çok güçlü bir araçtır.

Sıkça Karşılaşılan Sorunlar ve Çözümleri

Angular CLI ile çalışırken bazı yaygın sorunlarla karşılaşabilirsiniz. İşte bunlardan bazıları ve çözümleri:

* Node.js Versiyon Uyumsuzlukları: Angular’ın belirli sürümleri, Node.js’in belirli sürümleriyle en iyi şekilde çalışır. ng version çıktısını kontrol ederek Node.js sürümünüzün uyumlu olduğundan emin olun. Gerekirse Node.js’i güncelleyin veya NVM (Node Version Manager) gibi bir araç kullanarak farklı Node.js sürümleri arasında geçiş yapın.

* Port Çakışmaları: ng serve komutunu çalıştırdığınızda Port 4200 is already in use. gibi bir hata alabilirsiniz. Bu, 4200 numaralı portun başka bir uygulama tarafından kullanıldığı anlamına gelir.
* Çözüm: ng serve --port 4201 gibi farklı bir port belirterek uygulamayı çalıştırın.

* ng Komutu Bulunamıyor: ng komutunu çalıştırdığınızda command not found hatası alıyorsanız, Angular CLI’ın global olarak doğru bir şekilde yüklenmediği veya PATH değişkeninizde olmadığı anlamına gelir.
* Çözüm: npm install -g @angular/cli komutunu tekrar çalıştırın. Yönetici (Administrator) veya root yetkileriyle çalıştırmanız gerekebilir.

* ng build Hataları: Derleme sırasında TypeScript hataları veya bağımlılık sorunları yaşanabilir.
* Çözüm: Hata mesajlarını dikkatlice okuyun. Genellikle, eksik bağımlılıklar için npm install komutunu çalıştırmak veya TypeScript hatalarını düzeltmek sorunu çözer. node_modules klasörünü silip npm install komutunu yeniden çalıştırmak da bazen işe yarar.

* Cache Sorunları: Nadiren, npm veya Angular CLI’ın önbelleği bozulabilir ve beklenmedik sorunlara yol açabilir.
* Çözüm: npm cache clean --force komutuyla npm önbelleğini temizlemeyi deneyin.

* Güncelleme Sonrası Sorunlar: ng update sonrası uygulamanızda beklenmedik davranışlar oluşabilir.
* Çözüm: Angular dokümantasyonundaki güncelleme kılavuzlarını inceleyin. Bazen manuel olarak yapılması gereken küçük değişiklikler olabilir. ng update komutunu --force veya --allow-dirty bayraklarıyla çalıştırmak da yardımcı olabilir, ancak dikkatli kullanılmalıdır.

Sonuç

Angular CLI, modern Angular geliştirme sürecinin vazgeçilmez bir parçasıdır. Proje oluşturmaktan kod üretmeye, test etmekten üretim için derlemeye kadar her adımda geliştiricilere yardımcı olan güçlü ve kapsamlı bir araçtır. Bu makalede ele aldığımız komutlar ve ipuçları, Angular dünyasına sağlam bir başlangıç yapmanız ve geliştirme verimliliğinizi artırmanız için size temel bir yol haritası sunmaktadır.

Angular CLI’ın sunduğu otomasyon ve standartlaşma sayesinde, geliştiriciler tekrarlayan görevlerle boğuşmak yerine, uygulamanın çekirdek mantığına ve kullanıcı deneyimine odaklanabilirler. Bu da daha hızlı geliştirme döngüleri, daha kaliteli kod ve sonuç olarak daha başarılı Angular uygulamaları anlamına gelir.

Unutmayın ki Angular ekosistemi sürekli gelişmektedir. Angular CLI’ın en son özelliklerinden ve en iyi uygulamalarından haberdar olmak için resmi Angular dokümantasyonunu düzenli olarak takip etmeniz önemlidir. Şimdi, Angular CLI ile donanmış olarak, kendi harika web uygulamalarınızı oluşturmaya hazırsınız!