वीएस कोड में एंगुलर कैसे सेट करें [गाइड]

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

वीएस कोड में एंगुलर कैसे सेट करें

अपने विंडोज़ कंप्यूटर पर वीएस कोड में एंगुलर सेट करने के लिए, आपको नीचे बताए गए चरणों का पालन करना होगा।

विज़ुअल स्टूडियो कोड स्थापित करें
NodeJS सेट करें
पर्यावरण चर सेट करें
कोणीय स्थापित करें

आइये इनके बारे में विस्तार से बात करते हैं.

1] विज़ुअल स्टूडियो कोड स्थापित करें

एंगुलर क्षेत्र में अपनी कोडिंग यात्रा शुरू करने के लिए, हमें विज़ुअल स्टूडियो कोड इंस्टॉल करना होगा। ऐसा करने के लिए, आपको यहां जाना होगा Code.visualstudio.com और अपने परिवेश के लिए ऐप डाउनलोड करें। एक बार डाउनलोड हो जाने पर, पर जाएँ डाउनलोड करना फ़ोल्डर, इंस्टॉलेशन मीडिया चलाएँ और एप्लिकेशन इंस्टॉल करें।

2] नोडजेएस सेट करें

स्वचालित रखरखाव विंडो 10 को बंद करें

यह ध्यान रखना महत्वपूर्ण है कि जब आप Angular को संपादित करने के लिए VSCode का उपयोग कर सकते हैं, तो आप इसे सीधे संपादक के भीतर नहीं चला सकते। एंगुलर को वास्तव में NodeJS के भीतर निष्पादित किया जाता है, जो एक जावास्क्रिप्ट वातावरण है जो आपके स्थानीय वेब विकास सेटअप का हिस्सा है। NodeJS के साथ, आप वेब ब्राउज़र में अपने स्थानीय होस्ट पर Angular चला सकते हैं। हर बार जब आप VSCode में अपने एंगुलर कोड में बदलाव करते हैं, तो यह स्वचालित रूप से ब्राउज़र में पुनः लोड हो जाएगा, जिसे 'हॉट रीलोड' के रूप में जाना जाता है। हालाँकि, चूँकि Angular NodeJS में चलता है, इसलिए आपको पहले NodeJS इंस्टॉल करना होगा। पर जाकर आप ऐसा कर सकते हैं nodejs.org .

एंगुलर चलाने के लिए नोड जेएस स्थापित करते समय, ऐसा स्थान चुनें जो याद रखना आसान हो, जैसे सरल और छोटा पथ। यदि आपको बाद में NodeJS का उपयोग करने की आवश्यकता पड़े तो यह सहायक होगा। इसलिए, ऐप को प्रोग्राम फ़ाइलों में इंस्टॉल करने के बजाय, इसे D:\NodeJS में इंस्टॉल करें, भले ही इससे कोई फर्क नहीं पड़ता।

3] पर्यावरण चर सेट करें

आगे बढ़ने और एंगुलर को स्थापित करने से पहले हमें NodeJs के लिए पर्यावरण चर सेट करना होगा। ऐसा करने के लिए, इन चरणों का पालन करें।

विन + एस दबाएं, टाइप करें 'पर्यावरणपरिवर्ती तारक' और फिर इसे खोलें.
एक बार हो जाने के बाद, आपको NodeJS का स्थान कॉपी करना होगा। केवल संदर्भ के लिए, हमारा D:\NodeJS है।
पर्यावरण चर पर क्लिक करें।
अब, सिस्टम वेरिएबल अनुभाग में पथ चुनें और संपादित करें पर क्लिक करें।
न्यू पर क्लिक करें, लोकेशन पेस्ट करें और ओके पर क्लिक करें।

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

4] एंगुलर स्थापित करें

NodeJS स्थापित करके एक उचित वातावरण बनाने के बाद, हम Angular स्थापित करेंगे। ऐसा करने के लिए नीचे बताए गए चरणों का पालन करें।

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

slmgr रियर रीसेट

फ़ोल्डर में कोणीय स्थापित करने के लिए, हमें निम्नलिखित कमांड चलाने की आवश्यकता है।
```
npm install -g @angular/cli
```
फिर एक नया प्रोजेक्ट बनाने के लिए निम्न कमांड चलाएँ।
```
ng new foldername
```
अब, 'सीडी फ़ोल्डरनाम' का उपयोग करके उस फ़ोल्डर के अंदर जाएं और सर्वर का उपयोग करके लॉन्च करें सेवा का.

उम्मीद है, अब आप एंगुलर को बिना किसी समस्या के चला सकेंगे।

पढ़ना: VSCode में जावास्क्रिप्ट कैसे स्थापित करें ?

कार्यक्षेत्र के बाहर एंगुलर सीएलआई चलाते समय यह आदेश उपलब्ध नहीं है

जब मैंने 'एनजी सर्व' कमांड चलाया तो मुझे एक त्रुटि मिली जिसमें कहा गया था कि कमांड अनुपलब्ध है। बहुत से लोगों को संदेह है कि एंगुलर उनके सिस्टम पर स्थापित नहीं है, जबकि, वास्तव में, एकमात्र समस्या यह है कि आप सही निर्देशिका में नहीं हैं। इसे हल करने के लिए, बस उस निर्देशिका पर 'सीडी' करें जहां प्रोजेक्ट स्थित है, मूल स्थान पर नहीं बल्कि वास्तविक प्रोजेक्ट स्थान पर। तो, सबसे पहले, जब मैंने कमांड चलाया, तो मैं AngularProject में था, जो कि मेरा रूट फ़ोल्डर है, इसलिए यह काम नहीं किया। हालाँकि, जब मैंने निर्देशिका को सैंपलफ़ोल्डर में बदल दिया और वही कमांड चलाया तो यह निर्बाध रूप से काम करने लगा।

एक समाधान जो हम आपको सुझाएंगे वह है फ़ाइल एक्सप्लोरर खोलें, उस स्थान पर जाएं जहां आपका प्रोजेक्ट संग्रहीत है, खाली स्क्रीन पर राइट-क्लिक करें और चुनें टर्मिनल > कमांड प्रॉम्प्ट . और फिर भागो सेवा का.

पढ़ना: विंडोज़ पर जावा जेडीके कैसे डाउनलोड और इंस्टॉल करें ?

विज़ुअल स्टूडियो कोड में एंगुलर प्रोजेक्ट कैसे सेटअप करें?

एंगुलर प्रोजेक्ट स्थापित करने के लिए, आपको सबसे पहले अपने कंप्यूटर पर NodeJS इंस्टॉल करना होगा। एक बार हो जाने के बाद, आपको पर्यावरण चर को कॉन्फ़िगर करना होगा और इसका उपयोग करके एंगुलर इंस्टॉल करना होगा एनपीएम इंस्टॉल -जी @ एंगुलर/सीएलआई आज्ञा। अब, आगे बढ़ें और इसका उपयोग करके एक नई निर्देशिका बनाएं नए फ़ोल्डरनाम का कमांड, अधिक जानने के लिए, पहले बताए गए चरणों को देखें।

पढ़ना: Microsoft C++ के लिए VS कोड को कैसे कॉन्फ़िगर करें

विंडोज़ 10 क्लासिक स्टार्ट मेनू

एंगुलर VSCode कैसे जनरेट करें?

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

यह भी पढ़ें: वीएस कोड में पायथन कैसे स्थापित करें .