Primero intente degradar su versión angular usando "ng add @angular/material7.3..0" después de eso, verifique si el error desapareció en mi caso, luego desapareció, use esta actualización ng @angular/material en caso de que esté usando angular 9 o 10 tienes que escribir un código como este importar {MatInputModule} desde 'angular/material/input' Espero que funcione para ti

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

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

Simplemente actualice @angular/material de 7 a 9 ,

npm desinstalar @angular/material --save

npm instalar @angular/material@^7.1.0 --guardar

ng actualizar @angular/material

Solo espera y verás a Angular haciendo la migración solo,

Espero que ayude a alguien :)

También estaba enfrentando el mismo problema con la última versión de @angular/material, es decir, "^ 9.2.3", así que encontré una solución para esto. Si va a la carpeta de @angular/material dentro de node_modules, puede encontrar un archivo con el nombre index.d.ts, en ese archivo pegue el siguiente código. Con este cambio en el archivo de índice, podrá importar los módulos usando instrucciones de importación desde @angular/material directamente. (PD: si encuentra un error en cualquiera de las declaraciones a continuación, comente eso).

 export * from '@angular/material/core'; export * from '@angular/material/icon'; export * from '@angular/material/autocomplete'; export * from '@angular/material/badge'; export * from '@angular/material/bottom-sheet'; export * from '@angular/material/button'; export * from '@angular/material/button-toggle'; export * from '@angular/material/card'; export * from '@angular/material/checkbox'; export * from '@angular/material/chips'; export * from '@angular/material/stepper'; export * from '@angular/material/datepicker' export * from '@angular/material/dialog'; export * from '@angular/material/divider'; export * from '@angular/material/esm2015'; export * from '@angular/material/form-field'; export * from '@angular/material/esm5'; export * from '@angular/material/expansion'; export * from '@angular/material/grid-list'; export * from '@angular/material/icon'; export * from '@angular/material/input'; export * from '@angular/material/list'; export * from '@angular/material/menu'; export * from '@angular/material/paginator'; export * from '@angular/material/progress-bar'; export * from '@angular/material/progress-spinner'; export * from '@angular/material/radio'; export * from '@angular/material/stepper'; export * from '@angular/material/select'; export * from '@angular/material/sidenav'; export * from '@angular/material/slider'; export * from '@angular/material/slide-toggle'; export * from '@angular/material/snack-bar'; export * from '@angular/material/sort'; export * from '@angular/material/table'; export * from '@angular/material/tabs'; export * from '@angular/material/toolbar'; export * from '@angular/material/tooltip'; export * from '@angular/material/tree';

@angular/material ha cambiado su estructura de carpetas. Ahora necesita usar todos los módulos de sus respectivas carpetas en lugar de solo la carpeta de material

Por ejemplo:

 import { MatDialogModule } from "@angular/material";

ahora ha cambiado a

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

Puede verificar lo siguiente para encontrar la ruta correcta para su módulo

https://material.angular.io/components/categories

Simplemente navegue a la pestaña API del módulo requerido y encuentre la ruta correcta como esta

Haz npm i -g @angular/material --save para resolver el problema

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

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

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

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

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

debe agregar una ruta de componente específica como

 import {} from '@angular/material';

import {} from '@angular/material/input';

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 materiales (no es el más eficiente, pero es ú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. Nuevamente, no estoy seguro de por qué hicieron este cambio, pero supongo que tiene que ver con la eficiencia de sacudir á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 han mencionado otras publicaciones de blog y según mi experiencia personal, tenga cuidado al usar un módulo compartido como el que se muestra a continuación. Tengo 5 ~ módulos de funciones diferentes (cargado de forma diferida) en mi aplicación en la 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 funciones. Esto redujo bastante el tamaño de mi paquete, casi una reducción de 200kb. Supuse que el proceso de optimización de compilación eliminaría correctamente cualquier componente que mis módulos no usaran, 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<MaterialModule> { return { ngModule: MaterialModule, providers: [MatIconRegistry] }; } }

actualización: verifique la respuesta de Jeff Gilliland a continuación para obtener una solución actualizada

Parece que este hilo dice que 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 : puedo confirmar, este fue el problema. Después de degradar @angular/material@9.0... a @angular/material@7.3.2 pudimos resolver esto temporalmente. Supongo que necesitamos actualizar el proyecto para una solución a largo plazo.

❌ NO:

 // old code that breaks import { MatDialogModule, MatInputModule, MatButtonModule} from '@angular/material';

✅ HACER:

 // new code that works import { MatDialogModule } from '@angular/material/dialog'; import { MatInputModule } from '@angular/material/input'; import { MatButtonModule } from '@angular/material/button';

ℹ Porque:

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

Este problema aún persiste para que Angular 11 agregue comandos

 import { MatToolbarModule } from '@angular/material/toolbar'; import { MatIconModule } from '@angular/material/icon'; import { MatCardModule } from '@angular/material/card'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatButtonModule } from '@angular/material/button';

Resuelto por ahora. Pero los accesos directos para ng add @angular material deberían estar disponibles a través de Angular CLI

Me enfrenté al mismo problema con la versión angular 11. La degradación de la versión angular/material funciona