Angular Projesinde “angular.json” Dosyası

Angular.json dosyası, Angular projelerinin yapılandırma dosyasıdır. Genellikle projenin kök dizininde bulunur. Bu dosya, projenin derleme, paketleme, yapılandırma ve diğer birçok yapısal ayarlarını içerir. Angular.json dosyası, Angular CLI (Command Line Interface) tarafından otomatik olarak oluşturulur. Projenin temel yapılandırmasını tanımlamak için kullanılır. Bu dosya, projenin component’lerini, modüllerini, stil dosyalarını ve derleme seçeneklerini yapılandırır.

Yeni oluşturduğumuz projede “angular.json” dosyasını açtığımızda görüntüsü genel olarak aşağıdaki gibidir. Projects kısmını sildim şimdilik! Yazınının ilerleyen bölümlerinde detayına gireceğim.

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    // bu kısmı şimdilik sildim aşağıda detayına gireceğim.
  },
  "cli": {
    "analytics": "38d0b86e-f2e6-4a16-9630-35d53630f58c"
  }
}

• $schema: Angular CLI, bir Angular projesinde hangi dosyaların oluşturulabileceğinin şemasını bu ayarla belirler. Görüldüğü gibi, bu doğrudan “node_modules” içinden Angular paketinden gelmektedir.
• version: Angular projesindeki angular.json dosyasının versiyon numarasının tutulduğu alandır. Bu versiyon projenin versiyon numarası değildir. Proje versiyonu package.json dosyasında tutulur. Çünkü bu angular.json dosyası daha genel olarak çalışma ortamının ayarlarını tutuyor.
• newProjectRoot: Bu çalışma ortamında oluşturulacak yeni Angular projelerinin yolunu belirler. “Absolute” veya “relative” olarak verilebilir.
• cli: Angular CLI ayarlarının tutulduğu kısımdır. Bunlar:
• cli.analytics: Anonim veri kullanımını Angular ekibiyle paylaşıyor. Her proje oluşturulduğunda paylaşmayı isteyip istemediğimizi soruyor. Eğer cevabımız evet ise benzersiz bir hash değeri üretip projemizin ayar kısmına ekliyor.
• cli.cache:Angular CLI Builders tarafından kullanılan kalıcı önbellek ayarlarını tutar.
• cli.cache.enable: Kalıcı önbellek ayarlarının açık olup olamdığını belirtir.
• cli.cache.environment: Önbellek ayarlarının hangi ortamda çalışacağını belirtir.
• cli.cache.environment.all: Bütün ortamlar için önbelleklemeyi açar.
• cli.cache.environment.local: Sadece geliştirme ortamı için önbelleklemeyi açar.
• cli.cache.environment.ci: Sadece “continious-inetgration” ortamı için önbelleklemeyi açar.
• cli.cache.path: Varsayılan olarak .angular/cache kullanılır. Fakat değiştirmek istersek burada değiştirebiliriz.
• cli.schematicCollections: Angular CLI dışındaki kütüphanelerin dosya oluşturma konutlarının projeye dahil edildiği yer.
• cli.packageManager: Projede kullanılan paket yöneticisinin ayarlandığı yer. Örnek: npm, cnpm, pnpm veya yarn.
• cli.warnings: Angular CLI’ın belirli console uyarılarını vermesi için yapılan ayardır.
• cli.warnings.versionMismatch: Global Angular CLI sürümü yerel sürümden daha yeni olduğunda bir uyarı göstermek istendendiğinde “true” olarak verilir.

projects:

Her proje seviyesinde ayar vermek için kullanılır. Görüldüğü gibi çalışma ortamında şuan “project-name” adında bir tane projemiz var.

"projects": {
   "project-name": {
     "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app"
     }
   }

• projects.project-name.projectType:Angular projesinin bir web uygulaması mı? Yoksa bir kütüphane(library) uygulaması mı? Olduğunun belirtildiği yerdir.
• projects.project-name.schematics:Proje kapsamında Angular CLI’ın ng generate komutunun alt komutları için verilecek komutların şemalarının bulunduğu yerdir.
• projects.project-name.root: Bu projenin dosyalarının çalışma alanı(workspace) dizinine göre kök dizini. Çalışma alanının(workspace) en üst düzeyinde bulunan ilk uygulama için boştur.
• projects.project-name.sourceRoot: Bu projenin kaynak dosyalarının kök dizini.
• projects.project-name.prefix: ng generatekomutu ile oluşturulan bileşenlerin selector’lerine verilen ön eki belirtir. Varsayılan olarak “app” gelir. Örneğin: <app-parent></app-parent> gibi.

