कोणीय-सीएलआई के साथ विशिष्ट मॉड्यूल के लिए घटक बनाएं

Question

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

क्या किसी नए मॉड्यूल के लिए एक घटक बनाने का एक तरीका है?

उदाहरण के लिए: ng g module newModule

ng g component newComponent (इस घटक को newModule में कैसे जोड़ा जाए ??)

क्योंकि कोणीय-क्ली डिफ़ॉल्ट व्यवहार सभी नए घटकों को अंदर रखना है app.module। मैं चुनना चाहूंगा कि मेरा घटक कहां होगा, ताकि मैं अलग मॉड्यूल बना सकूं और मेरे सभी घटक अंदर न हों app.module। यह करना संभव है कि कोणीय-सीएलआई का उपयोग करके या मुझे मैन्युअल रूप से ऐसा करना होगा?

Answer 1

एक मॉड्यूल के हिस्से के रूप में एक घटक बनाने के लिए आपको चाहिए

1. ng g module newModule मॉड्यूल उत्पन्न करने के लिए,
2. cd newModuleनिर्देशिका को newModuleफ़ोल्डर में बदलने के लिए
3. ng g component newComponent मॉड्यूल के एक बच्चे के रूप में एक घटक बनाने के लिए।

अद्यतन: कोणीय 9

अब यह कोई फर्क नहीं पड़ता कि घटक बनाते समय आप किस फ़ोल्डर में हैं।

1. ng g module NewMoudle एक मॉड्यूल उत्पन्न करने के लिए।
2. ng g component new-module/new-component NewComponent बनाने के लिए।

नोट: जब कोणीय सीएलआई नए-मॉड्यूल / नए-घटक को देखता है, तो यह मामले को नए-मॉड्यूल -> न्यूमॉड्यूल और नए-घटक -> NewComponent से मिलान करने के लिए समझता है और अनुवाद करता है। यह शुरुआत में भ्रमित कर सकता है, इसलिए आसान तरीका # 2 में मॉड्यूल और घटक के लिए फ़ोल्डर के नाम के साथ मिलान करना है।

Comments

आप प्रोजेक्ट रूट में भी रह सकते हैं और मॉड्यूल नाम के साथ घटक को उपसर्ग कर सकते हैं ng g component moduleName/componentName।

— JayChase

कोणीय सीएलआई संस्करण 1.6.8 के साथ, मुझे हमेशा यह बताने में त्रुटि हो रही थी कि जब मैं किसी मौजूदा मॉड्यूल को अलग करता हूं, तो 'निर्दिष्ट मॉड्यूल मौजूद नहीं है'। जब मैंने निम्नलिखित कमांड को आज़माया तो यह काम कर रहा था: एनजी जनरेट सर्विस 1 - मोड्यूले = माड्यूल 1 / माड्यूल 1.module.ts । नोट: मेरी सेवा का नाम service1 है और मेरे मॉड्यूल का नाम मॉड्यूल 1 है

— Diallo

यह निर्दिष्ट निर्देशिका में एक नया घटक बनाएगा, लेकिन इसे मॉड्यूल में पंजीकृत नहीं करेगा। यह app.module में इसे पंजीकृत करेगा। आपको --moduleविकल्प के साथ मॉड्यूल को निर्दिष्ट करने की आवश्यकता होगी जैसे:ng g component <your component> --module=<your module name>

— विनित सर्वदे

6 अक्टूबर, कोणीय 6 के रूप में पुराना

— tom87416

रगड़ा हुआ। कोणीय 6 फ़ोल्डर संरचनाओं पर निर्भर नहीं करता है यह देखने के लिए कि घटक किस मॉड्यूल में है। दो मॉड्यूल एक ही निर्देशिका में हो सकते हैं। @ डेनियल का जवाब stackoverflow.com/a/44812014/511719

— एंगुलर

Answer 2

ng g component nameComponent --module=app.module.ts

Comments

अन्य जवाब काम करते हैं, लेकिन यह सबसे कुशल है। यह --dry-runदेखने के लिए कि क्या प्रभावित होगा, इसके अंत में जोड़ने के लायक है , यह एक अच्छा विवेक जांच है

— tony09uk

