कोणीय - घटक में मॉड्यूल का अर्थ क्या है?

Question

एक कोणीय ऐप में, मैंने देखा है कि @Componentसंपत्ति है moduleId। इसका क्या मतलब है?

और जब module.idकहीं भी परिभाषित नहीं किया जाता है, तब भी ऐप काम करता है। यह अभी भी कैसे काम कर सकता है?

@Component({
  moduleId: module.id,
  selector: 'ng-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [AppComponent]
});

Comments

अब तक मिले सबसे अच्छे कलात्मक

— जैन

Answer 1

कोणीय की बीटा रिलीज (vesion 2-Alpha.51 के बाद से) डेकोरेटर में टेम्प्लेट यूआरएल और स्टाइल यूआरएल जैसे घटकों के लिए सापेक्ष परिसंपत्तियों का समर्थन करती है @Component।

module.idकॉमनज का उपयोग करते समय काम करता है। आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि यह कैसे काम करता है।

याद रखें : सेटिंग मॉड्यूलआईड: मॉड्यूल.डॉट इन @ कॉम्पोनेंट डेकोरेटर यहां की कुंजी है। यदि आपके पास ऐसा नहीं है, तो कोणीय 2 आपकी फ़ाइलों को मूल स्तर पर खोजेगा।

जस्टिन श्वार्टजनबर्गर की पोस्ट से स्रोत , @Pradeep जैन को धन्यवाद

16 सितंबर 2016 को अपडेट:

यदि आप बंडल के लिए वेबपैक का उपयोग कर रहे हैं तो आपको module.idडेकोरेटर की आवश्यकता नहीं है । वेब module.idबंडल प्लगइन्स ऑटो हैंडल (इसे जोड़ें) अंतिम बंडल में

Comments

आपका स्वागत है, कृपया इस प्रश्न पर एक नज़र डालें आशा है कि आप मेरी मदद कर सकते हैं। stackoverflow.com/q/36451917/5043867

— परदीप जैन

+1 वेबपैक संदर्भ के लिए, मुझे नहीं पता था कि जब वे काम करने वाले थे और जब वे तोड़ने वाले थे तो काम करने के लिए चीजें क्यों टूट रही थीं ...

— जोओ मेंडेस

आविष्कार करने के लिए एक अधिक काउंटर-सहज ज्ञान युक्त चीज़ के बारे में नहीं सोच सकते

— kususrav

यह कैसे बताता है कि मॉड्यूल क्या है।

— ग्योजो कुदोर

@gyozokudor यदि आपके पास ऐसा नहीं है, तो कोणीय 2 आपकी फाइलों को मूल स्तर पर खोजेगा।

— निशिचत धनानी

Answer 2

(2017-03-13) के लिए अपडेट करें :

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

हमने अपने अनुशंसित SystemJS विन्यास में एक नया SystemJS प्लगइन (systemjs-angular-loader.js) जोड़ा। यह प्लगइन डायनामिक रूप से "कंपोनेंट-रिलेटिव" पाथ को टेम्प्लेट यूआरएल और स्टाइल यूआरएल में परिवर्तित कर आपके लिए "संपूर्ण पथ" में बदल देता है।

हम आपको केवल घटक-सापेक्ष पथ लिखने के लिए प्रोत्साहित करते हैं। इन डॉक्स में चर्चा किए गए URL का एकमात्र रूप है। अब आपको लिखने की जरूरत नहीं है @Component({ moduleId: module.id }), न ही आपको।

स्रोत: https://angular.io/docs/ts/latest/guide/change-log.html

परिभाषा:

moduleId?: string

moduleId@Componentएनोटेशन के अंदर पैरामीटर एक stringमान लेता है जो है;

" मॉड्यूल की मॉड्यूल आईडी जिसमें घटक शामिल है। "

CommonJS उपयोग: module.id,

SystemJS का उपयोग: __moduleName

---

उपयोग करने का कारणmoduleId :

moduleId आपके स्टाइलशीट और टेम्प्लेट के लिए रिश्तेदार पथ को हल करने के लिए उपयोग किया जाता है जैसा कि यह प्रलेखन में कहता है।

मॉड्यूल की मॉड्यूल आईडी जिसमें घटक होता है। टेम्प्लेट और शैलियों के लिए सापेक्ष यूआरएल को हल करने में सक्षम होने की आवश्यकता है। डार्ट में, यह स्वचालित रूप से निर्धारित किया जा सकता है और इसे सेट करने की आवश्यकता नहीं है। CommonJS में, इसे हमेशा मॉड्यूल.id पर सेट किया जा सकता है।

