Angular çalışma alanı yapılandırması

Bir Angular çalışma alanının kök düzeyindeki angular.json dosyası, çalışma alanı genelinde ve projeye özgü yapılandırma varsayılanları sağlar. Bunlar Angular CLI tarafından sağlanan derleme ve geliştirme araçları için kullanılır. Yapılandırmada verilen yol değerleri, kök çalışma alanı dizinine görelidir.

Genel JSON yapısı

angular.json dosyasının en üst düzeyinde, birkaç özellik çalışma alanını yapılandırır ve bir projects bölümü kalan proje bazlı yapılandırma seçeneklerini içerir. Çalışma alanı düzeyinde ayarlanan Angular CLI varsayılanlarını proje düzeyinde ayarlanan varsayılanlarla geçersiz kılabilirsiniz. Proje düzeyinde ayarlanan varsayılanları da komut satırını kullanarak geçersiz kılabilirsiniz.

Aşağıdaki özellikler, dosyanın en üst düzeyinde çalışma alanını yapılandırır.

ng new app-name ile oluşturduğunuz ilk uygulama "projects" altında listelenir:

ng generate library ile bir kütüphane projesi oluşturduğunuzda, kütüphane projesi de projects bölümüne eklenir.

• ng new tarafından oluşturulan ilk uygulama, çalışma alanı dosya yapısının en üst düzeyindedir.
• Diğer uygulamalar ve kütüphaneler varsayılan olarak projects dizini altındadır.

Daha fazla bilgi için Çalışma alanı ve proje dosya yapısı bölümüne bakın.

Angular CLI yapılandırma seçenekleri

Aşağıdaki özellikler, Angular CLI'yi özelleştiren bir dizi seçenektir.

Önbellek seçenekleri

Uyarı seçenekleri

Proje yapılandırma seçenekleri

Aşağıdaki üst düzey yapılandırma özellikleri, projects['project-name'] altında her proje için kullanılabilir.

i18n seçenekleri

Uygulamanın kaynak yerel ayarını ve oluşturulacak ek yerel ayarları tanımlamak için i18n proje seçeneğini kullanın.

sourceLocale nesnesi

Kaynak yerel ayar için çıktı dizinini veya temel HREF'i özelleştirmek üzere dize yerine bir nesne geçirin:

Yerel ayar nesnesi

Her locales girdisi bir yol dizesi, bir yol dizisi veya bir nesne olabilir:

Şematikler

Angular şematikleri, yeni dosyalar ekleyerek veya mevcut dosyaları değiştirerek bir projeyi değiştirme talimatlarıdır. Bunlar, şematik adını bir dizi varsayılan seçenekle eşleyerek yapılandırılabilir.

Bir şematiğin "adı" şu biçimdedir: <schematic-package>:<schematic-name>. Varsayılan Angular CLI ng generate alt komutları için şematikler @schematics/angular paketinde toplanmıştır. Örneğin, ng generate component ile bir bileşen oluşturma şematiği @schematics/angular:component'tir.

Şematiğin şemasında verilen alanlar, Angular CLI alt komut seçenekleri için izin verilen komut satırı argüman değerlerine ve varsayılanlarına karşılık gelir. Bir alt komut seçeneği için farklı bir varsayılan ayarlamak üzere çalışma alanı şema dosyanızı güncelleyebilirsiniz. Örneğin, ng generate component'te varsayılan olarak standalone'u devre dışı bırakmak için:

{
  "projects": {
    "my-app": {
      "schematics": {
        "@schematics/angular:component": {
          "standalone": false
        }
      }
    }
  }
}

CLI oluşturucularını yapılandırma

Architect, Angular CLI'nin derleme ve test çalıştırma gibi karmaşık görevleri gerçekleştirmek için kullandığı araçtır. Architect, bir hedef yapılandırmasına göre belirli bir görevi gerçekleştirmek için belirlenmiş bir oluşturucuyu çalıştıran bir kabuktur. Angular CLI'yi genişletmek için yeni oluşturucular ve hedefler tanımlayabilir ve yapılandırabilirsiniz. Angular CLI Oluşturucuları bölümüne bakın.

Varsayılan Architect oluşturucuları ve hedefleri

Angular, belirli komutlarla veya genel ng run komutuyla kullanılmak üzere varsayılan oluşturucular tanımlar. Bu oluşturucuların her biri için seçenekleri ve varsayılanları tanımlayan JSON şemaları @angular-devkit/build-angular paketinde toplanmıştır. Şemalar aşağıdaki oluşturucular için seçenekleri yapılandırır.

Oluşturucu hedeflerini yapılandırma

angular.json dosyasının architect bölümü bir dizi Architect hedefi içerir. Hedeflerin çoğu, onları çalıştıran Angular CLI komutlarına karşılık gelir. Diğer hedefler ng run komutu kullanılarak yürütülebilir ve kendi hedeflerinizi tanımlayabilirsiniz.

Her hedef nesnesi, o hedef için builder'ı belirtir; bu, Architect'in çalıştırdığı araç için npm paketidir. Her hedefin ayrıca hedef için varsayılan seçenekleri yapılandıran bir options bölümü ve hedef için alternatif yapılandırmaları adlandıran ve belirten bir configurations bölümü vardır. Aşağıdaki Derleme hedefi bölümündeki örneğe bakın.

Derleme hedefi

architect altındaki her hedef aşağıdaki özelliklere sahiptir:

Örneğin, optimizasyonları devre dışı bırakılmış bir derleme yapılandırmak için:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "optimization": false
          }
        }
      }
    }
  }
}

Alternatif derleme yapılandırmaları

Angular CLI iki derleme yapılandırmasıyla birlikte gelir: production ve development. Varsayılan olarak, ng build komutu aşağıdaki gibi çeşitli derleme optimizasyonları uygulayan production yapılandırmasını kullanır:

• Dosyaları paketleme
• Fazla boşlukları en aza indirme
• Yorumları ve ölü kodu kaldırma
• Kısa, karışık adlar kullanmak için kodu küçültme

Geliştirme sürecinize uygun ek alternatif yapılandırmalar (örneğin staging gibi) tanımlayabilir ve adlandırabilirsiniz. --configuration komut satırı bayrağına adını ileterek alternatif bir yapılandırma seçebilirsiniz.

Örneğin, optimizasyonun yalnızca üretim derlemeleri için etkinleştirildiği bir derleme yapılandırmak için (ng build --configuration production):

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "optimization": false
          },
          "configurations": {
            "production": {
              "optimization": true
            }
          }
        }
      }
    }
  }
}

Virgülle ayrılmış bir liste olarak birden fazla yapılandırma adı da iletebilirsiniz. Örneğin, hem staging hem de french derleme yapılandırmalarını uygulamak için ng build --configuration staging,french komutunu kullanın. Bu durumda, komut adlandırılmış yapılandırmaları soldan sağa ayrıştırır. Birden fazla yapılandırma aynı ayarı değiştirirse, son ayarlanan değer nihai değer olur. Bu örnekte, hem staging hem de french yapılandırmaları çıktı yolunu ayarlarsa, french'teki değer kullanılır.

Ek derleme ve test seçenekleri

Varsayılan veya hedefli bir derleme için yapılandırılabilir seçenekler genellikle ng build ve ng test komutları için mevcut seçeneklere karşılık gelir. Bu seçeneklerin ve olası değerlerinin ayrıntıları için Angular CLI Referanslarına bakın.

Ek sunma seçenekleri

Geliştirme sunucusu, genellikle ng serve komutu için mevcut seçeneklere karşılık gelen kendi seçenek setine sahiptir.

Karmaşık yapılandırma değerleri

assets, index, outputPath, styles ve scripts seçenekleri basit yol dizesi değerlerine veya belirli alanlara sahip nesne değerlerine sahip olabilir. sourceMap ve optimization seçenekleri basit bir boolean değerine ayarlanabilir. Yapılandırma dosyası kullanılarak karmaşık bir değer de verilebilir.

Aşağıdaki bölümler, bu karmaşık değerlerin her durumda nasıl kullanıldığı hakkında daha fazla ayrıntı sağlar.

Varlık yapılandırması

Her build hedef yapılandırması, projenizi derlerken olduğu gibi kopyalamak istediğiniz dosya veya klasörleri listeleyen bir assets dizisi içerebilir. Varsayılan olarak, public/ dizininin içerikleri kopyalanır.

Bir varlığı hariç tutmak için, onu varlık yapılandırmasından kaldırabilirsiniz.

Varlıkları, çalışma alanı köküne göre basit yollar yerine nesneler olarak belirterek kopyalanacak şekilde daha ayrıntılı yapılandırabilirsiniz. Bir varlık belirtim nesnesi aşağıdaki alanlara sahip olabilir.

Örneğin, varsayılan varlık yolları aşağıdaki nesneler kullanılarak daha ayrıntılı olarak temsil edilebilir.

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets/",
                "output": "/assets/"
              },
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              }
            ]
          }
        }
      }
    }
  }
}

Aşağıdaki örnek, varlıklar dizinindeki belirli dosyaları derlemeye kopyalanmaktan hariç tutmak için ignore alanını kullanır:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets/",
                "ignore": ["**/*.svg"],
                "output": "/assets/"
              }
            ]
          }
        }
      }
    }
  }
}

