@ angular / material / index.d.ts 'no es un módulo

Con Angular 8, al construir la aplicación, encontramos el siguiente error:

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.

Después de actualizar a Angular 9 (lanzado hoy), también me encontré con este problema y descubrí que hicieron el cambio importante mencionado en la respuesta . No puedo encontrar una razón por la que hicieron este cambio.

Tengo un archivo material.module.ts que importo / exporto todos los componentes de material (no el más eficiente, pero útil para un desarrollo rápido). Revisé y actualicé todas mis importaciones a las carpetas de materiales individuales, aunque un barril index.ts podría ser mejor. Una vez más, no estoy seguro de por qué hicieron este cambio, pero supongo que tiene que ver con la eficiencia de sacudidas de árboles.

Incluyendo mi material.module.ts a continuación en caso de que ayude a alguien, está inspirado en otros módulos de material que he encontrado:

NOTA : Como otras publicaciones de blog han mencionado y desde mi experiencia personal, tenga cuidado al usar un módulo compartido como se muestra a continuación. Tengo 5 ~ módulos de características diferentes (carga diferida) en mi aplicación en los que importé mi módulo de material. Por curiosidad, dejé de usar el módulo compartido y en su lugar solo importé los componentes de material individuales que necesitaba cada módulo de características. Esto redujo un poco el tamaño de mi paquete, casi una reducción de 200 kb. Supuse que el proceso de optimización de compilación eliminaría correctamente cualquier componente que mis módulos no usen, pero no parece ser el 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]
        };
    }
}

Parece como dice este hilo se emitió un cambio importante:

Los componentes ya no se pueden importar a través de "@ angular / material". Utilice los puntos de entrada secundarios individuales, como @ angular / material / button.

Actualización : puede confirmar, este fue el problema. Después de degradar @angular/[email protected]...a @angular/[email protected]podríamos resolver esto temporalmente. Supongo que necesitamos actualizar el proyecto para una solución a largo plazo.

Esto se puede resolver escribiendo la ruta completa, por ejemplo, si desea incluir MatDialogModule siguiente:

Antes de @ angular / material 9.xx

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

Según @ angular / material 9.xx

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

Referencia oficial de cambio de registro de cambios: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Los componentes no pueden importarse más (desde Angular 9) a través del directorio general

debe agregar una ruta de componente especificada como

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

Y también ng update @angular/materialactualizará su código y arreglará todas las importaciones

La respuesta aceptada es correcta, pero no funcionó completamente para mí. Tuve que eliminar el archivo package.lock, volver a ejecutar "npm install", y luego cerrar y volver a abrir mi estudio visual. Espero que esto ayude a alguien

Simplemente actualice @ angular / material de 7 a 9 ,

npm uninstall @ angular / material --save

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

ng update @ angular / material

Solo espera y ve a Angular haciendo la migración solo,

Espero que ayude a alguien :)

Hacer npm i -g @angular/material --savepara resolver el problema