@ angular / material / index.d.ts 'bir modül değil

Açısal 8 ile, uygulamayı oluştururken aşağıdaki hatayla karşılaşıyoruz:

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.

Açısal 9'a geçtikten sonra (bugün yayınlandı), bu konuyla da karşılaştım ve cevapta belirtilen kırılmayı değiştirdiklerini buldum . Bu değişikliği neden yapmaları için bir neden bulamıyorum.

Tüm malzeme bileşenlerini içe / dışa aktardığım bir material.module.ts dosyası var (en verimli değil, hızlı geliştirme için kullanışlı). Bir indeks.ts varil daha iyi olabilir, ancak tüm ithalatı tek tek malzeme klasörlerine güncelledim. Yine, neden bu değişikliği yaptıklarından emin değilim, ama bunun ağaç sallayan verimliliklerle ilgili olduğunu tahmin ediyorum.

Kimseye yardımcı olması durumunda aşağıdaki material.module.ts bilgilerimi dahil ettiğimde, bulduğum diğer malzeme modüllerinden ilham aldı:

NOT : Diğer blog gönderilerinin de bahsettiği ve kişisel deneyimim gibi, aşağıdaki gibi paylaşılan bir modül kullanırken dikkatli olun. Benim malzeme modül içine ithal benim app 5 ~ farklı özellik modülleri (tembel yüklü) var. Meraktan, paylaşılan modülü kullanmayı bıraktım ve bunun yerine sadece her özellik modülünün ihtiyaç duyduğu tek tek malzeme bileşenlerini içe aktardım. Bu, paket boyutumu biraz düşürdü, neredeyse 200kb'lik bir azalma. Yapı optimizasyonu işleminin modüllerim tarafından kullanılmayan herhangi bir bileşeni düzgün bir şekilde düşüreceğini varsaydım, ancak durum böyle görünmüyor ...

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

Bu ileti dizisinde bir değişiklik yapıldığı belirtildiği gibi görünüyor :

Bileşenler artık "@ açısal / malzeme" ile içe aktarılamaz. @ Açısal / malzeme / düğme gibi bağımsız ikincil giriş noktalarını kullanın.

Güncelleme : onaylayabilir, sorun buydu. Eski sürüme sonra @angular/material@9.0...için @angular/material@7.3.2biz geçici olarak bu çözebilir. Sanırım projeyi uzun vadeli bir çözüm için güncellememiz gerekiyor.

Bu, tam yol yazarak çözülebilir, örneğin MatDialogModuletakip etmek isterseniz :

@ Açısal / malzeme 9.xx öncesinde

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

@ Açısal / malzeme 9.xx

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

Resmi değişiklik günlüğü değişiklik değişikliği referansı: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Bileşenler genel dizin aracılığıyla daha fazla içe aktarılamaz (Açısal 9'dan)

gibi bir bileşen yolu eklemelisiniz

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

Ayrıca ng update @angular/materialkodunuzu güncelleyecek ve tüm içe aktarmaları düzeltecaktır

Kabul edilen cevap doğrudur, ama benim için tam olarak işe yaramadı. Package.lock dosyasını silmek, "npm install" komutunu yeniden çalıştırmak ve sonra görsel stüdyomu kapatıp yeniden açmak zorunda kaldım. Umarım bu birine yardımcı olur

Sadece güncelleme @ açısal / malzeme 7 için , 9 ,

npm kaldırma @ açısal / malzeme - kaydetme

npm yükleme @ açısal / malzeme @ ^ 7.1.0 - kaydet

ng açısal / malzeme güncellemesi

Bekleyin ve Angular'ın Göç'ü tek başına yapmasını görün,

Umarım birine yardımcı olur :)

Do npm i -g @angular/material --savesorunu çözmek için