Angular i18n Yapım Süresi ile Çalışma Süresi Açıklanıyor

Angular'da uluslararasılaştırma iki farklı modeli takip edebilir – yapım süresi veya çalışma zamanı. Resmi yaklaşım @angular/lokalize, bu da her dil için ayrı bir yapı oluşturur. Bu kurulum çalışma zamanında stabil ve hızlıdır, ancak birden fazla dağıtım planlaması gerektirir ve uygulama içi dil değiştirme gerektirmez.

Bunu uygulamak için metni şablonlarda ve TypeScript'te işaretlersiniz, çevirileri dosyaya çıkarırsınız, ardından her lokal için bir uygulama sürümü oluşturursunuz. Her dil kendi URL'sinden hizmet verir, böylece kullanıcılar dil değiştirme yoluyla uygulama içinde bir anahtar yerine gezinme yoluyla kullanılır.

Yeniden yükleme olmadan dinamik anahtarlama gerekiyorsa, çalışma zamanı kütüphaneleri bunu halleder. Popüler seçenekler arasında ngx-translate ve angular-i18next bulunur. Bunlar, isteğe bağlı olarak çevirileri yükler ve arayüzü anında güncelliyor; kurulum, performans ve SSR desteği konusunda farklı takaslar sunuyor.

Bu makalede, yerleşik Angular uluslararası (i18n) iş akışının nasıl çalıştığını, nasıl dağıtılacağını ve çalışma zamanı kütüphanesinin ne zaman daha uygun olduğunu açıklıyoruz.

Nasıl @angular/lokalize Eserler

Angular'ın yerleşik uluslararasılaşması, bir yapım zamanı iş akışı kullanır. Dağıtımdan önce çevirileri hazırlarsınız, sonra her dil için bir derlenmiş uygulama sürümünü gönderirsiniz.

Çalışma zamanı dili değiştirme yok, bu yüzden kurulum çıkarma ve yapı yapılandırmasına odaklanıyor.

Tam iş akışını gözden geçirelim:

1. Çeviri için metni şablonlarda ve TypeScript'te işaretleyin. HTML içeriği ve öznitelikleri için i18n özniteliğini kullanın ve kullanın $localize TypeScript'te bu yüzden dizgiler aynı çıkarma sürecine dahil edilir.
2. Mesajları Angular CLI kullanarak bir çeviri dosyasına çıkarın. Bu, varsayılan olarak bir XLIFF dosyası oluşturur; kurulumunuza göre mesaj kimlikleri ve kaynak metni içeren diğer formatlar için seçenekler sunulur.
3. Çıkarılmış dosyayı çevirin ve tanımlayıcıları sabit tutun. Kaynak metin güncellemeleri mevcut çevirileri bozmaz veya sessiz uyumsuzluklara yol açmasın diye gerekli yerlerde özel kimlikler ekleyin.
4. Her yerel uygulamanın bir sürümünü oluşturup dağıt. Yerel düzenlemeleri angular.json'de yapılandırın, ardından ayrı rotalar veya alan alanlarından hizmet verilen dile özgü paketler oluşturun.

Çoğulma ICU ifadeleri kullanır. Şöyle durumlar tanımlarsınız =0, =1, veya Diğer, ve Angular, aktif lokaliye göre doğru formu seçer. Diller ihtiyaç duydukları form sayısı açısından farklılık gösterir, bu yüzden mesaj yapısını erken planlayın.

İç içe yoğun bakım ifadeleri aynı deseni takip eder ancak karmaşıklığı artırır, bu yüzden okunabilir kalın ve yerel bölgeler arasında test yapın.

Çok yerel Angular uygulamaları oluşturmak ve dağıtmak

Angular'ın yapı zamanı i18n ile dağıtım doğrudan angular.json'yi nasıl yapılandırdığınıza bağlıdır. Bir kaynak yerel ve hedef yerel seti tanımlıyorsunuz, her biri bir çeviri dosyasına eşleniyor.

Geliştirme sırasında Angular uygulamayı bir kez derler, ardından sonradan işlem aşamasında yerel değişiklikler uygular. Bu, her dil için tam derlemeler çalıştırmadığınız anlamına gelir, ancak yine de her yerel için ayrı çıkış paketleri olur.

Her yerel uygulama genellikle bir alt yol veya alan tarafından hizmet verilen kendi uygulama sürümünü üretir. Yaygın bir kurulum ise şu yolları kullanır /en/ ve /fr/, her biri ilgili derleme çıktısına işaret eder. Bu yapı, çevrilmiş içeriğin dosyalara entegre edilmesi nedeniyle gereklidir, bu yüzden dil değiştirmek farklı bir derleme yüklemek anlamına gelir.