ng g component path/to/myComponent --module=app.module.ts --dry-runएक बहुत ही उपयोगी कमांड है; बस यह सुनिश्चित करने के लिए कि आपका घटक सही निर्देशिका में बनाया गया है।

— थीमन0123

Answer 3

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

ng g component newComponent

यह एक घटक उत्पन्न करेगा और इसे app.module.ts फ़ाइल में आयात करेगा

एकमात्र तरीका जिसे आप CLI का उपयोग करके स्वचालित रूप से किसी अन्य मॉड्यूल में आयात करने के लिए निर्दिष्ट कर सकते हैं

ng g component moduleName/newComponent

जहां मॉड्यूलनाम एक मॉड्यूल है जिसे आपने पहले ही अपनी परियोजना में परिभाषित किया है। यदि मॉड्यूलनाम मौजूद नहीं है, तो यह मॉड्यूल को मॉड्यूलनाम / न्यूकमपोनेंट डायरेक्टरी में डाल देगा, लेकिन फिर भी इसे app.mule में आयात करें

Comments

यह उस समय मेरे लिए सही जवाब था। यह ठीक से काम करता है। मैं डॉक्स में इस जानकारी को जोड़ने के लिए एक पुल अनुरोध बनाता हूं। इसके योगदानकर्ताओं में से एक मुझसे cd-ing part..in को हटाने के लिए कहता है। अंत 2 होगा। ng g module newModule 2. ng g component new-module/newComponentउसके अनुसार नए-नए मॉड्यूल के बजाय नया मॉड्यूल होना चाहिए

— Elmer Dantas

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

— चार्ली-ग्रीनमैन

मैं कहूंगा कि पूर्ण उत्तर हैng g component moduleName/newComponent -m moduleName

— स्लावुगन

मेरे मामले में घटक का नाम मॉड्यूल नाम के समान है इसलिए मैंने ng generate module {modComName}1 के साथ मॉड्यूल बनाया ) 2 फ़ोल्डर बनाया गया) एक ही नाम के फ़ोल्डर के अंदर एक मॉड्यूल फ़ाइल बनाया; कमांड ng generate component {modComName}वास्तव में 1) समान नाम के फ़ोल्डर के अंदर एक घटक फ़ाइल बनाई गई 2) घटक को आयात करने के लिए मॉड्यूल को संशोधित किया

— लाल मटर

यदि आप एक मॉड्यूल बनाते हैं और इसे आधार मॉड्यूल में आयात करते हैं तो सावधान रहें; सरणी ngके अंत में आयात जोड़ता है ; लेकिन आप चाहते हो सकता है: "विन्यास के मामले में मार्गों का क्रम मायने रखता है और यह डिजाइन द्वारा है।"

— लाल मटर

Answer 4

मुझे ऐसा उत्तर नहीं मिला, जिसमें दिखाया गया हो कि किसी शीर्ष स्तर के मॉड्यूल फ़ोल्डर के अंदर एक घटक उत्पन्न करने के लिए cli का उपयोग कैसे किया जाता है, और यह भी घटक स्वचालित रूप से मॉड्यूल की घोषणा संग्रह में जोड़ा गया है।

मॉड्यूल चलाने के लिए इसे बनाएं:

ng g module foo

फू मॉड्यूल फ़ोल्डर के अंदर घटक बनाने के लिए और इसे foo.module.ts के घोषणा संग्रह में जोड़ा गया है:

ng g component foo/fooList --module=foo.module.ts

और cli मॉड्यूल और घटक को इस तरह बाहर निकाल देगा:

- कोणीय क्लि का नया संस्करण अलग तरह से व्यवहार करता है। 1.5.5 मॉड्यूल फ़ाइल नाम नहीं चाहता है, इसलिए v1.5.5 के साथ कमांड होना चाहिए

ng g component foo/fooList --module=foo

Comments

--moduleतर्क के लिए याय ; डॉक्स कहते हैं कि "घोषित करने मॉड्यूल के विनिर्देश देता है।" ; मैं --moduleनिर्दिष्ट करूंगा कि आपके द्वारा बनाए जाने वाले मॉड्यूल को आयात करने के लिए कौन से मौजूदा मॉड्यूल को संशोधित किया जाना चाहिए

— लाल मटर

