@ কৌণিক / উপাদান / সূচক.ডেটস 'মডিউল নয়

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 এ আপগ্রেড করার পরে (আজ প্রকাশিত হয়েছে) আমিও এই ইস্যুটিতে দৌড়েছি এবং দেখেছি তারা উত্তরে উল্লিখিত ব্রেকিং পরিবর্তন করেছে । কেন তারা এই পরিবর্তন করেছে তার কারণ আমি খুঁজে পাচ্ছি না।

আমার কাছে একটি ম্যাটরিয়াল.মডিউল.টস ফাইল রয়েছে যা আমি সমস্ত উপাদান উপাদান আমদানি / রফতানি করি (সবচেয়ে দক্ষ নয়, তবে দ্রুত বিকাশের জন্য দরকারী)। আমি আমার সমস্ত আমদানি পৃথক উপাদান ফোল্ডারগুলিতে গিয়ে আপডেট করেছি, যদিও একটি সূচক.টিএস ব্যারেল আরও ভাল হতে পারে। আবার, তারা কেন এই পরিবর্তন করেছে তা নিশ্চিত নন, তবে আমি অনুমান করছি গাছের কাঁপানো কার্যকারিতা নিয়ে এটি করা দরকার।

এটি যে কাউকে সহায়তা করে সে ক্ষেত্রে নীচে আমার উপাদান.মডিউল.টস অন্তর্ভুক্ত করে এটি আমার খুঁজে পাওয়া অন্যান্য উপাদান মডিউলগুলি থেকে অনুপ্রাণিত হয়েছে:

দ্রষ্টব্য : অন্যান্য ব্লগ পোস্ট যেমন উল্লেখ করেছে এবং আমার ব্যক্তিগত অভিজ্ঞতা থেকে, নীচের মত একটি ভাগ করা মডিউল ব্যবহার করার সময় সতর্কতা অবলম্বন করুন। আমার অ্যাপটিতে আমার 5 ~ বিভিন্ন বৈশিষ্ট্য মডিউল রয়েছে (অলস বোঝা) যা আমি আমার উপাদানগুলির মডিউলটি আমদানি করেছি। কৌতূহলের বাইরে, আমি ভাগ করা মডিউলটি ব্যবহার বন্ধ করে দিয়েছি এবং পরিবর্তে প্রতিটি বৈশিষ্ট্য মডিউলটির জন্য প্রয়োজনীয় পৃথক উপাদান উপাদানগুলি আমদানি করেছি। এটি আমার বান্ডিলের আকারটি বেশ খানিকটা হ্রাস করেছে, প্রায় ২০০ কেবি হ্রাস। আমি ধরে নিয়েছিলাম যে বিল্ড অপ্টিমাইজেশন প্রক্রিয়াটি আমার মডিউলগুলি ব্যবহার না করে এমন কোনও উপাদান যথাযথভাবে ফেলে দেবে, তবে এটি মনে হয় না ...

// 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 কৌণিক আপগ্রেড করার পরেও আমার একই সমস্যা ছিল Your আপনার সমাধানটি আমার পক্ষে কাজ করেছে। এটি আমার মতে উত্তর গ্রহণ করা উচিত কারণ এটি আপগ্রেড সংস্করণটির জন্য একটি সমাধান সরবরাহ করে। এই ত্রুটিগুলির কারণে 9 সংস্করণটি পিছনে 8 এ ডাউনগ্রেড করা সমস্যার সমস্যার গ্রহণযোগ্য সমাধান হিসাবে দেখা উচিত নয়। ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— সর্বদা

নিম্নলিখিতগুলি উপাদান / কোর থেকে কৌণিক / মূল নয় (আমার ধারণা) থেকে আসে: '@ কৌনিক / উপাদান / কোর' থেকে আমদানি করুন {এমএএলএবেল_গ্লোবাল_অপশনস, ম্যাটনিটিভেটেডমডিউল, এমএডিডিডিএলএকএলএল;

— সুইসকোডার

ভাল ধরা, আমার তাড়াহুড়োয়ায় আমি ম্যাটনেটিভডেটমডুলকে ভুল আমদানিতে রেখেছিলাম :), উত্তরে ঠিক করেছিলাম

— জেফ গিলিল্যান্ড

