@ angular / material / index.d.ts 'nie jest modułem

W Angular 8 podczas tworzenia aplikacji napotykamy następujący błąd:

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.

Po aktualizacji do Angulara 9 (wydanego dzisiaj) również natknąłem się na ten problem i stwierdziłem, że dokonali przełomowej zmiany wspomnianej w odpowiedzi . Nie mogę znaleźć powodu, dla którego dokonali tej zmiany.

Mam plik material.module.ts, który importuję / eksportuję wszystkie komponenty materiału (nie jest to najbardziej wydajny, ale przydatny do szybkiego programowania). Przejrzałem i zaktualizowałem cały mój import do poszczególnych folderów materiałowych, chociaż baryłka index.ts może być lepsza. Ponownie, nie jestem pewien, dlaczego wprowadzili tę zmianę, ale domyślam się, że ma to związek z wydajnością wstrząsania drzewem.

W tym mój material.module.ts poniżej, na wypadek, gdyby komukolwiek to pomogło, zainspirowany innymi modułami materiałów, które znalazłem:

UWAGA : Jak wspomniano w innych postach na blogu i z własnego doświadczenia, zachowaj ostrożność, korzystając z udostępnionego modułu, takiego jak poniżej. Mam w swojej aplikacji 5 ~ różnych modułów funkcji (leniwie załadowanych), do których zaimportowałem moduł materiałów. Z ciekawości przestałem używać modułu współdzielonego i zamiast tego zaimportowałem tylko poszczególne komponenty materiałowe, których każdy moduł funkcji potrzebował. To nieco zmniejszyło mój pakiet, prawie 200 KB. Zakładałem, że proces optymalizacji kompilacji poprawnie upuści każdy komponent nieużywany przez moje moduły, ale wydaje się, że tak nie jest ...

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

Wygląda na to, że ten wątek mówi, że wydano przełomową zmianę:

Komponentów nie można już importować przez „@ kątowy / materiał”. Użyj poszczególnych pomocniczych punktów wejścia, takich jak @ kątowy / materiał / przycisk.

Aktualizacja : może potwierdzić, to był problem. Po obniżamy @angular/material@9.0...do @angular/material@7.3.2moglibyśmy rozwiązać ten tymczasowo. Chyba musimy zaktualizować projekt, aby uzyskać długoterminowe rozwiązanie.

Można to rozwiązać, pisząc pełną ścieżkę, na przykład jeśli chcesz dołączyć MatDialogModulenastępujące:

Przed @ kątowe / materiał 9.xx

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

Zgodnie z @ kątowe / materiał 9.xx

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

Oficjalny dziennik zmian w podziale zmian: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Komponentów nie można dalej importować (z Angular 9) poprzez katalog ogólny

powinieneś dodać określoną ścieżkę komponentu jak

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

A także ng update @angular/materialzaktualizuje kod i naprawi wszystkie importowane

Zaakceptowana odpowiedź jest poprawna, ale nie działała w pełni dla mnie. Musiałem usunąć plik package.lock, ponownie uruchomić „npm install”, a następnie zamknąć i ponownie otworzyć moje studio wizualne. Mam nadzieję, że to komuś pomoże

Po prostu zaktualizuj @ kątowy / materiał z 7 do 9 ,

npm uninstall @ angular / material --save

npm install @ angular / material @ ^ 7.1.0 --save

aktualizacja @ kątowa / materiał

Poczekaj i zobacz, jak Angular sam dokonuje migracji,

Mam nadzieję, że to komuś pomoże :)

Czy npm i -g @angular/material --saverozwiązać problem