रेफरी (पुराना): https://angular.io/docs/js/latest/api/core/index/ComponentMetadata-class.html

हम घटक श्रेणी फ़ाइल के सापेक्ष टेम्पलेट और शैली फ़ाइलों के स्थानों को केवल @Componate मेटाडेटा के मॉड्यूलआईडी गुण सेट करके निर्दिष्ट कर सकते हैं

रेफरी: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

---

उदाहरण का उपयोग:

फ़ोल्डर संरचना:

RootFolder
├── index.html
├── config.js
├── app
│   ├── components
│   │   ├── my.component.ts
│   │   ├── my.component.css
│   │   ├── my.component.html

Module.id बिना :

@Component({
  selector: 'my-component',
  templateUrl: 'app/components/my.component.html', <- Starts from base path
  styleUrls:  ['app/components/my.component.css'] <- Starts from base path
})

मॉड्यूल के साथ :

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs", <- need to change this if you want to use module.id property
...

@Component({
  moduleId: module.id,
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

Comments

लेकिन यह कैसे काम करता है, कहां

— मॉड्यूल

@ निश्चयचंदानी यह आवश्यक नहीं है, लेकिन मेरा सुझाव है कि यह github.com/angular/angular/issues/6053 पर चेक करना आपके मानचित्र के mapअंदर आपकी कुंजी के लिए है। की तरह app।

— एको

डॉक्स के लिए इकोनैक्स की लिंक वर्तमान में काम नहीं कर रही है - भले ही यह Angular.io घटक पृष्ठ पर लिंक हो। कोशिश करें: angular.io/docs/js/latest/api/core/index/…

— John Pankowicz

ऐसा लगता है कि आप मॉड्यूल के बिना दृष्टिकोण में 'ऐप' रूट-निर्देशिका के 'घटकों' उप-निर्देशिका को भूल गए, क्या यह नहीं है? मुझे लगता है कि यह होना चाहिए: templateUrl: 'app/components/my.component.html', styleUrls: ['app/components/my.component.css']

— इल्कर बिल्ली

Answer 3

यदि आपको मिलता है typescript error, तो declareआपकी फ़ाइल में केवल चर।

// app.component.ts
declare var module: {
   id: string;
}
//
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

UPDATE - December 08, 2016

moduleकीवर्ड पर उपलब्ध है node। इसलिए यदि आप @types/nodeअपने प्रोजेक्ट में इंस्टॉल करते हैं , तो आपके पास moduleआपकी टाइपस्क्रिप्ट फ़ाइलों में बिना आवश्यकता के कीवर्ड स्वतः ही उपलब्ध होंगे declare।

npm install -D @types/node

आपके कॉन्फ़िगरेशन के आधार पर, टूलिंग प्राप्त करने के लिए आपको इसे अपनी फ़ाइल में शामिल करना पड़ सकता है :tsconfig.json

//tsconfig.json
{
   ...
   "compilerOptions": {
       "types" : ["node"]
   }
   ...
}

// some-component.ts
// now, no need to declare module
@Component({
   moduleId: module.id,    // now it works without annoying Typescript
   ...
})

शुभ लाभ

Comments

तनिक इतना! आख़िरकार मैंने ng build --prod --aotnpm install -D @types/node

— फ़िडलिंग

एक और बात जो मैंने की थी moduleId: 'module.id'(नोटिस मॉड्यूल के आसपास सिंगल कोट्स पर)

— आनंद रॉकज

@AnandRockzz मुझे खुशी है कि आपको यह पोस्ट उपयोगी लगी। मुझे नहीं लगता कि आपको module.idएक स्ट्रिंग के रूप में जोड़ने की आवश्यकता है । यदि यह काम करता है, तो कुछ गलत लगता है। आपको इस पर और शोध करने की आवश्यकता हो सकती है।

— आकाश

Answer 4

से महान स्पष्टीकरण के अलावा echonaxऔर Nishchit Dhananiमैं जोड़ना चाहता हूं, कि मैं वास्तव में घटकों के साथ जनसंख्या से नफरत करता हूं module.id। विशेष रूप से, यदि आपके पास (अहेड-ऑफ-टाइम) एओटी-संकलन के लिए समर्थन है और एक यथार्थवादी परियोजना के लिए यह वही है जो आपको लक्ष्य करना चाहिए, तो module.idआपके घटक मेटाडेटा जैसी चीज़ के लिए कोई जगह नहीं है ।

से डॉक्स :

जीईटी-संकलित एप्लिकेशन जो SystemJSलोडर और घटक-सापेक्ष URL का उपयोग करते @Component.moduleIdहैं, को संपत्ति को सेट करना होगा module.id। एओटी-संकलित ऐप चलने पर मॉड्यूल ऑब्जेक्ट अपरिभाषित है। जब तक आप इस तरह से index.html में एक वैश्विक मॉड्यूल मान असाइन नहीं करते हैं, तब तक यह ऐप अशक्त संदर्भ त्रुटि के साथ विफल रहता है:

<script>window.module = 'aot';</script>

मुझे लगता है कि index.htmlफ़ाइल के उत्पादन संस्करण में यह लाइन होना बिल्कुल स्वीकार्य नहीं है!

इसलिए, लक्ष्य के पास विकास के लिए (जस्ट-इन-टाइम) जीईटी-संकलन है और निम्नलिखित घटक मेटाडेटा परिभाषा के साथ उत्पादन के लिए एओटी समर्थन है: ( moduleId: module.idलाइन के बिना )

@Component({      
  selector: 'my-component',
  templateUrl: 'my.component.html', <- relative to the components current path
  styleUrls:  ['my.component.css'] <- relative to the components current path
})

उसी समय मैं घटक फ़ाइल पथों के सापेक्ष शैलियों, जैसे my.component.cssऔर टेम्पलेट फ़ाइलों को रखना चाहूंगा ।my.component.html my.component.ts

यह सब प्राप्त करने के लिए, मैं जिस समाधान का उपयोग कर रहा हूं, वह कई निर्देशिका स्रोतों से विकास चरण के दौरान वेब सर्वर (लाइट-सर्वर या ब्राउज़र-सिंक) की मेजबानी करना है!

bs-config.json:

{
  "port": 8000,
  "server": ["app", "."]
}

कृपया मेरे विवरण के लिए इस उत्तर पर एक नज़र डालें ।

अनुकरणीय कोणीय 2 त्वरित शुरुआत परियोजना, जो इस दृष्टिकोण पर निर्भर करती है, यहां होस्ट की गई है ।

Answer 5

कोणीय डॉक्टर के अनुसार, आपको @Component ({मॉड्यूलआईड: मॉड्यूल.ड}) का उपयोग नहीं करना चाहिए

कृपया देखें : https://angular.io/docs/ts/latest/guide/change-log.html

यहाँ उस पृष्ठ से प्रासंगिक पाठ दिया गया है:

मॉड्यूलआईडी के सभी उल्लेख हटा दिए गए हैं। "घटक सापेक्ष पथ" रसोई की किताब हटाई गई (2017-03-13)

हमने systemjs-angular-loader.jsअपने अनुशंसित SystemJS विन्यास में एक नया SystemJS प्लगइन ( ) जोड़ा । यह प्लगइन डायनामिक रूप से "कंपोनेंट-रिलेटिव" पाथ को टेम्प्लेट यूआरएल और स्टाइल यूआरएल में आपके लिए "संपूर्ण पथ" में परिवर्तित करता है।

हम आपको केवल घटक-सापेक्ष पथ लिखने के लिए प्रोत्साहित करते हैं। इन डॉक्स में चर्चा किए गए URL का एकमात्र रूप है। अब आपको लिखने की जरूरत नहीं है @Component({ moduleId: module.id }), न ही आपको।

Comments

मैं इसे अपने उत्तर में एक अस्वीकरण के रूप में भी जोड़ूंगा, अपडेट के लिए धन्यवाद।

— एको

Answer 6

ऐसा लगता है कि यदि आपका "मॉड्यूल": tsconfig.json में "es6" का उपयोग कर रहे हैं, तो आपको इसका उपयोग नहीं करना है :)

Comments

अगर हम ऐसा करते हैं तो क्या यह ES6 में ट्रांसपाइल नहीं होगा ?

— आकाश

Answer 7

इस मॉड्यूलआईड वैल्यू का उपयोग कोणीय प्रतिबिंब प्रक्रियाओं और मेटाडाटा_रेसोलवर घटक द्वारा घटक के निर्माण से पहले पूरी तरह से योग्य घटक पथ का मूल्यांकन करने के लिए किया जाता है।

Answer 8

जोड़ना moduleId: module.idठीक करता है कई मुद्दों है कि जब देशी-कोणीय क्षुधा और कोणीय वेब एप्लिकेशन बना हो सकता है। इसका उपयोग करना सबसे अच्छा अभ्यास है।

यह घटक को शीर्ष फ़ोल्डर से फ़ाइलों के बजाय वर्तमान निर्देशिका में देखने में सक्षम बनाता है