Saltar al contenido

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

Recabamos en diferentes foros para así brindarte la respuesta a tu duda, en caso de alguna pregunta deja tu pregunta y te contestaremos con gusto.

Solución:

Después de actualizar a Angular 9 (lanzado hoy), también encontré este problema y descubrí que hicieron el cambio radical 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 del material (no es el más eficiente, pero es útil para un desarrollo rápido). Revisé y actualicé todas mis importaciones en 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 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 se ha mencionado en otras publicaciones de blog y según mi experiencia personal, tenga cuidado al utilizar un módulo compartido como el que se muestra a continuación. Tengo 5 ~ módulos de funciones 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 funciones. Esto redujo bastante 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 no utilizado por mis módulos, 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]
        ;
    


actualización: compruebe 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.

Actualizar: puedo confirmar, este era el problema. Después de degradar @angular/[email protected] para @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 seguir:

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 de cambio de ruptura del registro de cambios oficial: https://github.com/angular/components/blob/master/CHANGELOG.md#material-9

Te mostramos las reseñas y valoraciones de los usuarios

Si haces scroll puedes encontrar las explicaciones de otros administradores, tú además puedes mostrar el tuyo si lo deseas.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *