सीएलआई का उपयोग करके कोणीय 4 में एक नया घटक कैसे बनाया जाए


96

कोणीय 2 में मैं उपयोग करता हूं

ng g c componentname

लेकिन यह कोणीय 4 में समर्थित नहीं है, इसलिए मैंने इसे मैन्युअल रूप से बनाया है, लेकिन यह त्रुटि दिखाता है कि यह एक मॉड्यूल नहीं है।



1
आपको मॉड्यूल.ts फ़ाइल में मैन्युअल रूप से बनाए गए घटक को आयात करने की आवश्यकता है
surbhiGoel

कोणीय 7 में भी यह काम करता है। ng g c <componentname>याng generate component <Name>
चिनमोय

जवाबों:


11

विकास सर्वर के माध्यम से एक कोणीय परियोजना बनाना और सेवा करना -

सबसे पहले अपने प्रोजेक्ट डायरेक्टरी में जाएं और नीचे टाइप करें -

ng new my-app
cd my-app
ng g component User
ng serve

यहाँ " D: \ Angular \ my-app> " मेरा कोणीय अनुप्रयोग प्रोजेक्ट डायरेक्टरी है और " उपयोगकर्ता " घटक का नाम है।

आम दिखते हैं -

D:\Angular\my-app>ng g component User
  create src/app/user/user.component.html (23 bytes)
  create src/app/user/user.component.spec.ts (614 bytes)
  create src/app/user/user.component.ts (261 bytes)
  create src/app/user/user.component.css (0 bytes)
  update src/app/app.module.ts (586 bytes)

147

Angular4 में यह समान काम करेगा। यदि आपको कोई त्रुटि मिलती है तो मुझे लगता है कि आपकी समस्या कहीं और है।

कमांड प्रॉम्प्ट प्रकार में

एनजी जनरेट करें ORCOMPONENTNAME

आदेशों: वहाँ भी shorthands इस लिए कर रहे हैं generateके रूप में इस्तेमाल किया जा सकता gहै और componentके रूप में c:

एनजी gc आपका

आप उपयोग कर सकते हैं ng --help, ng g --helpया ng g c --helpदस्तावेज़ों के लिए।

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

डॉक्स: कोणीय-क्लि ऐप.मॉडल.ट्स में घटकों, निर्देशों और पाइपों के संदर्भ को स्वचालित रूप से जोड़ देगा।

अद्यतन: यह अभी भी 8 संस्करण में काम करता है।


1
मुझे यह त्रुटि मिल रही है ----------- घोषणा के लिए कंपोनेंट एरर लोकेट करने वाले मॉड्यूल को स्थापित करना साइलेंट एरर: कोई मॉड्यूल फाइल नहीं मिली
surbhiGoel

1
मुझे आश्चर्य हो रहा है कि क्या कोई घटक उपलब्ध घटक को निकालने के लिए उपलब्ध है जिसमें यह संदर्भ ऐप मॉड्यूल शामिल है?
panky sharma

2
@pankysharma कोई घटक हटाने के लिए कोणीय सीएलआई में कोई कमांड नहीं है, लेकिन यदि आप घटक को विभिन्न विकल्पों के साथ फिर से बनाना चाहते हैं; आप --forceफ़ाइलों को ओवरराइड करने के लिए (शॉर्टहैंड: -f) विकल्प का उपयोग कर सकते हैं ।
माइक बोवेनलैंडर

"एनजी जीसी कर्मचारियों" ने मेरे लिए काम किया। मैं 'एनजी' से पहले '$ एनजी कर्मचारियों' की तरह एक '$' का उपयोग कर रहा था जो इस मामले में मुद्दा बना रहा था।
राज चौरसिया

यदि आपको अपने नए घटक के लिए परीक्षण फ़ाइल (.spec.ts) की आवश्यकता नहीं है, तो अपने कमांड में तर्क --skipTests जोड़ें।
चिराग K

27

1) सबसे पहले अपने प्रोजेक्ट डायरेक्टरी में जाएं

2) फिर टर्मिनल में कमांड के नीचे चलाएँ।

