Angular 15 में MicroFrontends को लागू करना

Mar 07 2023

माइक्रोफ्रंटेंड क्या है? MicroFrontends वेब अनुप्रयोगों के निर्माण के लिए उन्हें छोटे, स्वतंत्र और शिथिल युग्मित मॉड्यूल में तोड़कर एक वास्तुशिल्प शैली है। प्रत्येक मॉड्यूल, या माइक्रोफ्रंटेंड, स्वतंत्र रूप से विकसित और तैनात किया जाता है, इसकी निर्भरता, प्रौद्योगिकियों और टीमों के अपने सेट के साथ।

कोणीय माइक्रोफ्रंट आर्किटेक्चर

माइक्रोफ्रंटेंड क्या है?

MicroFrontends वेब अनुप्रयोगों के निर्माण के लिए उन्हें छोटे, स्वतंत्र और शिथिल युग्मित मॉड्यूल में तोड़कर एक वास्तुशिल्प शैली है। प्रत्येक मॉड्यूल, या माइक्रोफ्रंटेंड, स्वतंत्र रूप से विकसित और तैनात किया जाता है, इसकी निर्भरता, प्रौद्योगिकियों और टीमों के अपने सेट के साथ।

एंगुलर 15 में माइक्रोफ्रंटेंड को लागू करने में एप्लिकेशन को छोटे भागों में तोड़ना शामिल है जिसे स्वतंत्र रूप से विकसित और तैनात किया जा सकता है। घटकों, सेवाओं और मॉड्यूल के अपने सेट के साथ प्रत्येक माइक्रोफ्रंटेंड का अपना कोणीय अनुप्रयोग होना चाहिए।

Angular 15 में MicroFrontend को लागू करने के मुख्य चरण:

व्यावसायिक डोमेन या कार्यक्षमता के आधार पर एप्लिकेशन को छोटे, स्वतंत्र भागों में विभाजित करें।
घटकों, सेवाओं और मॉड्यूल के अपने स्वयं के सेट के साथ, प्रत्येक माइक्रोफ्रंटेंड के लिए एक कोणीय एप्लिकेशन बनाएं।
MicroFrontends के बीच संचार के लिए API अनुबंध को परिभाषित करें। यह रेस्टफुल एपीआई, वेबसाकेट या कस्टम इवेंट हो सकता है।
रनटाइम पर मुख्य एप्लिकेशन में माइक्रोफ्रंट्स को गतिशील रूप से लोड करने के लिए मॉड्यूल फेडरेशन प्लगइन का उपयोग करें। मॉड्यूल संघ वेबपैक में एक विशेषता है जो कई अनुप्रयोगों को रनटाइम पर कोड साझा करने की अनुमति देता है।
एक साझा मॉड्यूल को लागू करें जिसमें सामान्य कोड और घटक शामिल हैं जिनका उपयोग कई माइक्रोफ्रंटेंड द्वारा किया जा सकता है।
एक केंद्रीकृत राज्य प्रबंधन प्रणाली का उपयोग करें, जैसे Redux या NgRx, MicroFrontends में एप्लिकेशन स्थिति का प्रबंधन करने के लिए।
एक सुसंगत उपयोगकर्ता अनुभव सुनिश्चित करने के लिए MicroFrontends में एक सुसंगत UI डिज़ाइन सिस्टम लागू करें।

मॉड्यूल फेडरेशन का उपयोग करके एंगुलर में माइक्रोफ्रंटेंड

होस्ट एप्लिकेशन कॉन्फ़िगरेशन

1. एक होस्ट एप्लिकेशन बनाना

ng new angular-mfe-example --create-application="false"

2. होस्ट ऐप बनाएं (मुख्य एप्लिकेशन)

यह मुख्य एप्लिकेशन है जहां हम सभी दूरस्थ एप्लिकेशन प्राप्त कर रहे हैं और उनके लिए रूटिंग कॉन्फ़िगर कर रहे हैं।

ng g application host

व्यवस्थापक घटक बनाना

4. व्यवस्थापक के लिए पथ जोड़ने और AppComponent को बदलने के लिए रूट अपडेट करें

ऐप-routing.module.ts में रूट जोड़ें

ऐप-routing.module.ts

app.component.html को साफ करें और नीचे कोड जोड़ें

app.component.html

5. एप्लिकेशन चलाएं

ng serve host

4200 तस्वीर पर मेजबान की सेवा

एक दूरस्थ अनुप्रयोग और कॉन्फ़िगरेशन बनाना

1. एक दूरस्थ अनुप्रयोग 1 और दूरस्थ अनुप्रयोग 2 बनाएँ

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                
                    
                    
       adding home module and component to remoteapp1
      
                
            

      
                
                    
                    
       adding home module and component to remoteapp2

रिमोट ऐप्स के लिए राउटर कॉन्फिग

5. अब मॉड्यूल फेडरेशन पैकेज को तीन अनुप्रयोगों में जोड़ रहा है

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002