@ angle / material / index.d.ts 'ist kein Modul

Bei Angular 8 tritt beim Erstellen der App der folgende Fehler auf:

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.

Nach dem Upgrade auf Angular 9 (heute veröffentlicht) bin ich ebenfalls auf dieses Problem gestoßen und habe festgestellt, dass die in der Antwort erwähnte Änderung vorgenommen wurde . Ich kann keinen Grund finden, warum sie diese Änderung vorgenommen haben.

Ich habe eine material.module.ts-Datei, in die ich alle Materialkomponenten importiere / exportiere (nicht die effizienteste, aber nützlich für eine schnelle Entwicklung). Ich habe alle meine Importe in die einzelnen Materialordner aktualisiert, obwohl ein index.ts-Fass möglicherweise besser ist. Ich bin mir wieder nicht sicher, warum sie diese Änderung vorgenommen haben, aber ich vermute, dass dies mit der Effizienz des Baumschüttelns zu tun hat.

Einschließlich meiner material.module.ts unten, falls es jemandem hilft, ist es von anderen Materialmodulen inspiriert, die ich gefunden habe:

HINWEIS : Seien Sie vorsichtig, wenn Sie ein freigegebenes Modul wie das folgende verwenden. Ich habe 5 ~ verschiedene Funktionsmodule (faul geladen) in meiner App, in die ich mein Materialmodul importiert habe. Aus Neugier habe ich die Verwendung des gemeinsam genutzten Moduls eingestellt und stattdessen nur die einzelnen Materialkomponenten importiert, die jedes Feature-Modul benötigt. Dies hat meine Bundle-Größe ziemlich reduziert, fast 200 KB. Ich ging davon aus, dass der Build-Optimierungsprozess alle Komponenten, die nicht von meinen Modulen verwendet werden, ordnungsgemäß löschen würde, aber dies scheint nicht der Fall zu sein ...

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

Scheint so, als ob dieser Thread besagt, dass eine brechende Änderung ausgegeben wurde:

Komponenten können nicht mehr über "@ angle / material" importiert werden. Verwenden Sie die einzelnen sekundären Einstiegspunkte, z. B. @ angle / material / button.

Update : kann bestätigen, dass dies das Problem war. Nach dem Downgrade @angular/[email protected]...auf @angular/[email protected]konnten wir dies vorübergehend lösen. Ich denke, wir müssen das Projekt aktualisieren, um eine langfristige Lösung zu finden.

Dies kann gelöst werden, indem Sie den vollständigen Pfad schreiben, z. B. wenn Sie Folgendes einschließen möchten MatDialogModule:

Vor @ eckig / material 9.xx.

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

Gemäß @ Winkel / Material 9.xx.

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

Offizielle Referenz zum Änderungsprotokoll: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Komponenten können nicht weiter (aus Winkel 9) über das allgemeine Verzeichnis importiert werden

Sie sollten einen angegebenen Komponentenpfad wie hinzufügen

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

Außerdem ng update @angular/materialwird Ihr Code aktualisiert und alle Importe korrigiert

Akzeptierte Antwort ist korrekt, hat aber bei mir nicht vollständig funktioniert. Ich musste die Datei package.lock löschen, "npm install" erneut ausführen und dann mein Visual Studio schließen und erneut öffnen. Hoffe das hilft jemandem

Aktualisieren Sie einfach @ angle / material von 7 auf 9 ,

npm uninstall @ angle / material --save

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

ng update @ angle / material

Warten Sie ab und sehen Sie, wie Angular die Migration alleine durchführt.

Hoffe es hilft jemandem :)

Tun Sie npm i -g @angular/material --save, um das Problem zu lösen