Stiller ve betikler yapılandırması

styles ve scripts seçenekleri için bir dizi girişi basit bir yol dizesi veya ek bir giriş noktası dosyasına işaret eden bir nesne olabilir. İlişkili oluşturucu, bu dosyayı ve bağımlılıklarını derleme sırasında ayrı bir paket olarak yükler. Bir yapılandırma nesnesiyle, bundleName alanını kullanarak giriş noktası için paketi adlandırma seçeneğiniz vardır.

Paket varsayılan olarak enjekte edilir, ancak paketi enjeksiyondan hariç tutmak için inject'i false olarak ayarlayabilirsiniz. Örneğin, aşağıdaki nesne değerleri stiller ve betikler içeren bir paket oluşturur ve adlandırır, ve enjeksiyondan hariç tutar:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "styles": [
              {
                "input": "src/external-module/styles.scss",
                "inject": false,
                "bundleName": "external-module"
              }
            ],
            "scripts": [
              {
                "input": "src/external-module/main.js",
                "inject": false,
                "bundleName": "external-module"
              }
            ]
          }
        }
      }
    }
  }
}

Stil ön işlemci seçenekleri

Sass'ta, hem bileşen hem de genel stiller için includePaths özelliğini kullanabilirsiniz. Bu, içe aktarmalar için kontrol edilen ek temel yollar eklemenize olanak tanır.

Yol eklemek için stylePreprocessorOptions seçeneğini kullanın:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/style-paths"]
            }
          }
        }
      }
    }
  }
}

Bu dizindeki dosyalar, örneğin src/style-paths/_variables.scss, projenizin herhangi bir yerinden göreceli yol olmadan içe aktarılabilir:

// src/app/app.scss
// Göreceli yol çalışır
@import '../style-paths/variables';

// Ama artık bu da çalışır
@import 'variables';

Optimizasyon yapılandırması

optimization seçeneği, derleme çıktısının daha ayrıntılı yapılandırılması için bir boolean veya nesne olabilir. Bu seçenek, derleme çıktısının aşağıdaki gibi çeşitli optimizasyonlarını etkinleştirir:

• Betik ve stillerin küçültülmesi
• Tree-shaking
• Ölü kod eliminasyonu
• Kritik CSS satır içi ekleme
• Font satır içi ekleme

Bir uygulamanın optimizasyonunu ince ayarlamak için çeşitli seçenekler kullanılabilir.

Stil optimizasyon seçenekleri

Font optimizasyon seçenekleri

Optimizasyonu birine veya diğerine uygulamak için aşağıdaki gibi bir değer sağlayabilirsiniz:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/style-paths"]
            }
          }
        }
      }
    }
  }
}

Kaynak haritası yapılandırması

sourceMap oluşturucu seçeneği, bir uygulamanın kaynak haritalarını kontrol etmek için bir boolean veya daha ayrıntılı yapılandırma nesnesi olabilir.

Aşağıdaki örnek, kaynak haritası çıktılarını yapılandırmak için bir veya daha fazla değerin nasıl değiştirileceğini gösterir:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "hidden": true,
              "vendor": true
            }
          }
        }
      }
    }
  }
}

Kaynak içeriği olmadan kaynak haritaları

sourcesContent alanı olmadan, yani orijinal kaynak kodunu içermeyen kaynak haritaları oluşturabilirsiniz. Bu, kaynak kodunuzu ifşa etmeden daha iyi hata raporlaması için orijinal kaynak adlarıyla üretim ortamına kaynak haritaları dağıtmanıza olanak tanır.

Kaynak haritalarından kaynak içeriğini hariç tutmak için sourcesContent seçeneğini false olarak ayarlayın:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "builder": "@angular/build:application",
          "options": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "sourcesContent": false
            }
          }
        }
      }
    }
  }
}

Dizin yapılandırması

Uygulamanın HTML dizininin oluşturulmasını yapılandırır.

index seçeneği, daha ayrıntılı yapılandırma için bir dize veya nesne olabilir.

Değer bir dize olarak sağlandığında, belirtilen yolun dosya adı oluşturulan dosya için kullanılır ve uygulamanın yapılandırılmış çıktı yolunun kökünde oluşturulur.

Dizin seçenekleri

Çıktı yolu yapılandırması

outputPath seçeneği, base değeri olarak kullanılacak bir Dize veya daha ayrıntılı yapılandırma için bir Nesne olabilir.

Bir uygulamanın çıktı yapısını ince ayarlamak için çeşitli seçenekler kullanılabilir.