Jawaban:
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/material@9.0...ke @angular/material@7.3.2kita bisa menyelesaikan ini sementara. Kira kita perlu memperbarui proyek untuk solusi jangka panjang.
ng update @angular/material, itu akan bermigrasi dan memperbarui semua impor untuk Anda :)
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 mentionedSesuai @ 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
Lakukan npm i -g @angular/material --saveuntuk menyelesaikan masalah