Çevirileri uygulamaya birleştirme

Tamamlanan çevirileri projenize birleştirmek için aşağıdaki işlemleri tamamlayın

1. Projenizin dağıtılabilir dosyalarının bir kopyasını oluşturmak için Angular CLI kullanın
2. Tüm i18n mesajlarını geçerli çevirilerle değiştirmek ve yerelleştirilmiş bir uygulama varyantı oluşturmak için "localize" seçeneğini kullanın. Bir varyant uygulama, uygulamanızın tek bir yerel ayar için çevrilmiş dağıtılabilir dosyalarının tam bir kopyasıdır.

Çevirileri birleştirdikten sonra, sunucu tarafı dil algılama veya farklı alt dizinler kullanarak uygulamanın her dağıtılabilir kopyasını sunun.

Uygulamanın derleme zamanı çevirisi için, derleme süreci küçük, hızlı ve çalıştırmaya hazır bir uygulama üretmek üzere önceden derleme (AOT) kullanır.

Her yerel ayar için ayrı bir dağıtılabilir uygulama kopyası oluşturmak üzere, projenizin angular.json çalışma alanı derleme yapılandırma dosyasındaki derleme yapılandırmasında yerel ayarları tanımlayın.

Bu yöntem, her yerel ayar için tam bir uygulama derlemesi yapma gereksinimini ortadan kaldırarak derleme sürecini kısaltır.

Her yerel ayar için uygulama varyantları oluşturmak üzere, angular.json çalışma alanı derleme yapılandırma dosyasındaki "localize" seçeneğini kullanın. Ayrıca, komut satırından derlemek için build Angular CLI komutunu --localize seçeneğiyle kullanın.

Derleme yapılandırmasında yerel ayarları tanımlama

Bir proje için yerel ayarları tanımlamak üzere projenizin angular.json çalışma alanı derleme yapılandırma dosyasındaki i18n proje seçeneğini kullanın.

Aşağıdaki alt seçenekler kaynak dili tanımlar ve derleyiciye proje için desteklenen çevirilerin nerede bulunacağını söyler.

i18n özelliklerinin tam listesi ve türleri için i18n seçenekleri bölümüne bakın.

en-US ve fr için angular.json örneği

Örneğin, aşağıdaki angular.json çalışma alanı derleme yapılandırma dosyası alıntısı, kaynak yerel ayarını en-US olarak ayarlar ve Fransızca (fr) yerel ayar çeviri dosyasının yolunu sağlar.

"projects": {
    "angular.io-example": {
      // ...
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf",
            // ...
          }
        }
      },
      "architect": {
        // ...
      }
    }
  }
}

Her yerel ayar için uygulama varyantları oluşturma

Derleme yapılandırmasındaki yerel ayar tanımınızı kullanmak için, angular.json çalışma alanı derleme yapılandırma dosyasındaki "localize" seçeneğini kullanarak CLI'ya derleme yapılandırması için hangi yerel ayarların oluşturulacağını söyleyin.

• Derleme yapılandırmasında daha önce tanımlanan tüm yerel ayarlar için "localize" değerini true olarak ayarlayın.
• Yalnızca belirli yerel ayar sürümlerini derlemek için "localize" değerini daha önce tanımlanmış yerel ayar tanımlayıcılarının bir alt kümesinin dizisi olarak ayarlayın.
• Yerelleştirmeyi devre dışı bırakmak ve herhangi bir yerel ayara özel sürüm oluşturmamak için "localize" değerini false olarak ayarlayın.

Bu ayarı değiştirdiyseniz, AOT kullanmak için "aot" değerini true olarak ayarlayın.

CLI yerel ayar verilerini yükler ve kaydeder, oluşturulan her sürümü diğer yerel ayar sürümlerinden ayrı tutmak için yerel ayara özel bir dizine yerleştirir ve dizinleri proje için yapılandırılmış outputPath içine koyar. Her uygulama varyantı için html öğesinin lang niteliği yerel ayara ayarlanır. CLI ayrıca yapılandırılmış baseHref'e yerel ayarı ekleyerek uygulamanın her sürümü için HTML temel HREF'ini ayarlar.

"localize" özelliğini tüm yapılandırmalar için etkili bir şekilde miras almak üzere paylaşılan bir yapılandırma olarak ayarlayın. Ayrıca, diğer yapılandırmaları geçersiz kılmak için özelliği ayarlayın.

Derleme örneğinden tüm yerel ayarları içeren angular.json

Aşağıdaki örnek, tüm derleme yapılandırmasında tanımlanan yerel ayarların derlenmesi için angular.json çalışma alanı derleme yapılandırma dosyasında "localize" seçeneğinin true olarak ayarlandığını göstermektedir.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "localize": true,
            // ...
          },

Komut satırından derleme

Ayrıca, ng build komutuyla ve mevcut production yapılandırmanızla --localize seçeneğini kullanın. CLI, derleme yapılandırmasında tanımlanan tüm yerel ayarları derler. Derleme yapılandırmasında yerel ayarları ayarlarsanız, "localize" seçeneğini true olarak ayarladığınız zamana benzerdir.

ng build --localize

Yalnızca bir yerel ayar için belirli derleme seçeneklerini uygulama

Belirli derleme seçeneklerini yalnızca bir yerel ayara uygulamak için, özel bir yerel ayara özel yapılandırma oluşturmak üzere tek bir yerel ayar belirtin.

Fransızca için derleme örneği

Aşağıdaki örnek, tek bir yerel ayar kullanan özel bir yerel ayara özel yapılandırmayı göstermektedir.

"build": {
          // ...
          "configurations": {
            // ...
            "fr": {
              "localize": ["fr"]
            }
          },
          // ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            // ...
            "fr": {
              "buildTarget": "angular.io-example:build:development,fr"
            }
          },
          // ...
        },
        // ...
      }

Bu yapılandırmayı ng serve veya ng build komutlarına geçirin. Aşağıdaki kod örneği, Fransızca dil dosyasının nasıl sunulacağını göstermektedir.

ng serve --configuration=fr

Üretim derlemeleri için, her iki yapılandırmayı da çalıştırmak üzere yapılandırma bileşimini kullanın.

ng build --configuration=production,fr

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
          },
          "configurations": {
            // ...
            "fr": {
              "localize": ["fr"]
            }
          },
          // ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "angular.io-example:build:production"
            },
            // ...
            "fr": {
              "buildTarget": "angular.io-example:build:development,fr"
            }
          },
          // ...
        },
        // ...
      }

Eksik çevirileri raporlama

Bir çeviri eksik olduğunda, derleme başarılı olur ancak Missing translation for message "{translation_text}" gibi bir uyarı oluşturur. Angular derleyicisi tarafından oluşturulan uyarı seviyesini yapılandırmak için aşağıdaki seviyelerden birini belirtin.

Uyarı seviyesini projenizin angular.json çalışma alanı derleme yapılandırma dosyasındaki build hedefinin options bölümünde belirtin.

angular.json error uyarı örneği

Aşağıdaki örnek, uyarı seviyesinin error olarak nasıl ayarlanacağını göstermektedir.

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            // ...
            "i18nMissingTranslation": "error"
          },

Angular uygulamanızı çevirdiğinizde, çeviri dönüşümü şablon literal dizesinin parçalarını (statik dizeler ve ifadeler) bir çeviri koleksiyonundaki dizelerle değiştirir ve yeniden sıralar. Daha fazla bilgi için $localize bölümüne bakın.

Sıradaki