@ angular / material / index.d.ts 'ไม่ใช่โมดูล

40

ด้วย Angular 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.

angular angular-material

— ForestG
แหล่งที่มา

87

หลังจากอัพเกรดเชิงมุม 9 (ปล่อยตัวในวันนี้) ผมวิ่งเข้าไปในปัญหานี้เช่นกันและพบว่าพวกเขาทำการเปลี่ยนแปลงทำลายที่กล่าวถึงในคำตอบ ฉันหาเหตุผลไม่ได้ว่าทำไมพวกเขาถึงทำการเปลี่ยนแปลงนี้

ฉันมีไฟล์ material.module.ts ที่ฉันนำเข้า / ส่งออกส่วนประกอบวัสดุทั้งหมด (ไม่ได้มีประสิทธิภาพมากที่สุด แต่มีประโยชน์สำหรับการพัฒนาอย่างรวดเร็ว) ฉันผ่านและอัปเดตการนำเข้าทั้งหมดของฉันไปยังโฟลเดอร์วัสดุแต่ละรายการแม้ว่าบาร์เรล index.ts อาจดีกว่า อีกครั้งไม่แน่ใจว่าทำไมพวกเขาถึงทำการเปลี่ยนแปลงนี้ แต่ฉันคิดว่ามันเกี่ยวกับประสิทธิภาพที่สั่นไหวของต้นไม้

รวมถึง material.module.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]
        };
    }
}

— Jeff Gilliland
แหล่งที่มา

1

เหมือนกันที่นี่ขอบคุณสำหรับการอัปเดต

— Jimmy Kane

2

ฉันมีปัญหาเดียวกันหลังจากอัปเกรดเชิงมุม 8 ถึง 9 โซลูชันของคุณใช้ได้สำหรับฉัน คำตอบนี้ควรได้รับการยอมรับในความเห็นของฉันเพราะจริง ๆ แล้วมันมีวิธีแก้ปัญหาสำหรับรุ่นอัพเกรด ปรับลดรุ่น 9 กลับเป็น 8 เนื่องจากข้อผิดพลาดเหล่านี้ไม่ควรถูกมองว่าเป็นวิธีการแก้ปัญหาที่ยอมรับได้ ขอบคุณสำหรับการแบ่งปัน!

— omostan

1

ทั้งหมดต่อไปนี้มาจากวัสดุ / แกนไม่ใช่เชิงมุม / แกน (ฉันเดา): นำเข้า {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} จาก '@ angular / material / core';

— SwissCoder

1

จับได้ดีในความรีบเร่งของฉันฉันได้ใส่ MatNativeDateModule ในการนำเข้าที่ผิด :) แก้ไขมันในคำตอบ

— Jeff Gilliland

1

@ MikeGledhill เหมือนหลาย ๆ สิ่งในการพัฒนามีหลายสิ่งที่ลึกลับ พวกเขาควรใช้วิธีแก้ปัญหาที่ให้คำเตือนการเลิกใช้งานหรือข้อความแสดงข้อผิดพลาดเฉพาะเจาะจงมากขึ้นเพื่อให้คุณทราบวิธีการแก้ไข อีกวิธีหนึ่งที่คุณจะรู้วิธีแก้ไขปัญหานี้คือถ้าคุณมีประสบการณ์ในการทำงานกับ typescript & angular และคุณรู้ว่าสิ่งที่น่าเป็นปัญหาคือเมื่อคุณเห็นข้อผิดพลาดที่มีประเภทไฟล์ ".d.ts" ความรู้นั้นมักมาจากความยุ่งยากหลายชั่วโมง ... ต้องมีวิธีที่ดีกว่าในการแบ่งปัน "ความรู้เกี่ยวกับโดเมน" นี้กับผู้อื่น!

— Jeff Gilliland

37

ดูเหมือนว่ากระทู้นี้บอกว่ามีการเปลี่ยนแปลงการแตกหัก:

ไม่สามารถนำเข้าส่วนประกอบผ่าน "@ angular / material" อีกต่อไป ใช้จุดเริ่มต้นรองแต่ละจุดเช่น @ angular / material / ปุ่ม

อัปเดต : สามารถยืนยันได้นี่เป็นปัญหา หลังจากปรับลดรุ่น@angular/material@9.0...เป็น @angular/material@7.3.2เราสามารถแก้ไขปัญหานี้ได้ชั่วคราว คิดว่าเราจำเป็นต้องปรับปรุงโครงการสำหรับการแก้ปัญหาระยะยาว

— ForestG
แหล่งที่มา

1