@ TheRedPea मेरा मानना ​​है कि आपका कहने का मतलब "- आदर्श यह निर्दिष्ट करता है कि जो मौजूदा मॉड्यूल आपके घटक हैं उसे आयात करने के लिए संशोधित किया जाना चाहिए ..."

— cobolstinks

हाँ, तुम सही हो! मौजूदा घटक

— द रेड मटर

Answer 5

आप कमांड के नीचे कोशिश कर सकते हैं, जो इसका वर्णन करता है,

ng -> Angular 
g  -> Generate
c  -> Component
-m -> Module 

तब आपकी आज्ञा इस प्रकार होगी:

ng g c user/userComponent -m user.module

Answer 6

कोणीय v4 और इसके बाद के संस्करण के लिए, बस का उपयोग करें:

ng g c componentName -m ModuleName

Comments

Specified module does not existमॉड्यूल मौजूद होते समय एक त्रुटि फेंकता है

— परदीप जैन

आप मॉड्यूल का नाम निर्दिष्ट नहीं करते हैं, आप मॉड्यूल का नाम निर्दिष्ट करते हैं।

— रोजर

आकर्षण जैसा काम करता है! उदाहरण के लिए यदि आपकी मॉड्यूल फ़ाइल है user-settings.module.tsऔर आप एक घटक जोड़ना चाहते हैं public-infoतो कमांड होगी:ng g c PublicInfo -m user-settings

— सर्पिल आउट

यह सबसे सरल और साफ जवाब है!

— बारना टेक

Answer 7

इसी से मेरा काम बना है :

1 -->  ng g module new-module

2 -->  ng g c new-module/component-test --module=new-module/new-module.module.ts

यदि आप एक घटक उत्पन्न करना चाहते हैं तो उसकी निर्देशिका के बिना --flat ध्वज का उपयोग करें ।

Comments

लिखने की जरूरत नहीं है।

— एसटी

--मोडुले = पाथ-टू-माड्यूल ने मुझे काम दिया धन्यवाद @ मोहम्मद मक्कौई

— इयान पोस्टन

Answer 8

1. सबसे पहले, आप निष्पादित करके एक मॉड्यूल उत्पन्न करते हैं।

ng g m modules/media

यह फ़ोल्डर के mediaअंदर नामक एक मॉड्यूल उत्पन्न करेगा modules।

2. दूसरा, आप इस मॉड्यूल में जोड़ा गया एक घटक उत्पन्न करते हैं

ng g c modules/media/picPick --module=modules/media/media.module.ts

कमांड का पहला भाग ng g c modules/media/picPickएक घटक फ़ोल्डर उत्पन्न करेगा जिसे फ़ोल्डर चुड़ैल के picPickअंदर कहा जाता है modules/mediaजिसमें हमारा नया mediaमॉड्यूल होता है।

दूसरा भाग मॉड्यूल picPickमें घोषित हमारे नए घटक mediaको मॉड्यूल फ़ाइल में आयात करके और declarationsइस मॉड्यूल के सरणी में जोड़ देगा ।

Comments

क्या आप इस बारे में अधिक जानकारी दे सकते हैं कि यह प्रश्न का उत्तर कैसे देता है?

— स्टर्लिंग आर्चर

अपने नोट के लिए धन्यवाद, मैंने अपना उत्तर संपादित किया क्योंकि मैं एक भविष्य का पाठक हूं @CertainPerformance

— Elhakim

Answer 9

मॉड्यूल स्तर पर जाएं / हम रूट स्तर में भी हो सकते हैं और कमांड के नीचे टाइप कर सकते हैं

ng g component "path to your component"/NEW_COMPONENT_NAME -m "MODULE_NAME"

उदाहरण :

ng g component common/signup/payment-processing/OnlinePayment -m pre-login.module

Answer 10

पहले मॉड्यूल उत्पन्न करें:

ng g m moduleName --routing

यह एक मॉड्यूलनाम फ़ोल्डर बनाएगा फिर मॉड्यूल फ़ोल्डर पर नेविगेट करें

cd moduleName

और उसके बाद घटक उत्पन्न करें:

ng g c componentName --module=moduleName.module.ts --flat

मॉड्यूल फ़ोल्डर के अंदर बाल फ़ोल्डर नहीं बनाने के लिए --flat का उपयोग करें

