एक हाइब्रिड एप्लिकेशन के माध्यम से AngularJS से Angular7 की ओर पलायन

हाइब्रिड ऐप के माध्यम से AngularJS से Angular7 की ओर पलायन

कार्य सबसे आसान नहीं है, लेकिन उल्लेखनीय है।

एक नई कंपनी में जाने पर मैंने उसका सामना किया।

तथ्य यह है कि यह उल्लेखनीय है मैनुअल में पाया जा सकता है।

यह विशेष रूप से एक नई परियोजना बनाने की आवश्यकता के बिना संक्रमण को सरल बनाने के लिए बनाया गया था और शुरू से ही प्रत्येक घटक को फिर से लिखना था।

डेवलपर्स द्वारा कल्पना के अनुसार, हमारी परियोजना को कोड के क्रमिक प्रतिस्थापन के साथ AngularJS और Angular दोनों नए संस्करण पर काम करना शुरू करना चाहिए।

इसलिए मैंने इसे करने का फैसला किया।

गाइड काफी विस्तृत है, लेकिन मूल रूप से सैद्धांतिक हिस्सा है।

ऐसे व्यक्ति के लिए जो मुख्य रूप से Vue के साथ व्यवहार करता था, तुरंत फ्रेमवर्क के आयोजन की पेचीदगियों को समझना इतना सरल नहीं है।

मेरे लिए मुख्य कठिनाई यह थी कि AngularJS और Angular7 पर परियोजनाओं की संरचना अलग है।

इसलिए सभी निर्भरता, सेवाओं और घटकों को मैन्युअल रूप से फिर से लिखने की आवश्यकता है।

वास्तव में, इस दृष्टिकोण के साथ कोई भी संकरता अपना अर्थ खो देती है, क्योंकि किसी भी मामले में आवेदन को पूरी तरह से फिर से लिखना पड़ता है।

इसलिए मैंने शुरुआत में कम खर्चीला तरीका नहीं खोजा।

हालांकि, एक बेहतर विकल्प है।

यहां मैंने बहुत उपयोगी पाया।

मैंने जो किया उसका विस्तार से वर्णन करूंगा।

आपको एक नई परियोजना बनाने की आवश्यकता है।

Node.js में:

npm install -g @angular/cli

विश्व स्तर पर कोणीय स्थापित करें।

इसके बाद, आपको एप्लिकेशन के लिए एक फ़ोल्डर बनाना होगा और इसे Node.js. के माध्यम से जाना होगा।

वांछित फ़ोल्डर खोजने के लिए यहां मुख्य कमांड की आवश्यकता हो सकती है:

cd _ और cd .. ऊपर की निर्देशिका में वापस जाने के लिए।

इसलिए, जब प्रोजेक्ट फ़ोल्डर पाया जाता है, तो आपको इसमें एक प्रोजेक्ट बनाने की आवश्यकता होती है।

Node.js में हम लिखते हैं:

ng new _

परियोजना बनाने की प्रक्रिया में, आपको आवेदन के लिए कई विकल्प पेश किए जाएंगे, जहाँ आपको वांछित पैरामीटर निर्दिष्ट करने की आवश्यकता है।

जब एप्लिकेशन बनाया जाता है, तो आप इसे कमांड के साथ ब्राउज़र में खोल सकते हैं:

ng serve --open

हालांकि, अभी तक कुछ नहीं खुला है।

अब आपको उन निर्भरताओं को स्थापित करने की आवश्यकता है जो काम करने के लिए AngularJS और Angular दोनों के लिए आवश्यक हैं:

npm install --save @angular/upgrade

अब से, आवेदन दोनों चौखटे का समर्थन करता है।

अब पुराना प्रोजेक्ट खोलें, package.json फ़ाइल देखें।

यह हमारे आवेदन के संचालन के लिए आवश्यक सभी निर्भरताओं को सूचीबद्ध करता है।

उन्हें मैन्युअल रूप से स्थापित करने की आवश्यकता है।

उदाहरण के लिए:

npm install --save angular @uirouter/angularjs

इस चरण के बाद, आप सभी वैश्विक शैलियों को नए एप्लिकेशन में स्थानांतरित कर सकते हैं।

अब हम ऐप से सभी फ़ाइलों को स्थानांतरित करते हैं।

उपरोक्त मार्गदर्शन के लिए, हम और आगे जाते हैं।

रूट कंपोनेंट का नाम बदलें।

App.module.ts में लाइन जोड़ें:

 import * as angular from 'angular'; 

यह मैनुअल में इंगित नहीं किया गया है, लेकिन इसके बिना संकरण प्राप्त नहीं किया जा सकता है।

अब हमारे पास एक आवेदन है, जो सिद्धांत में एक संकर होना चाहिए।

व्यवहार में, इस स्तर पर विभिन्न त्रुटियां हो सकती हैं, मुख्य रूप से निर्भरता से संबंधित है, जिसके बारे में मैं एक अलग लेख में लिखूंगा।

यदि वे उत्पन्न नहीं होते हैं, तो आगे बढ़ें और वांछित संस्करण के लिए कोणीयजेएस मॉड्यूल के बाद मॉड्यूल को बदलें।

यह लेख दो रूपरेखाओं के कोड के बीच मुख्य अंतर का एक उत्कृष्ट दृश्य प्रतिनिधित्व प्रदान करता है।

कदम दर कदम, और आपके पास AngularJS पर एक भी लाइन नहीं बचेगी।