@ कोणीय / सामग्री / index.d.ts 'एक मॉड्यूल नहीं है

Question

कोणीय 8 के साथ, एप्लिकेशन का निर्माण करते समय, हम निम्नलिखित त्रुटि का सामना करते हैं:

app/modules/admin-module/pages/editor/editor.component.ts:6:27 - error TS2306: 
File ...node_modules/@angular/material/index.d.ts' is not a module.

Answer 1

कोणीय 9 (आज जारी) में अपग्रेड करने के बाद, मैं इस मुद्दे पर भी भाग गया और पाया कि उन्होंने उत्तर में उल्लिखित परिवर्तन को बदल दिया । मुझे इस बात का कोई कारण नहीं मिल रहा है कि उन्होंने यह बदलाव क्यों किया।

मेरे पास एक material.module.ts फ़ाइल है जिसे मैं सभी सामग्री घटकों को आयात / निर्यात करता हूं (त्वरित विकास के लिए सबसे कुशल, लेकिन उपयोगी नहीं है)। मैंने अपने सभी आयातों को व्यक्तिगत सामग्री फ़ोल्डरों के माध्यम से अद्यतन किया, हालांकि एक index.ts बैरल बेहतर हो सकता है। फिर से, निश्चित नहीं है कि उन्होंने यह बदलाव क्यों किया, लेकिन मैं यह अनुमान लगा रहा हूं कि इसे पेड़-झटकों की दक्षता के साथ करना है।

मेरे सामग्री में शामिल है। नीचे मामले में यह किसी को भी मदद करता है, यह मुझे मिला है अन्य सामग्री मॉड्यूल से प्रेरित है:

नोट : जैसा कि अन्य ब्लॉग पोस्ट ने उल्लेख किया है और मेरे व्यक्तिगत अनुभव से, नीचे दिए गए साझा मॉड्यूल का उपयोग करते समय सावधान रहें। मेरे ऐप में 5 ~ अलग-अलग फ़ीचर मॉड्यूल (आलसी लोडेड) हैं जिन्हें मैंने अपने मटेरियल मॉड्यूल में इंपोर्ट किया है। जिज्ञासा से बाहर, मैंने साझा मॉड्यूल का उपयोग करना बंद कर दिया और इसके बजाय केवल प्रत्येक सामग्री मॉड्यूल की व्यक्तिगत सामग्री घटकों को आयात किया। इसने मेरे बंडल के आकार को काफी कम कर दिया, लगभग 200kb की कमी। मैंने मान लिया कि बिल्ड ऑप्टिमाइज़ेशन प्रक्रिया मेरे मॉड्यूल द्वारा उपयोग किए गए किसी भी घटक को ठीक से नहीं गिराएगी, लेकिन ऐसा प्रतीत नहीं होता है ...

// material.module.ts
import { ModuleWithProviders, NgModule} from "@angular/core";
import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
import { MatIconRegistry } from '@angular/material/icon';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
    imports: [
        MatAutocompleteModule,
        MatBadgeModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        MatNativeDateModule
    ],
    exports: [
        MatAutocompleteModule,
        MatBadgeModule,
        MatButtonModule,
        MatButtonToggleModule,
        MatCardModule,
        MatCheckboxModule,
        MatChipsModule,
        MatStepperModule,
        MatDatepickerModule,
        MatDialogModule,
        MatExpansionModule,
        MatFormFieldModule,
        MatGridListModule,
        MatIconModule,
        MatInputModule,
        MatListModule,
        MatMenuModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatProgressSpinnerModule,
        MatRadioModule,
        MatRippleModule,
        MatSelectModule,
        MatSidenavModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatSnackBarModule,
        MatSortModule,
        MatTableModule,
        MatTabsModule,
        MatToolbarModule,
        MatTooltipModule,
        MatTreeModule,
        MatNativeDateModule
    ],
    providers: [     
    ]
})
export class MaterialModule {
    constructor(public matIconRegistry: MatIconRegistry) {
        // matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }

    static forRoot(): ModuleWithProviders {
        return {
            ngModule: MaterialModule,
            providers: [MatIconRegistry]
        };
    }
}

Comments

यहाँ अद्यतन के लिए धन्यवाद

— जिमी केन

मुझे कोणीय 8 से 9 को अपग्रेड करने के बाद एक ही समस्या थी। आपके समाधान ने मेरे लिए काम किया। यह मेरी राय में जवाब स्वीकार किया जाना चाहिए क्योंकि यह वास्तव में उन्नत संस्करण के लिए एक समाधान प्रदान करता है। इन त्रुटियों के कारण संस्करण 9 को वापस 8 में अपग्रेड करना समस्या के स्वीकृत समाधान के रूप में नहीं देखा जाना चाहिए। साझा करने के लिए धन्यवाद!

— omostan

निम्नलिखित सभी सामग्री / कोर से नहीं कोणीय / कोर से आते हैं (मुझे लगता है): आयात {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} से '@ कोणीय / सामग्री / कोर';

— स्विसकोड

अच्छी पकड़, मेरे जल्दबाजी में मैंने MatNativeDateModule को गलत आयात में डाल दिया :), जवाब में इसे तय किया

— जेफ गिल्डलैंड