@ মাইকগ্লেডহিল অনেকগুলি উন্নয়নের মতো, অনেকগুলি বিষয় রহস্যজনক। তাদের এমন একটি সমাধান কার্যকর করা উচিত যা অবমূল্যায়নের সতর্কতা বা আরও নির্দিষ্ট ত্রুটি বার্তা দেয় যাতে আপনি কীভাবে এটি ঠিক করতে জানেন। আপনি কীভাবে এটি ঠিক করবেন তা জানার একমাত্র উপায় হ'ল যদি আপনার টাইপস্ক্রিপ্ট এবং কৌণিকের সাথে কাজ করার অভিজ্ঞতা থাকে এবং আপনি যখন ".d.ts" ফাইলের ধরণে কোনও ত্রুটি দেখেন তখন সম্ভবত সমস্যাটি কী তা আপনি জানেন। এই জ্ঞানটি হতাশার পরে সাধারণত আসে ... অন্যদের সাথে এই "ডোমেন জ্ঞান" ভাগ করার আরও ভাল উপায় হওয়া দরকার!

— জেফ গিলিল্যান্ড

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/components/blob/master/CHANGELOG.md#matory-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

স্ট্যাকওভারফ্লোতে @ Welcome স্বাগতম, আপনি যদি `` `(স্পেস ব্যতীত` `` জাভাস্ক্রিপ্ট) এর সাথে ভাষা কোড যুক্ত করেন এবং এটি বন্ধ করেন তবে এটি পড়ার জন্য সত্যই সহায়ক হবে। আরো সহায়তার জন্য যান দয়া করে stackoverflow.com/help/how-to-answer আপনাকে ধন্যবাদ। অবদান রাখুন

— রাজন

হ্যালো! এই কোডটি কীভাবে এবং কেন সমস্যার সমাধান করে তার ব্যাখ্যা সহ প্রশ্নটি সমাধান করতে পারে যদিও আপনার পোস্টের মান উন্নত করতে সত্যিই সহায়তা করবে এবং সম্ভবত আরও বেশি ভোটের ফলাফল হবে। মনে রাখবেন যে আপনি ভবিষ্যতে পাঠকদের জন্য প্রশ্নের উত্তর দিচ্ছেন, কেবল এখনই জিজ্ঞাসা করা ব্যক্তি নয়। দয়া করে সম্পাদনা ব্যাখ্যা যোগ করতে পারেন এবং সীমাবদ্ধতা এবং অনুমানের কি প্রয়োগ একটি ইঙ্গিত দিতে আপনার উত্তর।

— ব্রায়ান

এই কোডটি খুব সুন্দর, তবে আপনি যদি এটি ব্যাখ্যা করেন তবে এটি দুর্দান্ত। ওড্ডেলনা, ইয়া নে স্মোগ পানিয়াত।

— ডাঃ এমএএফ

Answer 6

এবং ng update @angular/materialআপনার কোড আপডেট করবে এবং সমস্ত আমদানি ঠিক করবে

Comments

এটি কেবল প্যাকেজ.জসন এবং প্যাকেজ-লক.জসন আপডেট করবে। আমাদের কোডে কোনও পরিবর্তন হবে না

— জোয়েল কে থমাস

মাত্র 7 থেকে 9 এ আপগ্রেড করা হয়েছে, এটি আমার আমদানিগুলি ঠিক করেছে।

— টোবিয়াস স্ট্যাংল

আপনি আমার দিন বাঁচিয়েছেন, ধন্যবাদ !!!

— নিকোলাস

Answer 7

গৃহীত উত্তর সঠিক, তবে এটি আমার পক্ষে পুরোপুরি কার্যকর হয়নি। আমাকে প্যাকেজটি মুছে ফেলতে হয়েছিল lock লক ফাইলটি, "এনপিএম ইনস্টল" পুনরায় চালাতে এবং তারপরে আমার ভিজ্যুয়াল স্টুডিওটি বন্ধ করে আবার খুলতে হবে। আশা করি এটি কাউকে সাহায্য করবে

Answer 8

কেবলমাত্র 7 থেকে 9 পর্যন্ত @ কৌনিক / উপাদান আপডেট করুন ,

এনপিএম আনইনস্টল করুন @ কৌনিক / উপাদান - সংরক্ষণ করুন

এনপিএম ইনস্টল করুন @ কৌণিক / উপাদান @ ^ 7.1.0 - সংরক্ষণ করুন

এনজি আপডেট @ কৌনিক / উপাদান

শুধু অপেক্ষা করুন এবং দেখুন কৌণিক একা মাইগ্রেশন করছে,

আশা করি এটি কাউকে সাহায্য করবে :)

Answer 9

কি npm i -g @angular/material --saveসমস্যা সমাধানের জন্য

Comments

আরও বিশদ এবং ফর্ম্যাট কোডগুলির ব্যবহার যোগ করার বিষয়ে বিবেচনা করুন

— মেহেরদাডেপি