web-dev-qa-db-fra.com

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

Je suis totalement nouveau pour dire pile et je suis confronté à des problèmes avec le module matériel d'Angular. J'essaye d'importer le module "@ angular/material" dans mon code mais j'obtiens une erreur chaque fois que je l'importe. L'erreur est la suivante:

ERROR in src/app/app.module.ts:5:32 - error TS2306: File '/Users/anmolsarraf/Desktop/MEAN Stack/mean-course/node_modules/@angular/material/index
.d.ts' is not a module.

Voici mon fichier package.json:

   {
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animation": "^4.0.0-beta.8",
    "@angular/animations": "~8.2.7",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~8.2.7",
    "@angular/compiler": "~8.2.7",
    "@angular/core": "~8.2.7",
    "@angular/forms": "~8.2.7",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~8.2.7",
    "@angular/platform-browser-dynamic": "~8.2.7",
    "@angular/router": "~8.2.7",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.5",
    "@angular/cli": "~8.3.5",
    "@angular/compiler-cli": "~8.2.7",
    "@angular/language-service": "~8.2.7",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "TypeScript": "~3.5.3"
  }
}

Voici mon fichier app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';

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

Pour être exact, j'essaye de faire import { MatInputModule } from '@angular/material'; et j'obtiens l'erreur mentionnée ci-dessus.

J'ai essayé d'importer le module ci-dessus sous import { MatInputModule } from '@angular/material/input'; mais ensuite il jette un tas d'erreurs en disant node_modules/@angular/material/input/input.d.ts:138:9 - error TS1086: An accessor cannot be declared in an ambient context.

Toute aide serait très appréciée. Merci!

MISE À JOUR

J'ai créé une nouvelle instance d'une application Angular), puis j'ai essayé d'importer angular matériel qu'il contient, cela a fonctionné car je n'obtiens aucune erreur lors de l'importation Merci!

javascriptnode.jsangularangular-materialmean-stack
5
AnonSar

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

Vous pouvez également essayer de consulter la documentation angular material docs ici: https://material.angular.io/guide/getting-started

Suivez-vous également 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 parce 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 mettre à jour TypeScript à l'aide de npm install -g TypeScript@latest ou npm update

0
flyingCode

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/[email protected] mais cela n'a pas fonctionné non plus.

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

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

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.

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