web-dev-qa-db-fra.com

@ angular / material / index.d.ts 'n'est pas un module

Avec Angular 8, lors de la construction de l'application, nous rencontrons l'erreur suivante:

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.
angularangular-material
29
ForestG

Semble comme ce fil dit un changement de rupture a été émis:

Les composants ne peuvent plus être importés via "@ angular/material". Utilisez les points d'entrée secondaires individuels, tels que @ angulaire/matériau/bouton.

Mise à jour : peut confirmer, c'était le problème. Après rétrogradation @angular/[email protected]... à @angular/[email protected] nous pourrions résoudre ce problème temporairement. Je suppose que nous devons mettre à jour le projet pour une solution à long terme.

27
ForestG

Après la mise à niveau vers Angular 9 (publié aujourd'hui), j'ai également rencontré ce problème et j'ai constaté qu'ils avaient apporté le changement de rupture mentionné dans la réponse . Je ne peux pas trouver une raison pour laquelle ils ont fait ce changement.

J'ai un fichier material.module.ts que j'importe/exporte tous les composants matériels (pas le plus efficace, mais utile pour un développement rapide). J'ai parcouru et mis à jour toutes mes importations dans les dossiers de matériaux individuels, bien qu'un baril index.ts pourrait être mieux. Encore une fois, je ne sais pas pourquoi ils ont apporté ce changement, mais je suppose que cela a à voir avec l'efficacité de l'agitation des arbres.

Y compris mon material.module.ts ci-dessous au cas où cela aiderait quelqu'un, il est inspiré d'autres modules matériels que j'ai trouvés:

// 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]
        };
    }
}
49
Jeff Gilliland

Cela peut être résolu en écrivant le chemin complet, par exemple si vous souhaitez inclure MatDialogModule, suivez:

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

Après:import { MatDialogModule } from "@angular/material/dialog"; //works fine

10
Khushi Raval

Les composants ne peuvent plus être importés (From Angular 9) via le répertoire général

vous devez ajouter un chemin de composant spécifié comme

import {} from '@angular/material';

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

1
Ali Ashraf

Et aussi ng update @angular/material mettra à jour votre code et corrigera toutes les importations

0
Sivuyile TG Magutywa