ng generate component componentname

या

ng g component componentname

3) उसके बाद आप इस तरह से आउटपुट देखेंगे,

create src/app/test/componentname.component.css (0 bytes)
create src/app/test/componentname.component.html (23 bytes)
create src/app/test/componentname.component.spec.ts (614 bytes)
create src/app/test/componentname.component.ts (261 bytes)
update src/app/app.module.ts (1087 bytes)

14

यदि आप .specफ़ाइल के बिना नया घटक बनाना चाहते हैं , तो आप उपयोग कर सकते हैं

ng g c component-name --spec false

आप इन विकल्पों का उपयोग कर पा सकते हैं ng g c --help


11
ng g component componentname

यह घटक उत्पन्न करता है और घटक को मॉड्यूल घोषणाओं में जोड़ता है।

घटक को मैन्युअल रूप से बनाते समय, आपको घटक को इस तरह घोषित करना चाहिए:

@NgModule({
  imports: [
    yourCommaSeparatedModules
    ],
  declarations: [
    yourCommaSeparatedComponents
  ]
})
export class yourModule { }

8

सुनिश्चित करें कि आप सीएमडी लाइन में अपनी परियोजना निर्देशिका में हैं

    ng g component componentName

6

कुछ फ़ोल्डर के तहत घटक बनाने के लिए

ng g c employee/create-employee --skipTests=false --flat=true

यह पंक्ति एक फ़ोल्डर नाम 'कर्मचारी' बनाएगी, जिसके नीचे यह एक 'क्रिएट-कर्मचारी' घटक बनाता है।

बिना कोई फोल्डर बनाए

ng g c create-employee --skipTests=false --flat=true


3

ng जनक कंपोनेंट_नाम मेरे मामले में काम नहीं कर रहा था क्योंकि प्रोजेक्ट फ़ोल्डर नाम के रूप में 'ऐप' का उपयोग करने के बजाय, मैंने इसे कुछ और नाम दिया। मैंने फिर से इसे ऐप में बदल दिया। अब, यह ठीक काम कर रहा है


3
ng g c COMPONENTNAME

इस कमांड का उपयोग टर्मिनल बनाने के लिए कंपोनेंट के उपयोग के लिए किया जाता है।

घटक के लिए ग उत्पन्न करें


2

मेरे मामले .angular-cli.jsonमें मेरे srcफोल्डर में एक और फाइल होनी चाहिए । इसे हटाने से समस्या हल हो गई। आशा करता हूँ की ये काम करेगा

angular 4.1.1 angular-cli 1.0.1


2
ng g component component name

इस सराहनीय जाँच को टाइप करने से पहले आप अपने प्रोजेक्ट डायरेक्टिव पाथ में होंगे


2

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


2

आपको src/appकमांड लाइन पर अपने कोणीय-क्ली प्रोजेक्ट के फ़ोल्डर में होना चाहिए । उदाहरण के लिए:

D:\angular2-cli\first-app\src\app> ng generate component test

तभी यह आपके कंपोनेंट को जनरेट करेगा।


1

क्या आपने कोणीय-क्ली को नवीनतम संस्करण में अपडेट किया? या क्या आपने नोड या एनपीएम या टाइपस्क्रिप्ट को अपडेट करने की कोशिश की? यह समस्या कोणीय / टाइपस्क्रिप्ट / नोड जैसे संस्करणों के कारण आती है। यदि आप cli को अपडेट कर रहे हैं, तो यहां इस लिंक का उपयोग करें। https://github.com/angular/angular-cli/wiki/stories-1.0-update


1

अपने कोणीय प्रोजेक्ट फ़ोल्डर में जाएं और कमांड टाइप करें "एनजी जी कंपोनेंट हेडर" टाइप करें जहां हेडर वह नया कंपोनेंट है जिसे आप बनाना चाहते हैं। डिफ़ॉल्ट रूप से हेडर कंपोनेंट को एप कंपोनेंट के अंदर बनाया जाएगा। आप कंपोनेंट के अंदर कंपोनेंट बना सकते हैं घटक। उदाहरण के लिए यदि आप हेडर के अंदर एक घटक बनाना चाहते हैं जो हमने ऊपर बनाया है तो "एनजी जी घटक हेडर / मेनू" टाइप करें। यह हेडर घटक के अंदर एक मेनू घटक बनाएगा


