15. angular.json

Bu Dosya Nedir?

angular.json, bir Angular projesinin yapılandırma dosyasıdır. Angular CLI, bu dosyaya bakarak:

Projenin nerede başladığını
Hangi derleyici ayarlarının kullanılacağını
Build, test, lint, serve komutlarında ne yapılacağını
Uygulama yollarını, stilleri, scriptleri

gibi yüzlerce detayı öğrenir ve uygular.

Bu dosya olmadan Angular CLI, projeyi nasıl çalıştıracağını bilemez.

angular.json Nerede Bulunur?

Her Angular projesinde, projenin kök dizininde bulunur:

/app
├── src/
├── angular.json
├── package.json
├── tsconfig.json

angular.json’un Genel Yapısı

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "projects": {
    "my-app": {
      ...
    }
  },
  "defaultProject": "my-app"
}

Bu dosya JSON formatında bir yapılandırma ağacıdır.

Temel Alanlar

$schema

Hangi şemaya uygun olduğunu belirtir.
Kod editörleri (VS Code gibi) otomatik tamamlama ve validasyon sağlar.

version

angular.json dosyasının sürümünü belirtir.
CLI’nin hangi formatı beklediğini anlaması içindir.

projects

Bu bölümde birden fazla uygulama ve kütüphane tanımlanabilir.
Genellikle projenin ismiyle başlar.
Altında architect adında dev bir yapılandırma alanı bulunur.

projects -> architect -> build

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      "outputPath": "dist/my-app",
      "index": "src/index.html",
      "main": "src/main.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "assets": ["src/favicon.ico", "src/assets"],
      "styles": ["src/styles.css"],
      "scripts": []
    },
    ...
  }
}

Alan	Açıklama
builder	Hangi derleyicinin kullanılacağını belirtir
outputPath	Build sonrası çıktı nereye yazılacak
index	Ana HTML dosyası
main	Giriş noktası (main.ts)
polyfills	Tarayıcı uyumluluğu için gerekli ek dosyalar
tsConfig	TypeScript yapılandırma dosyası
assets	Kopyalanacak klasör ve dosyalar (ör. resimler)
styles	Global stiller
scripts	Ek script dosyaları (jQuery gibi manuel JS’ler)

Diğer Architect Komutları

Komut	Ne işe yarar
serve	ng serve komutunu tanımlar
test	ng test (Karma + Jasmine)
lint	ng lint (ESLint/TSlint)
extract-i18n	Çeviri dosyalarını çıkarır
e2e	Uçtan uca test (protractor/cypress)

configurations -> production

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "extractCss": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "2mb",
        "maximumError": "5mb"
      }
    ]
  }
}

Bu ayarlar, --configuration production parametresi verildiğinde devreye girer.

Alan	Açıklama
optimization	Kodun minimize edilmesini sağlar
outputHashing	Cache problemi olmaması için dosya hash’lenir
sourceMap	Üretimde kaynak haritası gizlenir
budgets	Dosya boyutu limitlerini kontrol eder

Neler Özelleştirilebilir?

Kendi build target’larını ekleyebilirsin (my-custom-build)
Script/style dosyalarını değiştirebilirsin
Çoklu proje (monorepo) desteği için projects alanına ekleme yapabilirsin
test, lint gibi komutlara farklı tsconfig dosyaları atayabilirsin

Ne Değildir?

Bu dosya kod dosyası değildir, sadece yapılandırma içerir.
Mantıksal kod yazılmaz.
Runtime’da etkisi yoktur. Sadece build-time etkisi vardır.

Neden Önemlidir?

Projeyi CLI ile yönetmenin anahtarıdır.
Build’in neyi nasıl yapacağını belirler.
Takım içinde standart bir yapı sağlar.

Sonuç

angular.json, Angular CLI’nin seni tanıdığı yerdir. Projeyi nasıl başlatacağını, nasıl derleyeceğini, hangi dosyaları dahil edeceğini hep buradan öğrenir.

Angular ile ciddi bir iş yapacaksan, bu dosyayı tanımadan olmaz ;)