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


40

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.

Respuestas:


87

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


1
Lo mismo aquí gracias por la actualización
Jimmy Kane

2
Tuve el mismo problema después de actualizar angular 8 a 9. Su solución funcionó para mí. En mi opinión, debería aceptarse esta respuesta porque en realidad proporciona una solución para la versión actualizada. La degradación de la versión 9 de nuevo a 8 debido a estos errores no debe verse como la solución aceptada para el problema. ¡Gracias por compartir!
omostan

1
todo lo siguiente proviene de material / core no angular / core (supongo): import {MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE} de '@ angular / material / core';
SwissCoder

1
Buena captura, en mi apuro había puesto MatNativeDateModule en la importación incorrecta :), lo arreglé en la respuesta
Jeff Gilliland

1
@MikeGledhill como muchas cosas en desarrollo, muchas cosas son esotéricas. Deben implementar una solución que proporcione una advertencia de desaprobación o un mensaje de error más específico para que sepa cómo solucionarlo. La única otra forma en que sabría cómo solucionar esto es si tiene experiencia trabajando con Typecript & Angular, y sabe cuál es el problema probable cuando ve un error con un tipo de archivo ".d.ts". Ese conocimiento generalmente proviene de horas de frustración ... ¡debe haber una mejor manera de compartir este "conocimiento de dominio" con otros!
Jeff Gilliland

37

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.2podríamos resolver esto temporalmente. Supongo que necesitamos actualizar el proyecto para una solución a largo plazo.


1
después de hacer la rebaja, hazlo ng update @angular/material, migrará y actualizará todas las importaciones por ti :)
Nicolas hace

24

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


Este me funcionó.
Shinoy Shaji

También funcionó para mí. Gracias.
Sidhartha Shankar

8

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


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

Bienvenido @ Владимир en StackOverflow, sería realmente útil para leer si agrega código de idioma con `` `(Sin espacio, es decir,` `` javascript) y lo cierra. Para obtener más ayuda, visite stackoverflow.com/help/how-to-answer Gracias. Sigue contribuyendo
Rajan

¡Hola! Si bien este código puede resolver la pregunta, incluir una explicación de cómo y por qué esto resuelve el problema realmente ayudaría a mejorar la calidad de su publicación, y probablemente resultaría en más votos positivos. Recuerde que está respondiendo la pregunta para los lectores en el futuro, no solo la persona que pregunta ahora. Por favor, editar su respuesta para agregar explicaciones y dar una indicación de lo que se aplican limitaciones y supuestos.
Brian

Este código es muy bueno, pero sería mejor si lo explicas. Otdelna, Ya ne smog paniat.
Dr. MAF

2

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


Esto solo actualizará package.json y package-lock.json. No cambiará nada en nuestro código
Joel K Thomas

1
Acabo de actualizar de 7 a 9, en realidad solucionó mis importaciones.
Tobias Stangl

Me salvaste el día, gracias !!!
Nicolas hace

0

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


0

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 :)


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.