Impossible d'importer le module "@ angular / material"

Avez-vous exécuté la commande ng add @angular/material? ?

Vous pouvez également essayer de parcourir la documentation sur les matériaux angulaires ici: https://material.angular.io/guide/getting-started

De plus, suivez-vous le cours moyen de Maximilian Schwarzmüller? Si vous n'êtes pas trop loin, essayez de voir si vous avez manqué des étapes (je suppose que le nom "Mean-Course" est également utilisé pour son projet :)

EDIT: Dans votre module d'import, vous mettez la ligne import { MatInputModule } from '@angular/material/input'; mais j'ai oublié de l'ajouter à votre tableau d'import :)

changez-le en ceci:

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule //new import
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit 2: si cela ne fonctionne toujours pas, essayez d'exécuter cette commande: ng update --next @angular/cli --force ou ng update --next @angular/cli --force aide de npm install -g typescript@latest ou npm update

Tu dois être plus précis:

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

pas seulement

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

puis ajoutez-le à vos importations

Créez un nouveau fichier module.ts. par exemple, vous pouvez créer material.module.ts et préparer toutes les bibliothèques de matériaux comme ci-dessous

@NgModule({
  declarations: [
    AppComponent        
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,       
    MaterialModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

importer ce modèle dans le app.module.ts

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
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 { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
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 { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
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 { 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({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule
  ],
  imports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule
  ]
})
export class MaterialModule { }

J'ai eu le même problème que l'OP. Je n'ai pas pu identifier la cause, mais je pense que cela peut avoir été un problème avec le gestionnaire de packages ajoutant des versions en conflit du package Material. Je suis récemment passé à l'utilisation de PNPM sur NPM. J'ai commencé à voir ce problème après avoir exécuté pnpm install @angular/material . Le package s'est installé avec succès mais j'ai eu les erreurs que l'OP avait ci-dessus chaque fois que j'ai exécuté le serveur, ng serve . Comme l'OP, j'ai essayé toutes les suggestions mais aucune n'a fonctionné. J'ai même essayé d'installer la version spécifique de Material qui fonctionnait auparavant pnpm i @angular/material@8.2.3 mais cela n'a pas fonctionné non plus.

Ce qui a fonctionné a été de définir globalement PNPM comme mon gestionnaire de paquets dans les configurations Anglar CLI .

import {MatCardModule, MatIconModule, MatToolbarModule} from '@angular/material'

Ensuite, j'ai créé un nouveau projet et installé le package Material en utilisant ng add @angular/material . Cela a pris un certain temps mais tout s'est installé avec succès. Dans les deux cas, PNMP a été utilisé à la place de NPM. J'ai également pu importer les modules Material en utilisant l'ancienne syntaxe.

ng config -g cli.packageManager pnpm // Set PNPM globally
ng config cli.packageManager pnpm    // Set PNPM for single project
ng config -g cli.packageManager npm  // Set NPM globally, default

Il semble qu'il y ait tellement d'incohérences de version dans votre package.json.

Pouvez-vous essayer la ng update , alors vous verrez quelque chose comme ceci:

Using package manager: 'npm'
Collecting installed dependencies...
Found 80 dependencies.
We analyzed your package.json, there are some packages to update:

  Name                                Version                  Command to update
 ---------------------------------------------------------------------------------
  @angular/cdk                        7.3.7 -> 10.1.3          ng update @angular/cdk
  @angular/cli                        8.3.25 -> 10.0.8         ng update @angular/cli
  @angular/core                       8.2.14 -> 10.0.14        ng update @angular/core
  @ngrx/store                         7.4.0 -> 10.0.0          ng update @ngrx/store
  rxjs                                6.5.4 -> 6.6.2           ng update rxjs

Ensuite, veuillez mettre à jour les dépendances requises

Assurez-vous d'abord que vous avez importé du matériel en utilisant ng add @angular/material , puis faites un clic droit sur votre projet, rechargez à partir du disque et l'erreur disparaîtra.