Answer 11

मैं आवेदन में कई मॉड्यूल के साथ इसी तरह के मुद्दों कर रहा हूँ। एक घटक किसी भी मॉड्यूल के लिए बनाया जा सकता है इसलिए एक घटक बनाने से पहले हमें विशेष मॉड्यूल का नाम निर्दिष्ट करना होगा।

'ng generate component newCompName --module= specify name of module'

Answer 12

इस सरल आदेश का उपयोग करें:

ng g c users/userlist

users: आपका मॉड्यूल नाम।

userlist: आपका घटक नाम।

Answer 13

कोणीय डॉक्स के अनुसार विशिष्ट मॉड्यूल के लिए एक घटक बनाने का तरीका है,

ng g component <directory name>/<component name>

"निर्देशिका नाम" = जहां सीएलआई ने फीचर मॉड्यूल उत्पन्न किया

उदाहरण :-

ng generate component customer-dashboard/CustomerDashboard

यह ग्राहक-डैशबोर्ड फ़ोल्डर के भीतर नए घटक के लिए एक फ़ोल्डर बनाता है और ग्राहक मॉड्यूल के साथ फीचर मॉड्यूल को अपडेट करता है।

Answer 14

पहला रन ng g module newModule । फिर भागोng g component newModule/newModule --flat

Answer 15

मैंने विशिष्ट रूट फ़ोल्डर के साथ घटक आधारित चाइल्ड मॉड्यूल बनाया

नीचे दी गई क्ली कमांड, कृपया देखें

ng g c Repair/RepairHome -m Repair/repair.module

मरम्मत हमारे बच्चे के मॉड्यूल का रूट फ़ोल्डर है

-म है - ममूद

ग रचना के लिए

जी जनरेट के लिए

Answer 16

मैं आज इस मुद्दे पर एक कोणीय 9 आवेदन मचान करते हुए भाग गया। जब भी मैंने .module.tsया .moduleमॉड्यूल नाम को जोड़ा, मुझे "मॉड्यूल में त्रुटि मौजूद नहीं है" मिला । Cli को केवल बिना विस्तार वाले मॉड्यूल के नाम की आवश्यकता है। यह मानते हुए कि मेरे पास एक मॉड्यूल नाम था: brands.module.tsमैंने जो कमांड का उपयोग किया था

ng g c path/to/my/components/brands-component -m brands --dry-run

--dry-runएक बार जब आपने फ़ाइल संरचना की पुष्टि कर ली है तो उसे हटा दें ।

Answer 17

ng g c componentName --module=path-to-your-module-from-src-folder

उदाहरण:

ng g c testComponent --module=/src/app/home/test-component/test-component.module

Answer 18

एक सामान्य पैटर्न एक मार्ग, एक आलसी लोड मॉड्यूल और एक घटक के साथ एक सुविधा बनाना है।

रूट: myapp.com/feature

एप्लिकेशन-routing.module.ts

{ path: 'feature', loadChildren: () => import('./my-feature/my-feature.module').then(m => m.MyFeatureModule) },

फ़ाइल संरचना:

app   
└───my-feature
│   │   my-feature-routing.module.ts
│   │   my-feature.component.html
│   │   my-feature.component.css
│   │   my-feature.component.spec.ts
│   │   my-feature.component.ts
│   │   my-feature.module.ts

यह सभी के साथ cli में किया जा सकता है:

ng generate module my-feature --module app.module --route feature

या कम है

ng g m my-feature --module app.module --route feature

या यदि आप नाम छोड़ देते हैं तो cli आपको इसके लिए संकेत देगा। बहुत उपयोगी है जब आपको कई सुविधाएँ बनाने की आवश्यकता होती है

ng g m --module app.module --route feature

Answer 19

कोणीय सीएलआई का उपयोग करके कोणीय 4 ऐप में एक घटक जोड़ें

एप्लिकेशन में एक नया कोणीय 4 घटक जोड़ने के लिए, कमांड का उपयोग करें ng g component componentName। इस आदेश के निष्पादन के बाद, कोणीय सीएलआई के component-nameतहत एक फ़ोल्डर जोड़ता है src\app। इसके अलावा, उसी के संदर्भों को src\app\app.module.tsस्वचालित रूप से फ़ाइल में जोड़ा जाता है।