1

ng g c COMPONENTNAME काम करना चाहिए, अगर आपके मॉड्यूल को अपवाद नहीं मिल रहा है, तो इन चीजों को आज़माएं-

  1. अपनी परियोजना निर्देशिका की जाँच करें।
  2. यदि आप विज़ुअल स्टूडियो कोड का उपयोग कर रहे हैं तो इसे पुनः लोड करें या इसमें अपनी परियोजना को फिर से खोलें।

1

निर्दिष्ट फ़ोल्डर में प्रोजेक्ट स्थान पर जाएं

C:\Angular6\sample>

यहां आप कमांड टाइप कर सकते हैं

C:\Angular6\sample>ng g c users

यहां g का मतलब जेनरेट, c का मतलब कंपोनेंट, यूजर्स कंपोनेंट नेम है

यह 4 फाइलें उत्पन्न करेगा

users.component.html,
users.component.spec.ts,
users.component.ts,
users.component.css

1

चरण 1:

परियोजना निर्देशिका में जाओ! (बनाया एप्लिकेशन में सीडी)।

चरण 2:

निम्न कमांड में टाइप करें और चलाएं!

ng generate component [componentname]

  • उस घटक का नाम जोड़ें जिसे आप [कंपोनेंटनाम] अनुभाग में उत्पन्न करना चाहते हैं।

या

ng generate c [componentname]

  • उस घटक का नाम जोड़ें जिसे आप [कंपोनेंट] अनुभाग में उत्पन्न करना चाहते हैं।

दोनों काम करेंगे

संदर्भ चेकआउट के लिए कोणीय दस्तावेज़ीकरण का यह खंड!

https://angular.io/tutorial/toh-pt1

संदर्भ के लिए भी github पर Angular Cli का लिंक देखें!

https://github.com/angular/angular-cli/wiki/generate-component


1
ng generate component componentName.

यह मॉड्यूल.ts में घटक को स्वचालित रूप से आयात करेगा


1

अपनी परियोजना और चलाने के लिए सीडी,

> ng generate component "componentname"
ex: ng generate component shopping-cart

या

> ng g c shopping-cart

(यह "खरीदारी-कार्ट" नाम के साथ "एप्लिकेशन" फ़ोल्डर के तहत नया फ़ोल्डर बनाएगा और .html, .ts, .css। फ़ाइल को बनाता है।)

यदि आप .spec फ़ाइल जनरेट नहीं करना चाहते हैं

> ng g c shopping-cart --skipTests true

यदि आप "एप्लिकेशन" के तहत किसी विशिष्ट फ़ोल्डर में घटक बनाना चाहते हैं

> ng g c ecommerce/shopping-cart

(आपको फ़ोल्डर संरचना "ऐप / ईकॉमर्स / शॉपिंग-कार्ट" मिलेगी)


1

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

ng generate component "component_name"

या

ng g c "component_name"

के साथ एक नया फ़ोल्डर "component_name"बनाया जाएगा

घटक_नाम / घटक_नाम.कॉमपॉइंटमेंट.html घटक_नेमी / घटक_नाम.कॉम। घटक_नाम / घटक_नेमी।

नया घटक स्वचालित रूप से जोड़ा गया मॉड्यूल होगा।

आप कमांड का पालन करके कल्पना फ़ाइल बनाने से बच सकते हैं

ng g c "component_name" --nospec


0

कोणीय में नए घटक उत्पन्न करने के लिए मुख्य रूप से दो तरीके हैं, उपयोग करना ng g c <component_name>, दूसरा तरीका यह है कि उपयोग करना ng generate component <component_name>। इनमें से किसी एक कमांड के इस्तेमाल से नया कंपोनेंट जेनरेट किया जा सकता है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.