Angular Academy · पाठ

निर्भरताएँ साझा करना

रिमोट ऐप्स में Angular और लाइब्रेरी साझा करें

पाठ 3, कुल 4 में से13 चरण

निर्भरताएँ साझा करना, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 3वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

निर्भरताएँ साझा क्यों करें

यदि होस्ट और तीनों रिमोट Angular की अपनी-अपनी प्रति बंडल करते हैं, तो ब्राउज़र Angular को चार बार डाउनलोड करता है और, इससे भी बुरा, Angular के कई इंस्टेंस बना देता है, जिससे निर्भरता इंजेक्शन टूट जाता है। साझाकरण यह सुनिश्चित करता है कि एक ही प्रति एक बार लोड हो और सभी उसका पुनः उपयोग करें।

shared अनुभाग

federation.config.js में shared ऑब्जेक्ट यह घोषित करता है कि होस्ट और रिमोट के बीच कौन-सी निर्भरताएँ साझा की जाएँगी। Native Federation रनटाइम पर उनकी दोहराई गई प्रतियाँ हटा देता है।

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

shareAll सहायक

shareAll() आपके package.json की प्रत्येक निर्भरता को एक ही कॉन्फ़िगरेशन से साझा करता है। यह सामान्य शुरुआती बिंदु है; इसके बाद आप विशिष्ट पैकेजों की सेटिंग बदल सकते हैं।

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

singleton: Angular के लिए इसका महत्व

singleton: true पूरे ऐप में किसी पैकेज का ठीक एक इंस्टेंस अनिवार्य करता है। Angular core, RxJS और राउटर MUST सिंगलटन होने चाहिए; @angular/core की दो प्रतियों का अर्थ है दो इंजेक्टर ट्री और रनटाइम त्रुटियाँ।

संस्करणों पर सहमति

जब रिमोट अलग-अलग संस्करणों का अनुरोध करते हैं, तो federation संगत संस्करण चुनता है। strictVersion: true असंगतता पर चुपचाप गलत संस्करण लोड करने के बजाय त्रुटि उत्पन्न करता है, जिससे समस्याएँ जल्दी सामने आ जाती हैं।

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

अपनी लाइब्रेरी साझा करना

साझी डिज़ाइन-सिस्टम या प्रमाणीकरण लाइब्रेरी भी सिंगलटन होनी चाहिए, ताकि स्थिति, जैसे वर्तमान उपयोगकर्ता, एकसमान रहे। इसे नाम से स्पष्ट रूप से साझा करें।

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

requiredVersion: auto

requiredVersion: 'auto' आपके package.json से संस्करण पढ़ता है, इसलिए आपको उसे हार्डकोड नहीं करना पड़ता। निर्भरताएँ अपग्रेड करने पर इससे कॉन्फ़िगरेशन समकालिक रहता है।

रनटाइम पर क्या होता है

प्रत्येक बिल्ड अपने साझा पैकेजों के बारे में मेटाडेटा बनाता है। लोड होने के समय federation होस्ट और रिमोट के संस्करणों की तुलना करता है और इम्पोर्ट मैप के माध्यम से एक साझा मॉड्यूल उपलब्ध कराता है, इसलिए ब्राउज़र उसे केवल एक बार प्राप्त करता है।

साझा न करने की लागत

Angular को साझा करना भूल जाना एक सामान्य गलती है: ऐप पहले काम करता हुआ दिखाई देता है, फिर "NG0203: inject() must be called from an injection context" जैसी अस्पष्ट त्रुटियाँ देता है, क्योंकि Angular की दो प्रतियाँ मौजूद होती हैं। उसे सिंगलटन के रूप में साझा करने से यह समस्या रुकती है।

संस्करणों को एकसमान रखना

स्वतंत्र परिनियोजन समय के साथ अलग-अलग दिशा में जा सकते हैं। टीमों को फ़्रेमवर्क पैकेजों के लिए साझा संस्करण-सीमा पर सहमत होना चाहिए और समन्वय से अपग्रेड करना चाहिए, क्योंकि Angular 18 वाला होस्ट Angular 17 की आवश्यकता वाले रिमोट के साथ सुरक्षित रूप से साझा नहीं कर सकता।

साझा पैकेज को छोड़ना

कभी-कभी किसी रिमोट को छोटी उपयोगिता की अपनी अलग प्रति चाहिए होती है। आप उसे साझाकरण से बाहर रख सकते हैं, ताकि वह निजी रूप से बंडल हो; इसके बदले स्वतंत्रता पाने के लिए बढ़े हुए डुप्लिकेट आकार को स्वीकार करना होगा।

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

त्वरित जाँच

किन पैकेजों को सिंगलटन होना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

shared निर्भरताएँ घोषित करें, अक्सर shareAll के माध्यम से, ताकि होस्ट और रिमोट एक ही प्रति लोड करें। फ़्रेमवर्क और स्थिति रखने वाली लाइब्रेरी (@angular/core, राउटर, RxJS और आपकी प्रमाणीकरण लाइब्रेरी) के लिए singleton: true रखें; संस्करणों के असंतुलन को पकड़ने के लिए strictVersion और requiredVersion: 'auto' का उपयोग करें। Angular को साझा करना भूलने से DI त्रुटियाँ होती हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “निर्भरताएँ साझा करना” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “निर्भरताएँ साझा करना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“निर्भरताएँ साझा करना” में मैं क्या सीखूँगा?

रिमोट ऐप्स में Angular और लाइब्रेरी साझा करें आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 3वाँ पाठ है।

“निर्भरताएँ साझा करना” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