2016-09-19 12 views
12

मेरा कोणीय प्रोजेक्ट बढ़ रहा है इसलिए मैं अपनी परियोजना को साफ रखना चाहता हूं।मॉड्यूल के माध्यम से एकाधिक कोणीय घटकों को आयात करें

मेरे पास एक कोणीय घटक है जो घोंसला वाले कोणीय घटक पर निर्भर करता है।

अब मुझे इन घटकों का उपयोग करने के लिए दो आयात विवरणों की आवश्यकता है जो एक दूसरे के बिना काम नहीं कर सकते हैं।

एक समाधान के रूप में मैं एक छोटा कोणीय मॉड्यूल बनाना चाहता था जिसमें इन दो घटक शामिल हैं और मॉड्यूल को मेरे मुख्य app.module में आयात करें।

ऐसा करने के बाद मुझे एक त्रुटि मिलती है जिसमें कहा गया है कि छोटे मॉड्यूल के अंदर घटकों में से एक को पहचाना नहीं गया है।

//app.module.ts 
@NgModule({ 
    imports: [BrowserModule, HttpModule, DictaatModule], 
    declarations: [AppComponent, DictatenComponent, FilePreviewComponent], 
    bootstrap: [AppComponent] 
}) 


//Dictaat.module.ts 
import { DictaatComponent } from './dictaat.component'; 
import { DictaatEntryComponent } from './dictaat-entry.component'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
}) 
export class DictaatModule{ } 

मेरा प्रश्न: यह एक मॉड्यूल में समूह से कई घटकों के लिए एक अच्छा अभ्यास है और यह पहले से ही कोणीय में समर्थित है?

ps। मैं कोणीय 2.0.0 के साथ काम कर रहा हूं, आरसी के नहीं। मेरा सेटअप नायकों ट्यूटोरियल के दौरे के सेटअप के लिए तुलनीय है।

संपादित करें: स्रोत कोड https://github.com/Linksonder/Webdictaat/

त्रुटि संदेश:


Unhandled Promise rejection: Template parse errors: 
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'. 
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
    </div> 
    <div class="col-md-3"> 
     <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat> 
    </d"): [email protected]:20 
'wd-dictaat' is not a known element: 
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 
    </div> 
    <div class="col-md-3"> 
     [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): [email protected]:8 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: 
Can't bind to 'dictaatName' since it isn't a known property of 'wd-dictaat'. 
1. If 'wd-dictaat' is an Angular component and it has 'dictaatName' input, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
    </div> 
    <div class="col-md-3"> 
     <wd-dictaat [ERROR ->][dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dictaat> 
    </d"): [email protected]:20 
'wd-dictaat' is not a known element: 
1. If 'wd-dictaat' is an Angular component, then verify that it is part of this module. 
2. If 'wd-dictaat' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. (" 
    </div> 
    <div class="col-md-3"> 
     [ERROR ->]<wd-dictaat [dictaatName]="selectedDictaat.name" *ngIf="selectedDictaat">Loading dictaat...</wd-dicta"): [email protected]:8 
    at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8530:21) 
    at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16905:53) 
    at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:85) 
    at Set.forEach (native) 
    at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16828:49) 
    at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28) 
    at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43) 
    at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57 
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37) 
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47) 
+1

त्रुटि संदेश पोस्ट कृपया। – mxii

उत्तर

29

आप क्रम में Dictaat.module.ts के निर्यात करने के लिए अपने घटक जोड़ने की जरूरत है उन्हें अपने app.module.ts में आयात करने के लिए के लिए:

//Dictaat.module.ts 
import { DictaatComponent } from './dictaat.component'; 
import { DictaatEntryComponent } from './dictaat-entry.component'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
    exports: [DictaatComponent, DictaatEntryComponent] 
}) 

export class DictaatModule{ } 
+1

त्वरित उत्तर के लिए धन्यवाद! मुद्दा अब तय किया गया है। अभी तक एक सही उत्तर के रूप में चिह्नित नहीं कर सकते हैं। कुछ मिनटों में ऐसा करेंगे। – Linksonder

7

घटकों, निर्देशों, और पाइप कि इस मॉड्यूल आयात करके उपलब्ध हो जाना चाहिए, exports में सूचीबद्ध किया जाना चाहिए। declarations मॉड्यूल के भीतर इन घटकों उपलब्ध बनाने के लिए है:

@NgModule({ 
    imports: [BrowserModule, HttpModule], 
    declarations: [DictaatComponent, DictaatEntryComponent], 
    exports: [DictaatComponent, DictaatEntryComponent], 
}) 
export class DictaatModule{ } 
+0

यहां वही, उत्तरकर्ता के लिए धन्यवाद। आप समाधान स्टीफन Svrkota के समान थे। – Linksonder

0

मेरे लिए, मेरे पास कई कस्टम घटक हैं, इसलिए मैंने एक कस्टम-view.module.ts बनाया और सभी घटकों को निर्यात किया।

अन्य मॉड्यूल कस्टम दृश्य का उपयोग करना चाहिए करने के लिए CustomViewModule आयात करने के लिए

कस्टम view.module.ts

@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [ RatingComponent ], 
    exports: [ RatingComponent ] 
}) 
export class CustomViewModule { } 

और अन्य मॉड्यूल जो (इस मामले में RatingComponent) कस्टम दृश्य का उपयोग करना चाहते में

चाहते
@NgModule({ 
    imports: [ 
    CustomViewModule 
    ] 
}) 

export class OtherModule { } 

मैं कोणीय 4+ का उपयोग कर रहा हूं, और डिक्टाट कॉम्पोनेंट का निर्यात कर रहा हूं और फिर ऐप मॉड्यूल में डिक्टाट मॉड्यूल आयात करना मेरे लिए काम नहीं करता है। मुझे अभी भी प्रत्येक मॉड्यूल में सभी डिक्टाट मॉड्यूल आयात करना है जो डिक्टाट कॉम्पोनेंट का उपयोग करना चाहता है।

2

आलसी devs के लिए, आलसी लोडिंग पृष्ठों का उपयोग कर। यह "यह ज्ञात संपत्ति नहीं है" त्रुटि तब भी हो सकती है जब आप इसे ऐप मॉड्यूल स्तर पर आयात करते हैं।

इसका कारण यह है कि आप आयनिक से आलसी लोडिंग सुविधा का उपयोग कर रहे हैं।

तो इसे ठीक करने के लिए आपको इसे Page Module level पर आयात करने की आवश्यकता है।

आलसी लोडिंग को समझने के लिए अच्छे संसाधन।

http://blog.ionic.io/ionic-and-lazy-loading-pt-1/

http://blog.ionic.io/ionic-and-lazy-loading-pt-2/

संबंधित मुद्दे