एक घटक में एक @Componentडेकोरेटर फ़ंक्शन होगा जिसके बाद एड classहोना चाहिए export। @Componentडेकोरेटर समारोह मेटा डेटा स्वीकार करता है।

कोणीय सीएलआई का उपयोग करके कोणीय 4 ऐप के विशिष्ट फ़ोल्डर में एक घटक जोड़ें

एक विशिष्ट फ़ोल्डर में एक नया घटक जोड़ने के लिए कमांड का उपयोग करें ng g component folderName/componentName

Answer 20

यदि आपके पास .angular-cli.json (जैसे फीचर मॉड्यूल पर काम करने की स्थिति में) कई ऐप्स घोषित हैं

"apps": [{
    "name": "app-name",
    "root": "lib",
    "appRoot": ""
}, {...} ]

आप ऐसा कर सकते हैं :

ng g c my-comp -a app-name

-a का अर्थ है --app (नाम)

Answer 21

मैं मॉड्यूल के अंदर घटकों को बनाने के लिए इस विशेष कमांड का उपयोग करता हूं।

ng g c <module-directory-name>/<component-name>

यह कमांड मॉड्यूल के लिए स्थानीय घटक उत्पन्न करेगा। या आप पहले टाइप करके डायरेक्टरी बदल सकते हैं।

cd <module-directory-name>

और फिर घटक बनाएँ।

ng g c <component-name>

नोट: <> में संलग्न कोड उपयोगकर्ता विशिष्ट नामों का प्रतिनिधित्व करता है।

Answer 22

1.- हमेशा की तरह अपना फीचर मॉड्यूल बनाएं।

ng generate module dirlevel1/module-name

2.- आप निर्दिष्ट कर सकते रूट पथ में अपनी परियोजना के --module (केवल --module में, (/) अपने को जड़ अंक परियोजना जड़ और सिस्टम रूट नहीं है !!! )

ng generate component dirlevel1/component-name --module /src/app/dirlevel1/module-name.module.ts

वास्तविक उदाहरण:

ng generate module stripe/payment-methods-list

ng generate component stripe/payment-methods-list --module=/src/app/stripe/payment-methods-list/payment-methods-list.module.ts 

आउटपुट:

CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.scss (0 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.html (39 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.spec.ts (768 bytes)
CREATE src/app/stripe/payment-methods-list/payment-methods-list.component.ts (322 bytes)
UPDATE src/app/stripe/payment-methods-list/payment-methods-list.module.ts (311 bytes)
[OK] Generated component!

कोणीय सीएलआई के साथ परीक्षण: 9.1.4

Answer 23

---

विशेष मॉड्यूल में एक मॉड्यूल, सेवा और घटक बनाएं

Basic:

    ng g module chat     
    ng g service chat/chat -m chat
    ng g component chat/chat-dialog -m chat

    In chat.module.ts:
        exports: [ChatDialogComponent],
        providers: [ChatService]

    In app.module.ts:

        imports: [
            BrowserModule,
            ChatModule
        ]

    Now in app.component.html:
        <chat-dialog></chat-dialog>


LAZY LOADING:
    ng g module pages --module app.module --route pages

        CREATE src/app/pages/pages-routing.module.ts (340 bytes)
        CREATE src/app/pages/pages.module.ts (342 bytes)
        CREATE src/app/pages/pages.component.css (0 bytes)
        CREATE src/app/pages/pages.component.html (20 bytes)
        CREATE src/app/pages/pages.component.spec.ts (621 bytes)
        CREATE src/app/pages/pages.component.ts (271 bytes)
        UPDATE src/app/app-routing.module.ts (8611 bytes)       

    ng g module pages/forms --module pages/pages.module --route forms

        CREATE src/app/forms/forms-routing.module.ts (340 bytes)
        CREATE src/app/forms/forms.module.ts (342 bytes)
        CREATE src/app/forms/forms.component.css (0 bytes)
        CREATE src/app/forms/forms.component.html (20 bytes)
        CREATE src/app/forms/forms.component.spec.ts (621 bytes)
        CREATE src/app/forms/forms.component.ts (271 bytes)
        UPDATE src/app/pages/pages-routing.module.ts (437 bytes)