Sunucu yapılandırması i18n kurulumunun bir parçası haline gelir. Gelen isteklerin doğru yerel versiyona eşleyen yönlendirme kurallarına ihtiyacınız var.

Uygulama ortama göre büyük ölçüde değişiyor – Nginx'te ham yeniden yazma kuralları ile Firebase Hosting'te birkaç açıklama satrı – ama amaç aynı. İstekler, URL yapısı veya yönlendirme mantığına göre doğru yerelleştirilmiş pakete çözüm bulmalıdır.

Angular, sunucu tarafı render kullanıldığında otomatik dil algılamasını da destekler. Sunucu tarayıcının Kabul Dili başlık ile eşleştirildiğinde, ardından kullanıcıları eşleşen yerel yola yönlendirir. Bu, ilk ziyaret deneyimini iyileştirir, ancak daha sonra dil değiştirirken yine de tam sayfa yüklenmesine neden olur.

Geliştirme aşamasında, Angular geliştirici sunucusu alt yollar kullanarak birden fazla yerel hizmet verebilir. Bu test için yardımcı olur, ancak diller arasında geçiş yapmak yine de yenileme gerektirir çünkü her yerel ayrı bir derleme çıktısıdır.

Bu modelin açık altyapı sonuçları vardır. Birden fazla derleme artefaktını yönetiyorsunuz, her yerel için yönlendirmeyi yapılandırıyorsunuz ve yönlendirmeleri sunucu seviyesinde yönetiyorsunuz. CI boru hatları, çeviri güncellemelerini hesaba katmalı ve içerik değiştiğinde yerel çıktıları yeniden inşa etmelidir.

Alternatif bir yaklaşım bu karmaşıklığı önler. A Ters vekil modeli, örneğin Weglotsunucu ile tarayıcı arasında duruyor. İçeriği anında çevirir ve tek bir dağıtımdan tüm dillere hizmet verir. Bu, birden fazla yapı ve yönlendirme kurallarına ihtiyaç ortadan kaldırıyor. Daha fazla bilgiWeglot Sonra!

Çalışma zamanı kütüphanelerinin karşılaştırılması: ngx-translate, Transloco ve angular-i18next

Çalışma zamanı kütüphaneleri, Angular'ın yerleşik i18n'inden farklı bir sorunu çözer. Çevirileri uygulamaya derlemek yerine, çalışma zamanında yükler ve tam yeniden yükleme olmadan arayüzü güncelliyorlar.

Bu da kullanıcıların uygulama içinde dil değiştirmesi gerektiğinde veya içerik sık sık değiştiğinde daha iyi uyum sağlar.

ngx-translate en yaygın kullanılan seçenektir. Anında dil geçişini destekler translate.use(), çeviriler JSON dosyalarından veya API'lerden yüklenir. Küçük uygulamalarda iyi çalışıyor ve burada onaylanmış tek seçenek İyonik uyumluluk. SSR şu şekilde mümkündür TransferState ve özel yükleyiciler var, ancak kurulum gerektiriyor. Son sürümler sağlayıcı tabanlı bir API, bu da bağımsız bileşenlerle daha iyi uyum sağlar.

Transloco Yapı ve ölçeklenebilirliğe odaklanır. Yerleşik SSR desteği ve ng add ile daha düzenli bir kurulum sağlar. Ayrıca kapsamlı çevirileri destekler, böylece her bir özellik başına dil dosyalarını tembelce yüklemenizi sağlar. Bu, paket boyutunu azaltır ve büyük uygulamaların sürdürülebilir olmasını sağlar. Dil değiştirme kullanımları setActiveLang() ve arayüzü hemen güncelliyor.

angular-i18next , i18next ekosistemini sarar. Ekibiniz zaten i18next'i diğer frameworklerde kullanıyorsa ve projeler arasında tutarlılık istiyorsa bu faydalıdır. i18next çekirdeğinden eklentileri, ICU yönetimi de dahil olmak üzere destekler. Dil değiştirme genellikle yeniden yükleme gerektirir, bu da anında güncellemeler bekleyen uygulamalarda kullanımını sınırlar.

İşte daha doğrudan bir karşılaştırma:

Seçim, uygulamanızın dil değişikliklerini ve ölçeklendirmesini nasıl ele aldığına bağlıdır:

• Basit bir kurulum veya İyon desteği gerekiyorsa ngx-translate kullanın.
• SSR veya modüler çeviri ihtiyaçları olan büyük uygulamalar için Transloco kullanın.
• i18next ile birden fazla platformda hizalama istiyorsanız angular-i18next kullanın.