“Projects” kısmındaki genel ayarları incelemiş olduk. Şimdi biraz daha detaya inip projenin architect kısmı ile ilgili ayarlara göz gezdirelim. İlk olarak build ayarlarına detaylı bakalım. İçerik aşağıdaki gibidir.

  "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/yeni-angular",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        }
      }

• projects.project-name.architect.build.builder: Uygulamayı derleyen derleyicinin verildiği yerdir. Varsayılan olarak angular “dev-kit” derleyicisi gelmektedir.
• projects.project-name.architect.build.options.buildPath: Uygulamanın derleme sonrası, derlenecek kodların tutulduğu yoldur. Varsayılan olarak “/dist/project-name” olarak ayarlıdır.
• projects.project-name.architect.build.options.index: Uygulamanın başlangıç sayfasının ayarlandığı yer. Varsayılan olarak “src/index.html” olarak ayarlıdır.
• projects.project-name.architect.build.options.browser: Uygulamanın başlatıcı dosyasının ayarlandığı yer. Varsayılan olarak “src/main.ts” olarak ayarlıdır.
• projects.project-name.architect.build.options.polyfills: Uygulamada polyfills için hangi aracın kullanılacağının ayarlandığı kısımdır. Angular polyfills için varsayılan olarak “zone.js” kullanılır. Peki bu “polyfills” ve “zone.js” nedir? dediğinizi duyar gibiyim. Şöyle kısaca açıklayayım şimdilik, Angular’ın bazı özelliklerini desteklemeyen tarayıcılarda bu tarayıcıların eksikliğini kapatan yapıdır.
• projects.project-name.architect.build.options.tsconfig: Uygulamada uygulanacak compiler ayarlarının verildiği yer.
• projects.project-name.architect.build.options.assets: Uygulamada kullanılacak olan varlık dosyalarının ayarlandığı yer.
• projects.project-name.architect.build.options.styles: Uygulamada kullanılacak olan stil dosyalarının ayarlandığı yer.
• projects.project-name.architect.build.options.scripts: Uygulamada kullanılacak olan script dosyalarının ayarlandığı yer.
• projects.project-name.architect.build.configurations.production.budgets.type: Uygulamayı canlıya göre derlerken ayarlanacak bütçe tipini tutar. Varsayılan olarak “initial” olarak gelir. Fakat ihtiyaca göre “all”, “bundle”, “allScript”, “anyComponentStyle”, “anyScript” ve “any” olarak verilebilir.
• projects.project-name.architect.build.configurations.production.budgets.maximumWarning: Uygulamayı canlıya göre derlerken, derlenen kodun çıktısı bir limiti aşması durumunda geliştiriciye bir uyarı mesajı verme ihtiyacı duyulmuş. İşte bu limit ayarının yapıldığı kısımdır.
• projects.project-name.architect.build.configurations.production.budgets.maximumError: Uygulamayı canlıya göre derlerken, derlenen kodun çıktısı bir limiti aşması durumunda geliştiriciye bir hata mesajı verme ihtiyacı duyulmuş. İşte bu limit ayarının yapıldığı kısımdır. Bütçe ile ilgili daha detaylı ayarlara burdan bakabilirsiniz.
• projects.project-name.architect.build.configurations.production.outputHashing: Uygulamayı derlerken, derlenen kodun çıktısındaki dosya adlarının benzersiz bir hash ile verilmesini istediğimiz zaman kullanırız. Varsayılan olarak “all” gelir. Kapatmak için “none” verilebilir. Örneğin: “main.62beb1fb93041eb44194.js” dosyasındaki gibi. Bunun avantajı her yeni build alıp canlıya çıktığımızda tarayıcıların bu dosyaların isimlerinin değiştiğini fark ederek önbelleklerini güncellemeleridir.
• projects.project-name.architect.build.configurations.development.optimization: Geliştirme ortamında optimizasyon yapılıp yapılmayacağı bilgisinin verildiği yerdir.
• projects.project-name.architect.build.configurations.development.extractLicences: extractLicenses “true” olarak set edilirse kullanılan bütün paketlerin lisansları tek bir dosyaya kaydedilir.
• projects.project-name.architect.build.configurations.development.sourceMap: Geliştirme esnasında “debug” için kodların tarayıcıda gösterilip gösterilmeyeceğinin ayarlandığı yer. Varsayılan olarak “false” olarak gelir.
• projects.project-name.architect.build.configurations.defaultConfiguration: Varsayılan olarak “production” olarak ayarlıdır.

