Respuestas:
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/material@9.0...
a @angular/material@7.3.2
podríamos resolver esto temporalmente. Supongo que necesitamos actualizar el proyecto para una solución a largo plazo.
ng update @angular/material
, migrará y actualizará todas las importaciones por ti :)
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/material
actualizará 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
Hacer npm i -g @angular/material --save
para resolver el problema