Angular Academy · Ders

Bağımlılıkları Paylaşma

Angular'ı ve kitaplıkları uzak uygulamalar arasında paylaşın

Bağımlılıkları Paylaşma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.

Bağımlılıklar Neden Paylaşılır

Ana uygulama ve üç uzak uygulamanın her biri kendi Angular kopyasını paketlerse tarayıcı Angular'ı dört kez indirir ve daha kötüsü, bağımlılık enjeksiyonunu bozan birden fazla Angular örneğiyle sonuçlanır. Paylaşım, tek bir kopyanın bir kez yüklenmesini ve herkes tarafından yeniden kullanılmasını sağlar.

shared Bölümü

federation.config.js içindeki shared nesnesi, ana uygulama ile uzak uygulamalar arasında hangi bağımlılıkların paylaşılacağını bildirir. Native Federation bunların yinelenen kopyalarını çalışma zamanında kaldırır.

module.exports = withNativeFederation({
  shared: {
    ...shareAll({ singleton: true, strictVersion: true }),
  },
});

shareAll Yardımcısı

shareAll(), tek bir yapılandırmayla package.json içindeki tüm bağımlılıkları paylaşır ve yaygın başlangıç noktasıdır. Ardından belirli paketleri geçersiz kılabilirsiniz.

shared: {
  ...shareAll({ singleton: true, strictVersion: true, requiredVersion: 'auto' }),
}

singleton: Angular İçin Önemi

singleton: true, uygulamanın tamamında bir paketin tam olarak tek bir örneğini zorunlu kılar. Angular çekirdeği, RxJS ve yönlendirici MUST tekil örnekler olmalıdır; iki @angular/core kopyası, iki enjektör ağacı ve çalışma zamanı hataları anlamına gelir.

Sürüm Uzlaştırma

Uzak uygulamalar farklı sürümler istediğinde federation uyumlu bir sürüm seçer. strictVersion: true, uyumsuzluk durumunda sessizce eşleşmeyen bir sürüm yüklemek yerine hata verir ve sorunları erkenden görünür kılar.

shared: {
  '@angular/core': { singleton: true, strictVersion: true, requiredVersion: '^18.0.0' },
}

Kendi Kütüphanelerinizi Paylaşma

Paylaşılan bir tasarım sistemi veya kimlik doğrulama kütüphanesi de tekil örnek olmalıdır; böylece durum (mevcut kullanıcı gibi) tutarlı kalır. Kütüphaneyi adıyla açıkça paylaşın.

shared: {
  '@myorg/design-system': { singleton: true, requiredVersion: 'auto' },
  '@myorg/auth': { singleton: true },
}

requiredVersion: auto

requiredVersion: 'auto', sürümü sabit olarak yazmanızı gerektirmeden package.json dosyanızdan okur. Bu, bağımlılıkları yükselttiğinizde yapılandırmanın eşzamanlı kalmasını sağlar.

Çalışma Zamanında Ne Olur

Her derleme, paylaşılan paketleriyle ilgili üst veriler oluşturur. Yükleme sırasında federation, ana uygulama ile uzak uygulamalardaki sürümleri karşılaştırır ve içe aktarma eşlemesi üzerinden tek bir paylaşılan modül sunar; böylece tarayıcı bunu yalnızca bir kez alır.

Paylaşmamanın Maliyeti

Angular'ı paylaşmayı unutmak klasik bir hatadır: uygulama çalışıyor gibi görünür, ardından iki Angular kopyası bulunduğu için "NG0203: inject() must be called from an injection context" gibi anlaşılması güç hatalar verir. Tekil örnek olarak paylaşmak bunu önler.

Sürümleri Uyumlu Tutma

Bağımsız dağıtımlar zamanla birbirinden uzaklaşabilir. Ekipler, çerçeve paketleri için ortak bir sürüm aralığında anlaşmalı ve yükseltmeleri eşgüdümlü yapmalıdır; çünkü Angular 18 kullanan bir ana uygulama, Angular 17 gerektiren bir uzak uygulamayla güvenli biçimde paylaşım yapamaz.

Paylaşılan Bir Paketi Atlamа

Bazen bir uzak uygulamanın küçük bir yardımcı programın kendi yalıtılmış kopyasına ihtiyacı olabilir. Paylaşımdan çıkararak bu paketi özel olarak paketleyebilirsiniz; bunun karşılığında bağımsızlık için yinelenen boyutu kabul etmiş olursunuz.

shared: {
  ...shareAll({ singleton: true }),
}
// skip a package by removing it from the shared map / excluding it

Kısa Kontrol

Hangi paketler tekil örnek olmalıdır?

Özet

shared bağımlılıklarını (genellikle shareAll aracılığıyla) bildirerek ana ve uzak uygulamaların tek bir kopya yüklemesini sağlayın. Çerçeve ve durum tutan kütüphaneleri (@angular/core, yönlendirici, RxJS, kimlik doğrulama kütüphaneniz) singleton: true yapın; sürüm farklılıklarını yakalamak için strictVersion ve requiredVersion: 'auto' kullanın. Angular'ı paylaşmayı unutmak DI hatalarına yol açar.

Sıkça Sorulan Sorular

“Bağımlılıkları Paylaşma” dersi ücretsiz mi?

Evet — “Bağımlılıkları Paylaşma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.

“Bağımlılıkları Paylaşma” dersinde ne öğreneceğim?

Angular'ı ve kitaplıkları uzak uygulamalar arasında paylaşın Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Angular Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Bağımlılıkları Paylaşma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Angular Academy Sayfasına Dön