@ angular / material / index.d.ts 'bukan modul

Dengan Angular 8, Saat membangun aplikasi, kami menemukan kesalahan berikut:

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.

Setelah memutakhirkan ke Angular 9 (dirilis hari ini), saya juga mengalami masalah ini dan menemukan bahwa mereka membuat perubahan yang disebutkan dalam jawaban . Saya tidak dapat menemukan alasan mengapa mereka melakukan perubahan ini.

Saya memiliki file material.module.ts yang saya impor / ekspor semua komponen material (bukan yang paling efisien, tetapi berguna untuk pengembangan cepat). Saya memeriksa dan memperbarui semua impor saya ke folder material individual, meskipun barrel index.ts mungkin lebih baik. Sekali lagi, tidak yakin mengapa mereka melakukan perubahan ini, tapi saya kira itu ada hubungannya dengan efisiensi yang mengguncang pohon.

Termasuk materi saya.module.ts di bawah ini jika itu membantu siapa pun, itu terinspirasi dari modul materi lain yang saya temukan:

CATATAN : Seperti posting blog lain yang disebutkan dan dari pengalaman pribadi saya, berhati-hatilah saat menggunakan modul bersama seperti di bawah ini. Saya memiliki 5 ~ modul fitur yang berbeda (malas dimuat) di aplikasi saya yang saya impor modul materi saya. Karena penasaran, saya berhenti menggunakan modul bersama dan sebagai gantinya hanya mengimpor masing-masing komponen material yang diperlukan setiap modul fitur. Ini mengurangi ukuran bundel saya sedikit, hampir pengurangan 200kb. Saya berasumsi bahwa proses optimisasi build akan menjatuhkan komponen apa pun yang tidak digunakan oleh modul saya, tetapi sepertinya tidak demikian ...

// 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]
        };
    }
}

Sepertinya utas ini mengatakan perubahan yang melanggar dikeluarkan:

Komponen tidak dapat lagi diimpor melalui "@ angular / material". Gunakan titik masuk sekunder individual, seperti @ angular / material / tombol.

Pembaruan : dapat mengkonfirmasi, ini masalahnya. Setelah diturunkan @angular/[email protected]...ke @angular/[email protected]kita bisa menyelesaikan ini sementara. Kira kita perlu memperbarui proyek untuk solusi jangka panjang.

Ini dapat diselesaikan dengan menulis jalur lengkap, misalnya jika Anda ingin menyertakan MatDialogModuleikuti:

Sebelum ke @ angular / material 9.xx

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

Sesuai @ sudut / bahan 9.xx

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

Referensi perubahan perubahan log resmi resmi: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Komponen tidak dapat lebih jauh (Dari Sudut 9) diimpor melalui direktori umum

Anda harus menambahkan jalur komponen tertentu seperti

import {} from '@angular/material'; 

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

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

Dan juga ng update @angular/materialakan memperbarui kode Anda dan memperbaiki semua impor

Jawaban yang diterima benar, tetapi itu tidak sepenuhnya berfungsi untuk saya. Saya harus menghapus file package.lock, jalankan kembali "npm install", dan kemudian tutup dan buka kembali studio visual saya. Semoga ini bisa membantu seseorang

Cukup perbarui @ angular / materi dari 7 hingga 9 ,

npm uninstall @ angular / material --save

npm instal @ angular / material @ ^ 7.1.0 - simpan

ng perbarui @ angular / materi

Tunggu dan lihat Angular melakukan Migrasi sendirian,

Semoga ini bisa membantu seseorang :)

Lakukan npm i -g @angular/material --saveuntuk menyelesaikan masalah