Angular Academy · पाठ

ng generate से लाइब्रेरी बनाना

लाइब्रेरी प्रोजेक्ट का प्रारंभिक ढाँचा बनाएँ

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

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

लाइब्रेरी क्यों बनाएँ

जब कई ऐप्लिकेशन को समान कंपोनेंट, सेवाओं या उपयोगिताओं की आवश्यकता होती है, तो आप उन्हें एक एंगुलर लाइब्रेरी के रूप में पैकेज करते हैं। लाइब्रेरी दोबारा उपयोग की जा सकती है, उसका संस्करण निर्धारित किया जा सकता है और उसे प्रकाशित किया जा सकता है; प्रोजेक्ट के बीच कोड की कॉपी-पेस्टिंग नहीं करनी पड़ती।

वर्कस्पेस में लाइब्रेरी होती हैं

लाइब्रेरी एंगुलर वर्कस्पेस के भीतर रहती हैं: यह एक ऐसा फ़ोल्डर है जिसे एक angular.json प्रबंधित करता है और जिसमें कई ऐप्लिकेशन तथा लाइब्रेरी हो सकती हैं। आप किसी मौजूदा वर्कस्पेस में लाइब्रेरी जोड़ सकते हैं या उसके लिए अलग वर्कस्पेस बना सकते हैं।

ng new my-workspace --create-application=false
# a workspace with no app, ready to hold libraries

लाइब्रेरी बनाना

ng generate library स्कीमैटिक (उपनाम ng g lib) projects/ के अंतर्गत एक नया लाइब्रेरी प्रोजेक्ट तैयार करता है।

ng generate library ui-kit
# creates projects/ui-kit with a sample component, module, and public-api.ts

क्या-क्या बनता है

लाइब्रेरी के साथ उसका अपना src/lib फ़ोल्डर, एक public-api.ts बैरल, एक ng-package.json (बिल्ड के लिए), और angular.json में एक प्रविष्टि मिलती है। यह एक स्वतंत्र, बिल्ड किए जा सकने वाला प्रोजेक्ट होता है।

projects/ui-kit/
  src/
    lib/        # your components & services
    public-api.ts
  ng-package.json
  package.json

लाइब्रेरी में कंपोनेंट जोड़ना

--project की सहायता से लक्ष्य निर्धारित करके लाइब्रेरी में कोड बनाएँ। CLI फ़ाइलों को सही फ़ोल्डर में रखता है।

ng generate component button --project=ui-kit
ng generate service theme --project=ui-kit

लाइब्रेरी में स्टैंडअलोन कंपोनेंट

आधुनिक लाइब्रेरी स्टैंडअलोन कंपोनेंट को प्राथमिकता देती हैं, जिन्हें उपभोक्ता किसी NgModule के बिना सीधे इम्पोर्ट करते हैं। कंपोनेंट पर standalone: true लगाएँ, ताकि ऐप्लिकेशन उसे सरल इम्पोर्ट के साथ उपयोग कर सकें।

@Component({
  selector: 'lib-button',
  standalone: true,
  template: '<button class="lib-btn"><ng-content></ng-content></button>',
})
export class ButtonComponent {}

लाइब्रेरी का package.json

हर लाइब्रेरी की अपनी package.json होती है, जिसमें उसका नाम, संस्करण और @angular/core जैसी पीयर निर्भरताएँ निर्धारित होती हैं। पीयर निर्भरताओं का अर्थ है कि Angular की आपूर्ति उपयोग करने वाला ऐप्लिकेशन करता है, जिससे उसकी डुप्लिकेट प्रतियाँ बनने से बचती हैं।

{
  "name": "ui-kit",
  "version": "0.0.1",
  "peerDependencies": { "@angular/core": "^18.0.0" }
}

स्थानीय ऐप्लिकेशन के साथ विकास

लाइब्रेरी बनाते समय उसे चलाकर जाँचने के लिए उसी वर्कस्पेस में एक डेमो ऐप्लिकेशन रखें। लाइब्रेरी के नाम से इम्पोर्ट करने पर tsconfig में TypeScript पथ मैपिंग के माध्यम से स्थानीय स्रोत मिल जाता है।

लाइब्रेरी बनाम ऐप्लिकेशन

ऐप्लिकेशन को परिनियोजित करने के लिए बनाया जाता है; लाइब्रेरी का उद्देश्य उपयोग किया जाना है। लाइब्रेरी को सीधे सर्व नहीं किया जा सकता। उन्हें वितरण योग्य पैकेज में बिल्ड किया जाता है और या तो प्रकाशित किया जाता है या वर्कस्पेस के ऐप्लिकेशन द्वारा इम्पोर्ट किया जाता है।

लाइब्रेरी को केंद्रित रखें

एक अच्छी लाइब्रेरी का उद्देश्य स्पष्ट होता है (जैसे UI किट या डेटा-एक्सेस परत)। असंबंधित कोड को एक साथ रखने से बचें; सुसंगत लाइब्रेरी का संस्करण निर्धारित करना, उसका दस्तावेज़ीकरण करना और उसका दोबारा उपयोग करना आसान होता है।

अगले चरण

लाइब्रेरी का प्रारूप तैयार हो जाने के बाद शेष कार्य है उसकी सार्वजनिक API निर्धारित करना, उसे Angular Package Format में बिल्ड करना और प्रकाशित करना। अगले पाठों में इन सभी विषयों को शामिल किया गया है।

त्वरित जाँच

आप लाइब्रेरी कैसे बनाते हैं?

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

पुनरावलोकन

लाइब्रेरी कई ऐप्लिकेशन के लिए दोबारा उपयोग किए जा सकने वाले कोड को पैकेज करती हैं। वर्कस्पेस के भीतर ng generate library से एक लाइब्रेरी बनाएँ; यह src/lib, public-api.ts, ng-package.json और पीयर निर्भरताओं वाली package.json तैयार करता है। --project के माध्यम से कोड जोड़ें, स्टैंडअलोन कंपोनेंट को प्राथमिकता दें और हर लाइब्रेरी को केंद्रित रखें।

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

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

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

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

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

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

क्या “ng generate से लाइब्रेरी बनाना” पाठ निःशुल्क है?

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

“ng generate से लाइब्रेरी बनाना” में मैं क्या सीखूँगा?

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

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

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

“ng generate से लाइब्रेरी बनाना” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

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