“Projects ”altındaki architect.build ayarlarına detaylı incelmiş olduk. Şimdi de architect.serve ayarlarına bakalım. Varsayılan olarak aşağıdaki gibi gelmektedir. Bu ayarlar projenin local makinede çalıması ile ilgilidir.

 "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "yeni-angular:build:production"
            },
            "development": {
              "buildTarget": "yeni-angular:build:development"
            }
          },
          "defaultConfiguration": "development"
        },

• projects.project-name.architect.build.configurations.architect.serve.builder: Uygulamayı derleyen derleyicinin verildiği yerdir. Varsayılan olarak angular “dev-kit” derleyicisi gelmektedir.
• projects.project-name.architect.build.configurations.architect.serve.configurations: Geliştirme ortamında bazen kodları debug etmek isteyebiliriz. Bu ayarda uygulamayı hangi ortama göre çalıştıracağının bilgisini tutar. “production” ve “development” olacak şekilde iyi ayarı mevcuttur.
• projects.project-name.architect.build.configurations.architect.serve.defaultConfiguration: Uygulamayı geliştirme ortamında çalıştırırken varsayılan olarak “development” ayarlarına göre çalıştırır.

“Projects ”altındaki architect.serve ayarlarına detaylı incelmiş olduk. Şimdi de architect.extract-i18n ayarlarına bakalım. Varsayılan olarak aşağıdaki gibi gelmektedir. Bu ayarlar projenin içinde kullanılan çoklu dil çevirileri ilgilidir.

  "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "yeni-angular:build"
          }
        },

• projects.project-name.architect.build.configurations.architect.extract-i18n.builder: Angular projelerinde kullanılan bir Angular CLI komutudur. Bu komut, uygulamanın çoklu dil desteği için kullanılan çeviri dosyalarını oluşturmayı sağlar.
• projects.project-name.architect.build.configurations.architect.extract-i18n.options.buildTarget: Verilen ortama göre çeviri dosyalarını hazırlayacaktır. Birden fazla ortam için verilebilir. Örneğin: “yeni-angular:build:develoment,production” şekilnde iki ortam için verilebilir.

“Projects ”altındaki architect.extract-i18n ayarlarını detaylı incelmiş olduk. Şimdi de architect.test ayarlarına bakalım. Varsayılan olarak aşağıdaki gibi gelmektedir. Bu ayarlar projenin içinde yazılan testlerin çalıştırılması ile ilgilidir.

 "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }

• projects.project-name.architect.build.configurations.architect.test.builder: Uygulamadaki testleri çalıştıran çalıştırıcının verildiği yerdir. Varsayılan olarak “karma” test çalıştırıcısı gelmektedir. Karma Angular ekibi tarafından yazılan açık kaynaklı bir projedir.
• Test için geriye kalan ayarlara baktığımızda daha önceki gördüğümüz ayarlarla aynı olduğunu fark etmişsinizdir. Ondan dolayı bir daha yazma ihtiyacı duymadım. Yanlızca buradaki ayarların sadece testleri etkileyeciğini unutmayalım.

Bu makalede, angular.json dosyasının temel özelliklerini ve yapılandırma seçeneklerini detaylı bir şekilde incelemiş olduk. Bu dosyanın Angular projeleri için elzem bir dosya olduğunu ve projelerin başarılı bir şekilde yönetilmesi için önemli olduğunu belirtmek gerekir. Ayarların doğru bir şekilde yapılandırılması, geliştirme sürecinin verimli olmasını sağlar ve uygulamanın performansını artırır.

Yazıyı, yeni başlayanlar veya İngilizcesi yeterli olmayanlar için mümkün olduğunca anlaşılır bir şekilde yazmaya çalıştım. Umarım faydalı olmuştur. Aklınıza takılan herhangi bir soruyu çekinmeden yorumlarda sorabilirsiniz.

Yaralanılan Kaynaklar:

Angular