หลังจากปรับลดรุ่นแล้วให้ทำเช่นng update @angular/materialนั้นระบบจะโอนย้ายและอัปเดตการนำเข้าทั้งหมดสำหรับคุณ :)

— Nicolas

24

สิ่งนี้สามารถแก้ไขได้โดยการเขียนเส้นทางแบบเต็มตัวอย่างเช่นหากคุณต้องการรวมMatDialogModuleดังต่อไปนี้:

ก่อนหน้า @ @ angular / วัสดุ 9.xx

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

ตาม @ angular / วัสดุ 9.xx

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

บันทึกการเปลี่ยนแปลงที่มีการเปลี่ยนแปลงอย่างเป็นทางการอ้างอิง: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

— Khushi Raval
แหล่งที่มา

อันนี้ใช้ได้สำหรับฉัน

— Shinoy Shaji

ทำงานให้ฉันเช่นกัน .. ขอบคุณ

— Sidhartha Shankar

8

ส่วนประกอบไม่สามารถนำเข้าเพิ่มเติม (จาก Angular 9) ที่นำเข้าผ่านไดเรกทอรีทั่วไป

คุณควรเพิ่มเส้นทางส่วนประกอบที่ระบุเช่น

import {} from '@angular/material';

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

— Ali Ashraf
แหล่งที่มา

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';

— Владимир
แหล่งที่มา

ยินดีต้อนรับ @ Владимирบน StackOverflow มันจะมีประโยชน์มากสำหรับการอ่านถ้าคุณเพิ่มรหัสภาษาด้วย `` `(โดยไม่มีที่ว่างเช่น` `` จาวาสคริปต์) และปิดมัน สำหรับความช่วยเหลือเพิ่มเติมโปรดไปที่stackoverflow.com/help/how-to-answerขอบคุณ ร่วมให้ข้อมูล

— ราชา

สวัสดี! แม้ว่ารหัสนี้อาจแก้ปัญหาได้รวมถึงคำอธิบายว่าทำไมและวิธีแก้ปัญหานี้จะช่วยปรับปรุงคุณภาพการโพสต์ของคุณได้อย่างไรและอาจส่งผลให้คะแนนมากขึ้น จำไว้ว่าคุณกำลังตอบคำถามสำหรับผู้อ่านในอนาคตไม่ใช่เพียงแค่คนที่ถามตอนนี้ โปรดแก้ไขคำตอบของคุณเพื่อเพิ่มคำอธิบายและระบุข้อ จำกัด และสมมติฐานที่ใช้

— ไบรอัน

รหัสนี้เป็นสิ่งที่ดีมาก แต่มันจะดีกว่าถ้าคุณอธิบายมัน Otdelna, Ya ne smog paniat

— ดร. MAF

2

และng update @angular/materialจะอัปเดตรหัสของคุณและแก้ไขการนำเข้าทั้งหมด

— Sivuyile TG Magutywa
แหล่งที่มา

สิ่งนี้จะอัปเดต package.json และ package-lock.json เท่านั้น จะไม่เปลี่ยนแปลงอะไรในรหัสของเรา

— Joel K Thomas

1

เพิ่งอัพเกรดจาก 7 เป็น 9 มันช่วยแก้ไขการนำเข้าของฉันได้จริง

— Tobias Stangl

คุณบันทึกวันของฉันขอบคุณ !!!

— Nicolas

0

คำตอบที่ยอมรับนั้นถูกต้อง แต่มันไม่ได้ผลสำหรับฉัน ฉันต้องลบไฟล์ package.lock เปิดใช้งานใหม่ "ติดตั้ง npm" แล้วปิดและเปิดสตูดิโอภาพของฉันอีกครั้ง หวังว่านี่จะช่วยใครซักคน

— Feargal Kavanagh
แหล่งที่มา

0

เพียงแค่การปรับปรุง @ เชิงมุม / สาระสำคัญจาก7ที่จะ9 ,

npm ถอนการติดตั้ง @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 - บันทึก

ปรับปรุง @ เชิงมุม / วัสดุ

เพียงแค่รอและดูว่า Angular กำลังทำการโยกย้ายเพียงอย่างเดียว

หวังว่าจะช่วยให้ใครบางคน :)

— นิโคลัส
แหล่งที่มา

-5

ทำnpm i -g @angular/material --saveเพื่อแก้ปัญหา

— Narendra Sagadevan
แหล่งที่มา

พิจารณาเพิ่มรายละเอียดเพิ่มเติมและการใช้รหัสที่จัดรูปแบบ

— MehrdadEP