रिमोट मॉड्यूल लोड करना
रिमोट माइक्रो फ़्रंटएंड को गतिशील रूप से लोड करें
रिमोट मॉड्यूल लोड करना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
रनटाइम पर रिमोट लाना
जब कोई रिमोट मॉड्यूल उपलब्ध करा देता है और होस्ट को उसका URL पता होता है, तो होस्ट उसे आवश्यकता पड़ने पर loadRemoteModule से लोड करता है। यह HTTP के माध्यम से होने वाला गतिशील इम्पोर्ट है: होस्ट बिल्ड में रिमोट का कुछ भी बंडल नहीं होता।
loadRemoteModule API
loadRemoteModule रिमोट का नाम (मेनिफ़ेस्ट से) और उपलब्ध कराई गई कुंजी (रिमोट के exposes से) लेता है। यह उस मॉड्यूल का प्रॉमिस लौटाता है।
import { loadRemoteModule } from '@angular-architects/native-federation';
const m = await loadRemoteModule('catalog', './Routes');रिमोट रूट को धीमे लोड करना
सबसे साफ़ तरीका यह है कि प्रत्येक रिमोट से एक routes फ़ाइल उपलब्ध कराई जाए और होस्ट राउटर में उसे loadChildren से धीमे लोड किया जाए। इस तरह रिमोट तभी लोड होता है जब उसका रूट देखा जाता है।
export const routes: Routes = [
{
path: 'catalog',
loadChildren: () =>
loadRemoteModule('catalog', './Routes').then(m => m.CATALOG_ROUTES),
},
];एकल कंपोनेंट लोड करना
आप किसी एक स्वतंत्र कंपोनेंट को भी उपलब्ध कराकर लोड कर सकते हैं। यह पूरे रूट क्षेत्र के बजाय किसी विजेट को एम्बेड करने के लिए उपयोगी है।
{
path: 'widget',
loadComponent: () =>
loadRemoteModule('dashboard', './Widget').then(m => m.WidgetComponent),
}रिमोट की ओर से उपलब्ध कराना
होस्ट द्वारा लोड किए जाने के लिए रिमोट को अपने exposes मैप में निर्यात सूचीबद्ध करना होगा। यही कुंजी होस्ट loadRemoteModule को देता है।
// remote federation.config.js
exposes: {
'./Routes': './src/app/catalog.routes.ts',
'./Widget': './src/app/widget.component.ts',
}गतिशील मेनिफ़ेस्ट समाधान
होस्ट स्टार्टअप पर मेनिफ़ेस्ट पढ़ता है, इसलिए आप होस्ट को दोबारा बिल्ड किए बिना अलग मेनिफ़ेस्ट फ़ाइल भेजकर प्रत्येक वातावरण (विकास, स्टेजिंग, उत्पादन) के लिए रिमोट URL बदल सकते हैं।
लोडिंग विफलताओं को संभालना
रिमोट नेटवर्क पर लोड किए जाते हैं और विफल हो सकते हैं, जैसे ऑफ़लाइन होने या परिनियोजन जारी रहने पर। लोडिंग को त्रुटि-प्रबंधन में लपेटें, ताकि एक खराब रिमोट पूरे शेल को क्रैश न कर दे।
loadRemoteModule('catalog', './Routes')
.then(m => m.CATALOG_ROUTES)
.catch(() => import('./fallback.routes').then(m => m.FALLBACK_ROUTES));सीमा के पार डेटा भेजना
होस्ट और रिमोट के बीच संचार सीधे इम्पोर्ट से नहीं, बल्कि साझा सिंगलटन सेवाओं या राउटर से होता है। साझा प्रमाणीकरण सेवा (सिंगलटन) किसी रिमोट को होस्ट द्वारा सेट किए गए वर्तमान उपयोगकर्ता को पढ़ने देती है।
संस्करण और अनुबंध
उपलब्ध कराई गई कुंजी, जैसे ./Routes, और उसका आकार मिलकर एक अनुबंध बनाते हैं। निर्यात का आकार बदलने से उसे लोड करने वाले होस्ट टूट सकते हैं, इसलिए उपलब्ध कराए गए मॉड्यूल को सार्वजनिक API की तरह समझें और उनके संस्करण सावधानी से निर्धारित करें।
प्रीलोड करने की रणनीतियाँ
ऐप के निष्क्रिय होने के बाद आप किसी रिमोट को पहले से लोड कर सकते हैं, ताकि बाद का नेविगेशन तुरंत हो, जबकि शुरुआती लोड हल्का बना रहे। इससे स्टार्टअप की गति और अनुभव की गई नेविगेशन गति के बीच संतुलन बनता है।
एंड-टू-एंड प्रवाह
रनटाइम पथ का संक्षेप में पुनरावलोकन करें: होस्ट मैनिफेस्ट पढ़ता है, उपयोगकर्ता फ़ेडरेटेड रूट पर जाता है, loadRemoteModule रिमोट की remoteEntry.json फ़ाइल प्राप्त करता है, साझा सिंगलटन का फिर से उपयोग किया जाता है, और रिमोट के रूट/कंपोनेंट होस्ट शेल के भीतर रेंडर होते हैं।
त्वरित जाँच
होस्ट किसी रिमोट फ़ीचर को लेज़िली कैसे लोड करता है?
पुनरावलोकन
होस्ट रनटाइम पर loadRemoteModule(name, key) से रिमोट लोड करते हैं, आमतौर पर लेज़ी रूट के लिए loadChildren/loadComponent के भीतर। रिमोट को expose की सहायता से कुंजी उपलब्ध करानी होती है; मैनिफेस्ट हर वातावरण के लिए URL निर्धारित करता है। लोड विफलताओं को सहजता से संभालें, साझा सिंगलटन के माध्यम से संवाद करें, और एक्सपोज़ किए गए मॉड्यूल को संस्करणित अनुबंध मानें।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “रिमोट मॉड्यूल लोड करना” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “रिमोट मॉड्यूल लोड करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“रिमोट मॉड्यूल लोड करना” में मैं क्या सीखूँगा?
रिमोट माइक्रो फ़्रंटएंड को गतिशील रूप से लोड करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।
“रिमोट मॉड्यूल लोड करना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- माइक्रो फ़्रंटएंड आर्किटेक्चर
- Angular के लिए नेटिव फ़ेडरेशन
- निर्भरताएँ साझा करना
- रिमोट मॉड्यूल लोड करना