💡 Eğer çalışma zamanı anahtarlama gerekmiyorsa ve minimal istemci mantığı tercih ediyorsanız, Angular'ın dahili i18n seçeneği daha iyi seçenek olarak kalıyor.

Angular uygulamalarını kod değiştirmeden çevirmek

Angular'ın yerleşik i18n ve çalışma zamanı kütüphanelerinin dışında üçüncü bir seçenek var: harici web sitesi çeviri araçları. Bu araçlar Angular uygulamasının dışında duruyor ve kod tabanı içindeki dizileri yerine render edilen çıktıyı çeviriyor.

Daha önce belirtildiği gibi, Weglot ters proxy modeli kullanır. Sunucu ile tarayıcı arasında durur, HTML yanıtını algılar ve ardından ziyaretçilere çevirilmiş versiyonlar sunar. Bu, i18n ile dizileri işaretlememe, JSON çeviri dosyalarını yönetmek veya uygulamayı her yerel için yeniden oluşturmak anlamına gelir. Kurulum daha hızlı çünkü çeviri katmanı Angular dışında işleniyor.

Bu yaklaşım aynı zamanda çeviri çalışmalarının nerede gerçekleştiğini de değiştirir. Projede dosyaları düzenlemek yerine, çevirmenler görsel bir gösterge paneli kullanıyor. Sayfaları inceleyebilir ve sözlük kurallarını şablonlara veya TypeScript'e dokunmadan uygulayabilirler. İçerik ağırlıklı pazarlama siteleri için bu, geliştirici katılımını azaltabilir.

Dil değiştirme de daha akıcı hissettirebilir. Weglot tam bir Angular yeniden oluşturma süreci gerektirmeden görünür dili güncelleyen JavaScript tabanlı bir anahtarı destekliyor. Bu da çok dilli içeriği hızlıca başlatmayı kolaylaştırıyor.

Karşılığında ise kontrol sağlanıyor. Çeviri, Angular sayfayı render ettikten sonra gerçekleştiği için, bu model TypeScript içindeki dile bağlı uygulama mantığını işlemez. Ayrıca, içeriğin bir proxy arkasında değil, uygulamanın içinde yaşaması gereken Ionic uygulamaları ve çevrimdışı öncelikli uygulamalar için de pek ideal bir uyum değil.

SEO ayrıca kuruluma da bağlıdır. Ters proxy çevirisi, indekslenebilir çevrilmiş sayfaları destekleyebilir, ancak basit bir JavaScript snippet tek başına SEO dostu yerel URL'ler oluşturmaz. Organik arama trafiği hedefin bir parçası ise bu önemlidir.

Bu model, uygulama kodunu değiştirmeden çok dilli sayfalar isteyen ekipler için en iyisidir. Dil yönlendirme veya iş mantığını etkilediğinde bu daha az uygun. Ayrıca aktif bir abonelik gerektirir, çünkü çevrilmiş içerik hizmete bağlı kalır.

Doğru Angular i18n yaklaşımını seçmek

Angular'ın uluslararasılaştırılmasına doğru yaklaşım, uygulamanızın dilleri pratikte nasıl işlediğine bağlıdır.

Build-time i18n performans ve istikrarı önceliklendirirken, çalışma zamanı kütüphaneleri arayüz içindeki esnekliğe odaklanır. Harici araçlar uygulama işinin çoğunu kaldırır ama kontrolü kod tabanının dışına kaydırır.

Seç @angular/lokalize çalışma zamanı performansı kritik olduğunda ve ekibiniz CI'de ayrı yerel derlemeleri rahat yönettiğinde. Dil değişimi uygulama içinde değil, navigasyon yoluyla yapılabildiğinde en iyi şekilde uyunuyor.

Kullanıcılar yeniden yükleme olmadan dil değiştirmek zorunda olduğunda ve yaygın olarak benimsenen bir çalışma zamanı seçeneği istediğinizde ngx-translate seçin. Burada Ionic projeleri ve daha küçük Angular uygulamaları için en güçlü uyum.

Çalışma zamanı anahtarlaması ve daha büyük uygulamalar için daha güçlü yapıya ihtiyacınız olduğunda Transloco'yu seçin. SSR kurulumları ve kapsamlı, tembel yüklemeli çeviri dosyaları isteyen takımlar için iyi bir uyum.

Seç Weglot amaç çok dilli bir web sitesi ise Angular kod tabanına çeviri mantığı eklemeden kullanılır. İçerik sunumu ve hızlı dağıtım için en iyisidir, TypeScript davranışının dil bazında değişmesi gereken uygulamalar için değil.

{{demo-banner}}