@ मायकेगल्डहिल को विकास में कई चीजें पसंद हैं, कई चीजें गूढ़ हैं। उन्हें एक समाधान लागू करना चाहिए जो एक डिप्रेशन चेतावनी या एक अधिक विशिष्ट त्रुटि संदेश देता है ताकि आप जान सकें कि इसे कैसे ठीक किया जाए। केवल दूसरा तरीका है कि आप यह जान पाएंगे कि इसे कैसे ठीक किया जाए यदि आपके पास टाइपस्क्रिप्ट और कोणीय के साथ काम करने का अनुभव है, और आपको पता है कि संभावित समस्या क्या है जब आप ".d.ts" फ़ाइल प्रकार के साथ कोई त्रुटि देखते हैं। वह ज्ञान आमतौर पर हताशा के घंटों से आता है ... इस "डोमेन ज्ञान" को दूसरों के साथ साझा करने का एक बेहतर तरीका होना चाहिए!

— जेफ गिलिलैंड 12

Answer 2

ऐसा लगता है जैसे यह सूत्र कहता है कि एक परिवर्तन जारी किया गया था:

घटक अब "@ कोणीय / सामग्री" के माध्यम से आयात नहीं किए जा सकते हैं। व्यक्तिगत द्वितीयक प्रवेश-बिंदुओं का उपयोग करें, जैसे @ कोणीय / सामग्री / बटन।

अपडेट : पुष्टि कर सकते हैं, यह मुद्दा था। अपग्रेड @angular/material@9.0...करने के बाद @angular/material@7.3.2हम इसे अस्थायी रूप से हल कर सकते थे। लगता है कि हमें दीर्घकालिक समाधान के लिए परियोजना को अद्यतन करने की आवश्यकता है।

Comments

डाउनग्रेड करने के बाद ng update @angular/material, यह करें , यह आपके लिए सभी आयातों को माइग्रेट और अपडेट करेगा :)

— निकोलस

Answer 3

यह पूर्ण पथ लिखकर हल किया जा सकता है, उदाहरण के लिए यदि आप MatDialogModuleअनुसरण को शामिल करना चाहते हैं :

@ कोणीय / सामग्री से पहले 9.xx

import { MatDialogModule } from "@angular/material";
//leading to error mentioned

@ कोणीय / सामग्री 9.xx के अनुसार

import { MatDialogModule } from "@angular/material/dialog";
//works fine 

आधिकारिक परिवर्तन लॉग ब्रेकिंग परिवर्तन संदर्भ: https://github.com/angular/compenders/blob/master/CHANGELOG.md#material-9

Comments

यह एक मेरे लिए काम किया।

— शिनॉय शाजी

मेरे लिए भी काम किया .. धन्यवाद।

— सिद्धार्थ शंकर

Answer 4

सामान्य निर्देशिका के माध्यम से आयातित (कोणीय 9 से) घटक आगे नहीं हो सकते हैं

आपको एक निर्दिष्ट घटक पथ जोड़ना चाहिए

import {} from '@angular/material'; 

import {} from '@angular/material/input';

Answer 5

import { MatDialogModule } from '@angular/material/dialog';
import { MatTableModule } from '@angular/material/table';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';

Comments

StackOverflow पर आपका स्वागत है @ Владимир, यदि आप `` `(बिना स्थान अर्थात` `जावास्क्रिप्ट) के साथ भाषा कोड जोड़ते हैं और इसे बंद करते हैं, तो यह वास्तव में पढ़ने के लिए उपयोगी होगा। अधिक मदद के लिए कृपया stackoverflow.com/help/how-to-answer पर जाएँ धन्यवाद। योगदान देते रहें

— राजन

नमस्कार! हालांकि यह कोड प्रश्न को हल कर सकता है, जिसमें यह भी बताया गया है कि यह समस्या कैसे और क्यों हल करती है, इससे वास्तव में आपके पोस्ट की गुणवत्ता को बेहतर बनाने में मदद मिलेगी, और संभवत: अधिक वोट मिले। याद रखें कि आप भविष्य में पाठकों के लिए सवाल का जवाब दे रहे हैं, न कि केवल उस व्यक्ति से जो अब पूछ रहा है। कृपया स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें और संकेत दें कि क्या सीमाएँ और मान्यताएँ लागू होती हैं।

— ब्रायन

यह कोड बहुत अच्छा है, लेकिन यदि आप इसे समझाते हैं तो यह अच्छा होगा। ओडेल्ना, या ने स्मोग पानि।

— डॉ। एमएएफ

Answer 6

और ng update @angular/materialआपके कोड को भी अपडेट करेगा और सभी आयातों को ठीक करेगा

Comments

यह केवल package.json और package-lock.json को अपडेट करेगा। हमारे कोड में कुछ भी नहीं बदलेगा

— जोएल के थॉमस

बस 7 से 9 तक अपग्रेड किया गया, इसने मेरे आयात को ठीक किया, वास्तव में।

— टोबियास स्टैंग्ल

आपने मेरा दिन बचाया, धन्यवाद !!!

— निकोलस

Answer 7

स्वीकृत उत्तर सही है, लेकिन यह मेरे लिए पूरी तरह से काम नहीं करता था। मुझे package.lock फ़ाइल को हटाना था, "npm इंस्टॉल" को फिर से चलाना, और फिर मेरे दृश्य स्टूडियो को बंद करना और फिर से खोलना। आशा है कि यह किसी की मदद करता है

Answer 8

बस 7 से 9 तक @ कोणीय / सामग्री अपडेट करें ,

npm @ कोणीय / सामग्री - save की स्थापना रद्द करें

npm स्थापित करें @ कोणीय / सामग्री @ ^ 7.1.0 - save

एनजी अद्यतन @ कोणीय / सामग्री

बस प्रतीक्षा करें और देखें कि कोणीय अकेले प्रवास कर रहा है,

आशा है कि यह किसी की मदद करता है :)

Answer 9

क्या npm i -g @angular/material --saveसमस्या को हल करने

Comments

अधिक विवरण और स्वरूपित कोड के उपयोग पर विचार करें

— मेहरदाद