@ angular / material / index.d.ts 'non è un modulo

Con Angular 8, durante la creazione dell'app, riscontriamo il seguente errore:

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.

Dopo aver eseguito l'aggiornamento a Angular 9 (rilasciato oggi), ho riscontrato anche questo problema e ho scoperto che hanno apportato la modifica di cui alla risposta . Non riesco a trovare un motivo per cui hanno apportato questa modifica.

Ho un file material.module.ts che importare / esportare tutti i componenti del materiale (non il più efficiente, ma utile per un rapido sviluppo). Ho esaminato e aggiornato tutte le mie importazioni nelle singole cartelle dei materiali, anche se un barile index.ts potrebbe essere migliore. Ancora una volta, non sono sicuro del motivo per cui hanno apportato questa modifica, ma immagino che abbia a che fare con l'efficienza di agitazione degli alberi.

Incluso il mio material.module.ts di seguito nel caso in cui aiuti chiunque, si ispira ad altri moduli di materiale che ho trovato:

NOTA : come altri articoli del blog hanno menzionato e dalla mia esperienza personale, fai attenzione quando usi un modulo condiviso come di seguito. Ho 5 ~ diversi moduli funzione (caricati in modalità lazy) nella mia app in cui ho importato il mio modulo materiale. Per curiosità, ho smesso di usare il modulo condiviso e invece ho importato solo i singoli componenti dei materiali necessari per ogni modulo funzionale. Ciò ha ridotto un po 'le dimensioni del mio bundle, quasi una riduzione di 200kb. Ho ipotizzato che il processo di ottimizzazione della compilazione avrebbe eliminato correttamente qualsiasi componente non utilizzato dai miei moduli, ma non sembra essere il caso ...

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

Sembra che questo thread affermi che è stata emessa una modifica definitiva:

I componenti non possono più essere importati tramite "@ angular / material". Utilizzare i singoli punti di accesso secondari, come @ angular / material / button.

Aggiornamento : posso confermare, questo era il problema. Dopo il downgrade @angular/material@9.0...a @angular/material@7.3.2potremmo risolverlo temporaneamente. Suppongo che dobbiamo aggiornare il progetto per una soluzione a lungo termine.

Questo può essere risolto scrivendo il percorso completo, ad esempio se si desidera includere MatDialogModule :

Prima di @ angular / material 9.xx

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

Secondo @ angolare / materiale 9.xx

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

Riferimento modifica modifica registro ufficiale modifiche: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

I componenti non possono essere ulteriormente importati (da Angular 9) attraverso la directory generale

dovresti aggiungere un percorso componente specificato come

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

E ng update @angular/materialaggiornerà anche il tuo codice e risolverà tutte le importazioni

La risposta accettata è corretta, ma non ha funzionato completamente per me. Ho dovuto eliminare il file package.lock, rieseguire "npm install", quindi chiudere e riaprire Visual Studio. Spero che questo aiuti qualcuno

Basta aggiornare @ angolare / materiale da 7 a 9 ,

npm uninstall @ angular / material --save

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

aggiornamento @ angolare / materiale

Aspetta e vedi Angular fare la migrazione da solo,

Spero che aiuti qualcuno :)

Fare npm i -g @angular/material --saveper risolvere il problema