कोणीय 4 में साझा मॉड्यूल के माध्यम से कोणीय सामग्री मॉड्यूल को सही तरीके से आयात कैसे करें?

Question

मैं कोणीय सामग्री के साथ जोड़ा कोणीय का उपयोग कर एक आवेदन बना रहा हूं, और मुझे अपने मॉड्यूल संरचना के साथ कुछ समस्याएं आ रही हैं।

दिशानिर्देश बताते हैं कि सामग्री मॉड्यूल आयात करना बहिष्कृत है और अब नहीं किया जाना चाहिए, यही कारण है कि मैंने एक अलग सामग्री मॉड्यूल बनाया है जहां मैं केवल उन सामग्री मॉड्यूल आयात करता हूं जिन्हें मुझे उपयोग करने की आवश्यकता है; इस मॉड्यूल को तब एक साझा मॉड्यूल में आयात किया जाता है, जिसे मुख्य रूप से मुख्य ऐप मॉड्यूल समेत हर जगह आयात किया जाता है।

मैं उपयोग कर रहे सामग्री घटकों में से एक एमडीटूलिप है, और जब मैं टैबलेट पर अपने ऐप का परीक्षण करता हूं तो यह सब ठीक काम करता है: क्या होता है कि टूलटिप्स लंबे नल पर प्रतिक्रिया नहीं करते हैं जैसे कि वे हैं माना जाता है, और वे नहीं खुलेंगे। मेरे ऐप मॉड्यूल में पूर्ण सामग्री मॉड्यूल (@ कोणीय/सामग्री से) आयात करने का एकमात्र तरीका यह है कि यह बेहद गलत और सुरुचिपूर्ण है। किसी अन्य दृष्टिकोण ने इसे काटने के लिए काफी प्रतीत नहीं किया था, क्योंकि वे सभी को अपनी समस्याओं को हल करने के दौरान समस्याएं हल नहीं करेंगे।

ये मेरी मॉड्यूल (निरर्थक आयात बयान से अलग कर लिया) हैं:

MaterialModule:

import { NgModule } from '@angular/core'; 
import {...} from '@angular/material'; 

@NgModule({ 
    imports: [ 
    MdGridListModule, 
    MdButtonModule, 
    MdTabsModule, 
    MdToolbarModule, 
    MdCardModule, 
    MdInputModule, 
    MdSelectModule, 
    MdAutocompleteModule, 
    MdIconModule, 
    MdTooltipModule 
    ], 
    exports: [ 
    MdGridListModule, 
    MdButtonModule, 
    MdTabsModule, 
    MdToolbarModule, 
    MdCardModule, 
    MdInputModule, 
    MdSelectModule, 
    MdAutocompleteModule, 
    MdIconModule, 
    MdTooltipModule 
    ], 
    providers: [ 
    MdIconRegistry 
    ] 
}) 

export class MaterialModule {} 

SharedModule:

import { MaterialModule } from '../material/app-material.module'; 
@NgModule({ 
    imports:  [ 
    CommonModule, 
    MaterialModule, 
    FlexLayoutModule, 
    FormsModule, 
    ReactiveFormsModule 
    ], 
    declarations: [ 
    NavbarComponent, 
    SearchFiltersComponent, 
    RightCurrencyPipe 
    ], 
    exports:  [ 
    CommonModule, 
    FormsModule, 
    ReactiveFormsModule, 
    MaterialModule, 
    FlexLayoutModule, 
    NavbarComponent, 
    RightCurrencyPipe, 
    SearchFiltersComponent 
    ], 
    providers: [ 
    SpinnerService, 
    ProductsService, 
    StatePersistenceService 
    ] 
}) 

export class SharedModule {} 

AppModule:

import { MaterialModule } from "@angular/material"; 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    ProductPageComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    RouterModule, 
    BrowserAnimationsModule, 
    AppRoutingModule, 
    SharedModule, 
    CoreModule, 
    LoginModule, 
    MaterialModule 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

हूँ मैं Doi कुछ गलत है? आप अपने ऐप को submodules में विभाजित करने के बारे में कैसे जाएंगे?

अग्रिम

Answer 1

धन्यवाद अपने संकलन और तैनाती रणनीति आप पेड़ मिलाते हुए (मृत-कोड उन्मूलन या लिव-कोड आयात के लिए) का उपयोग करना चाहेंगे पर निर्भर करता है। MaterialModule को बहिष्कृत करने के लिए यह मुख्य प्रेरणा है। आधिकारिक सुझाव उन मॉड्यूल में only import the components you need है जो इसकी आवश्यकता है। सभी आयातों के साथ एक एकल MaterialModule बनाने का आपका समाधान उस पहलू को पूर्ववत कर रहा है लेकिन आपकी परियोजना संरचना के आधार पर काम कर सकता है (यदि आप केवल उदाहरण के लिए एक मॉड्यूल का उपयोग कर रहे हैं)।

अपने SharedModule निर्यात से MaterialModule को हटाने का प्रयास करें। इस तरह आपके पास केवल आपके ऐप रूट में मॉड्यूल के लिए प्रविष्टि का एक बिंदु है।

Answer 2

आपका दृष्टिकोण बढ़िया है। आपके द्वारा प्रस्तुत की गई संरचना एक विकल्प है जो material.angular.io में प्रस्तुत किया गया था। मुझे यकीन नहीं है कि आपका टूलटिप क्यों काम नहीं करता है। लेकिन मैं आपको रूट मॉड्यूल पर केवल एक बार अपने कस्टम MaterialModule का उपयोग करने की सलाह देना चाहता हूं। इसे साझा मॉड्यूल में फिर से आयात करने की आवश्यकता नहीं है।