एंगुलर एलिमेंट्स का इस्तेमाल करके माइक्रो फ्रंटएंड्स बनाना: एक बिगिनर गाइड

पिछले दस वर्षों में, फ्रंट-एंड डेवलपमेंट बहुत अधिक जटिल हो गया है: शुद्ध एचटीएमएल / सीएसएस से उच्च अंतःक्रियाशीलता, पहुंच, परीक्षण और सुरक्षा जैसे विषयों पर। इन जरूरतों को पूरा करने के लिए, अधिकांश विकास टीमों को बैक-एंड और फ्रंट-एंड टीमों में विभाजित किया गया है।

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

मैं आगे फोरप्ले के बिना यहां रुकूंगा, आइए कोणीय तत्वों का उपयोग करके एक माइक्रो फ्रंटेंड का उदाहरण बनाएं।

माइक्रो फ्रंट बना रहे हैं

इस लेख में, हम एक यात्रा बुकिंग प्रणाली का एक उदाहरण बनाएंगे। आइए CLI का उपयोग करके दो कोणीय परियोजनाओं को तैनात करें: यात्रा-बुकिंग और उड़ान-बुकिंग ।

हमें कस्टम कोणीय तत्वों के निर्माण और चलाने के लिए कुछ निर्भरता की आवश्यकता है। उड़ान-बुकिंग के अंदर निम्नलिखित निर्भरता स्थापित करें।

ng add @angular/elements ng add ngx-build-plus 

ये निर्भरताएँ एनपीएम के माध्यम से भी स्थापित की जा सकती हैं। @ कोणीय / तत्व कोणीय तत्वों के लिए सहायता प्रदान करता है। एनजीएक्स-बिल्ड-प्लस बिल्डिंग प्रोजेक्ट्स के लिए कोणीय सीएलआई का विस्तार है।

नोट: आपको दस्तावेज़-रजिस्टर-तत्व मॉड्यूल के संस्करण को 1.8.1 में /flight-booking/package.json में अपग्रेड करने की आवश्यकता हो सकती है, जैसा कि इस मुद्दे में वर्णित है।

हम फ्लाइट-बुकिंग प्रोजेक्ट में http-server मॉड्यूल भी स्थापित करते हैं।

 npm i -g http-server --save 

उड़ान-बुकिंग / src / app / में बुकिंग घटक बनाएं। निम्नानुसार घटक बदलें:
उड़ान-बुकिंग / src / app / बुकिंग / बुकिंग। com

 <!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <a href="javascript:alert('Welcome to Flight Booking App!!');" style="font-size:25px;">{{ title }}</a> </div> 

उड़ान-बुकिंग / src / app / बुकिंग / बुकिंग। com

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-flight-booking', templateUrl: './booking.component.html', styleUrls: ['./booking.component.scss'] }) export class BookingComponent implements OnInit { title = 'Flight Booking App'; constructor() { } ngOnInit() { } 

चलिए बुकिंग घटक को उड़ान-बुकिंग / src / app / app.module.ts में एक कस्टम तत्व के रूप में परिभाषित करते हैं।

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { createCustomElement } from '@angular/elements'; import { BookingComponent } from './booking/booking.component'; @NgModule({ declarations: [ AppComponent, BookingComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [], entryComponents: [ BookingComponent ] }) export class AppModule { constructor(private injector: Injector) { } ngDoBootstrap() { const myCustomElement = createCustomElement(BookingComponent, { injector: this.injector }); customElements.define('app-flight-booking', myCustomElement); } } 

किसी एकल JS फ़ाइल में एक प्रोजेक्ट बनाने के लिए, आपको ngx-build-plus मॉड्यूल का उपयोग करने के लिए कोणीय बताना होगा। फ्लाइट-बुकिंग / कोणीय.जन को तीन स्थानों पर संशोधित करें:

 "architect": { "build": { "builder": "ngx-build-plus:build", .... "serve": { "builder": "ngx-build-plus:dev-server", ... "test": { "builder": "ngx-build-plus:karma", 

प्रोजेक्ट लॉन्च

प्रोजेक्ट को एक फ़ाइल में इकट्ठा करने के लिए निम्नलिखित कमांड चलाएँ:

 ng build --prod --output-hashing none --single-bundle true 

-ओटपुट-हैशिंग (कोई नहीं) हैशिंग फाइल नामों से बचा जाता है।
-सिंगल-बंडल (ट्रू) सभी संकलित फाइलों को एक जेएस फाइल में मर्ज कर देगा ।
सर्वर शुरू करें।

 http-server ./dist/flight-booking -p 8081 

इसी तरह, एक अन्य कस्टम ट्रेन-बुकिंग तत्व बनाएं और पोर्ट 8082 के साथ सर्वर शुरू करें।

 http-server ./dist/train-booking -p 8082 

कस्टम आइटम आवरण

आइए कस्टम फ्लाइट-बुकिंग और ट्रेन-बुकिंग तत्वों को बुकिंग एप्लिकेशन से कनेक्ट करें। निम्नानुसार संशोधित करें /travel-booking/index.html ।

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>TravelBooking</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> <div style="margin-bottom: 10px;" id="flight-booking-container"><app-flight-booking></app-flight-booking></div> <div id="train-booking-container"><app-train-booking></app-train-booking></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.1/zone.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.10/custom-elements-es5-adapter.js"></script> <script type="text/javascript" src="http://localhost:8081/main.js"></script> <script type="text/javascript" src="http://localhost:8082/main.js"></script> </body> </html> 

कोणीय को Zone.js की आवश्यकता होती है , और कस्टम तत्व-es5-adapter.js ब्राउज़र में कस्टम तत्वों के लिए समर्थन प्रदान करता है। हमने अपने कस्टम तत्वों से main.js को भी शामिल किया ।
डिफ़ॉल्ट सर्वर पोर्ट को ओवरराइड करने के लिए यात्रा-बुकिंग / angular.json संशोधित करें।

 "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "travel-booking:build", "port": 8080 } 

...

मुख्य अनुप्रयोग का शुभारंभ

एनजी सर्व का उपयोग करके एप्लिकेशन लॉन्च करें। अंतिम आवेदन कुछ इस तरह दिखाई देगा:

कुल मिलाकर

सरल उदाहरणों का उपयोग करते हुए, लेख प्रदर्शित करता है कि कोणीय तत्वों का उपयोग करके माइक्रो-फ्रंटेंड आर्किटेक्चर कैसे बनाया जाए।