Angular Academy · Ders

Angular için Yerel Federation

Angular'da modül federation'ını yapılandırın

Angular için Yerel Federation, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Native Federation Neden Kullanılır

Klasik Module Federation webpack'e bağlıydı. Angular'ın derleme sistemi esbuild'e geçtiği için topluluk aynı fikrin derleme aracından bağımsız bir uygulaması olan Native Federation'ı oluşturdu; bu uygulama web standartları (içe aktarma eşlemeleri ve ES modülleri) üzerine kuruludur.

Paket

Angular için Native Federation, @angular-architects/native-federation içinde bulunur. Bunu Angular CLI şemasıyla eklersiniz; şema yapılandırmayı ve derleme sürecini hazırlar.

ng add @angular-architects/native-federation

Ana Uygulamayı Başlatma

Kabuk uygulamasında şemayı çalıştırın ve dynamic-host seçeneğini belirleyin. Şema bir federation.config.js oluşturur ve Angular başlamadan önce federation'ı başlatmak üzere önyükleme işlemini günceller.

ng g @angular-architects/native-federation:init --project shell --type dynamic-host

Uzak Uygulamayı Başlatma

Bir özellik uygulaması için aynı başlatma işlemini remote ile çalıştırın. Bu işlem, uzak uygulamanın bölümlerini ana uygulamalara açan yapılandırmayı oluşturur.

ng g @angular-architects/native-federation:init --project catalog --type remote --port 4201

federation.config.js

Bu yapılandırma federation'ın merkezidir: uzak uygulamayı adlandırır, hangi öğeleri exposes ile dışa açtığını listeler ve shared bağımlılıklarını bildirir.

// catalog/federation.config.js
module.exports = withNativeFederation({
  name: 'catalog',
  exposes: { './Routes': './src/app/catalog.routes.ts' },
  shared: { ...shareAll({ singleton: true }) },
});

Önyükleme Değişiklikleri

Native Federation, içe aktarma eşlemelerinin hazır olması için önyüklemeden önce başlatılmayı gerektirir. Şema, main.ts dosyasını bootstrap.ts dosyasını yükleyen bir başlatma adımına böler.

// main.ts
import { initFederation } from '@angular-architects/native-federation';
initFederation()
  .then(() => import('./bootstrap'))
  .catch(err => console.error(err));

Ana Uygulamada Uzak Uygulamaları Listeleme

Ana uygulama, uzak uygulama adlarını bunların remoteEntry.json URL'leriyle eşleyen bir bildirim tutar; böylece her uzak uygulamanın çalışma zamanında nereden alınacağını bilir.

// federation.manifest.json
{
  "catalog": "http://localhost:4201/remoteEntry.json"
}

Bildirimi Yükleme

Bildirim yolunu initFederation'a geçirin. Ana uygulama bunu başlangıçta bir kez okur ve ardından listelenen herhangi bir uzak uygulamayı isteğe bağlı olarak yükleyebilir.

initFederation('/assets/federation.manifest.json')
  .then(() => import('./bootstrap'));

Standart Tabanlı, webpack'e Bağlı Değil

Native Federation yerel ES modüllerini ve içe aktarma eşlemelerini kullandığı için esbuild, Vite veya diğer paketleyicilerle çalışır. Modern Angular için önerilen yaklaşım haline gelmesinin nedeni bu ayrışmadır.

Uzak Uygulama Başına Geliştirme Sunucusu

Geliştirme sırasında her uzak uygulama kendi bağlantı noktasında çalışır (ng serve --port 4201). Ana uygulama bildirim üzerinden bu URL'lere yönelir; böylece tüm birleşimi yerel olarak çalıştırabilirsiniz.

Native Federation Size Ne Sağlar

Kısaca: bağımsız derlemeler, paylaşılan tekil örnekler (tek bir Angular örneği), uzak uygulamaların dinamik yüklenmesi ve belirli bir paketleyiciye bağımlı olmama. Sonraki derslerde bağımlılıkların paylaşılması ve uzak modüllerin yüklenmesi ayrıntılı olarak ele alınacaktır.

Kısa Kontrol

Angular'da klasik Module Federation yerine Native Federation neden tercih edilir?

Özet

Native Federation (@angular-architects/native-federation), içe aktarma eşlemelerini kullanarak modül federation'ını esbuild tabanlı Angular'a getirir. Şemayla ana ve uzak uygulamaları başlatın, federation.config.js içinde exposes ve shared yapılarını yapılandırın, önyüklemeden önce initFederation çağrısı yapın ve uzak uygulamaları bir bildirimde listeleyin.

Sıkça Sorulan Sorular

“Angular için Yerel Federation” dersi ücretsiz mi?

Evet — “Angular için Yerel Federation” 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.

“Angular için Yerel Federation” dersinde ne öğreneceğim?

Angular'da modül federation'ını yapılandırı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 2. dersidir.

“Angular için Yerel Federation” 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