Angular Academy · Ders

Uzak Modülleri Yükleme

Uzak mikro ön yüzleri dinamik olarak yükleyin

Uzak Modülleri Yükleme, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. 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.

Çalışma Zamanında Uzak Uygulama Alma

Bir uzak uygulama bir modülü dışa açtığında ve ana uygulama URL'sini bildiğinde, ana uygulama bunu loadRemoteModule ile isteğe bağlı olarak yükler. Bu, HTTP üzerinden yapılan dinamik bir içe aktarmadır: uzak uygulamaya ait hiçbir şey ana uygulamanın derlemesine dahil edilmez.

loadRemoteModule API'si

loadRemoteModule, uzak uygulama adını (bildirimden) ve dışa açılan anahtarı (uzak uygulamanın exposes yapısından) alır. Bu modül için bir promise döndürür.

import { loadRemoteModule } from '@angular-architects/native-federation';

const m = await loadRemoteModule('catalog', './Routes');

Uzak Yolları Tembel Yükleme

En temiz yaklaşım, her uzak uygulamadan bir routes dosyası dışa açmak ve bunu ana uygulamanın yönlendiricisinde loadChildren ile tembel olarak yüklemektir; böylece uzak uygulama yalnızca yolu ziyaret edildiğinde yüklenir.

export const routes: Routes = [
  {
    path: 'catalog',
    loadChildren: () =>
      loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
  },
];

Tek Bir Bileşeni Yükleme

Bir widget'ı bütün bir yol alanı yerine gömmek istediğinizde kullanışlı olacak şekilde, tek bir bağımsız bileşeni de dışa açıp yükleyebilirsiniz.

{
  path: 'widget',
  loadComponent: () =>
    loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}

Uzak Tarafta Dışa Açma

Ana uygulamanın bunu yükleyebilmesi için uzak uygulama, dışa aktarımı kendi exposes eşlemesine eklemelidir. Anahtar, ana uygulamanın loadRemoteModule'a geçirdiği değerdir.

// remote federation.config.js
exposes: {
  './Routes': './src/app/catalog.routes.ts',
  './Widget': './src/app/widget.component.ts',
}

Dinamik Bildirim Çözümleme

Ana uygulama bildirimi başlangıçta okuduğu için, farklı bir manifest dosyası göndererek ana uygulamayı yeniden derlemeden ortama göre (geliştirme, hazırlık, üretim) uzak uygulama URL'lerini değiştirebilirsiniz.

Yükleme Hatalarını Ele Alma

Uzak uygulamalar ağ üzerinden yüklenir ve başarısız olabilir (çevrimdışı olma, dağıtımın sürmesi). Tek bir bozuk uzak uygulamanın tüm kabuğu çökertmemesi için yüklemeleri hata işleme ile sarın.

loadRemoteModule('catalog', './Routes')
  .then(m => m.CATALOG_ROUTES)
  .catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));

Sınır Boyunca Veri Aktarma

Ana uygulama ile uzak uygulama arasındaki iletişim, doğrudan içe aktarmalar yerine paylaşılan tekil örnek hizmetler veya yönlendirici kullanır. Paylaşılan bir kimlik doğrulama hizmeti (tekil örnek), uzak uygulamanın ana uygulamanın ayarladığı mevcut kullanıcıyı okumasını sağlar.

Sürümleme ve Sözleşmeler

Dışa açılan anahtar (ör. ./Routes) ve yapısı bir sözleşme oluşturur. Dışa aktarım yapısını değiştirmek, bunu yükleyen ana uygulamaları bozabilir; bu nedenle dışa açılan modülleri herkese açık bir API gibi ele alın ve dikkatle sürümleyin.

Önceden Yükleme Stratejileri

Daha sonraki gezinmeyi anında yapmak için bir uzak uygulamayı uygulama boşta kaldıktan sonra istekli olarak önceden yükleyebilirsiniz; başlangıç yükünü yine de düşük tutarsınız. Bu yaklaşım, başlangıç hızı ile algılanan gezinme hızını dengeler.

Uçtan Uca Akış

Çalışma zamanı yolunu özetlemek gerekirse: ana uygulama bildirim dosyasını okur, kullanıcı federasyonlu bir rotaya gider, loadRemoteModule uzak uygulamanın remoteEntry.json dosyasını getirir, paylaşılan tekil örnekler yeniden kullanılır ve uzak uygulamanın rotaları/bileşeni ana uygulama kabuğunun içinde görüntülenir.

Kısa Kontrol

Ana uygulama uzak özelliği tembel olarak nasıl yükler?

Özet

Ana uygulamalar, uzak uygulamaları çalışma zamanında loadRemoteModule(name, key) ile, genellikle tembel rotalar için loadChildren/loadComponent içinde yükler. Uzak uygulamalar anahtarı expose etmelidir; bildirim dosyası her ortama uygun URL'leri çözümler. Yükleme hatalarını uygun biçimde ele alın, paylaşılan tekil örnekler üzerinden iletişim kurun ve dışa açılan modülleri sürümlendirilmiş sözleşmeler olarak değerlendirin.

Sıkça Sorulan Sorular

“Uzak Modülleri Yükleme” dersi ücretsiz mi?

Evet — “Uzak Modülleri Yükleme” 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.

“Uzak Modülleri Yükleme” dersinde ne öğreneceğim?

Uzak mikro ön yüzleri dinamik olarak yükleyin 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 4. dersidir.

“Uzak Modülleri Yükleme” 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