web-dev-qa-db-ja.com

「@ angular / material」モジュールをインポートできません

私はスタックを意味するのはまったく新しいですが、Angularのマテリアルモジュールでいくつかの問題に直面しています。 "@ angular/material"モジュールをコードにインポートしようとしていますが、インポートするとエラーが発生します。エラーは次のとおりです。

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.

これが私の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"
  }
}

これが私の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 { }

正確には、import { MatInputModule } from '@angular/material';を実行しようとしていて、上記のエラーが発生します。

上記のモジュールをimport { MatInputModule } from '@angular/material/input';としてインポートしようとしましたが、node_modules/@angular/material/input/input.d.ts:138:9 - error TS1086: An accessor cannot be declared in an ambient context.と言う一連のエラーがスローされます

任意の助けをいただければ幸いです。ありがとう！

[〜＃〜]更新[〜＃〜]

Angularアプリの新しいインスタンスを作成してから、その中にangularマテリアルをインポートしようとしましたが、インポート中にエラーが発生しなかったため、なんとか機能しましたありがとう。

javascriptnode.jsangularangular-materialmean-stack
5
AnonSar

コマンドng add @angular/material?を実行しましたか？

angularマテリアルドキュメントはこちら： https://material.angular.io/guide/getting-started

また、あなたはマクシミリアン・シュヴァルツミュラーによる平均的なコースを取っていますか？あまり遠くない場合は、手順を逃していないか確認してみてください（彼のプロジェクトでも「mean-course」という名前が使用されているので、私は推測しています）。

編集：インポートモジュールで、import { MatInputModule } from '@angular/material/input';という行を挿入しましたが、インポート配列に追加するのを忘れていました:)

これを次のように変更します。


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

編集2：それでも機能しない場合は、次のコマンドを実行してみてください：ng update --next @angular/cli --forceまたはnpm install -g TypeScript@latestまたはnpm updateを使用してTypeScriptを更新

0
flyingCode

OPと同じ問題がありました。原因を正確に特定することはできませんでしたが、パッケージマネージャーがMaterialパッケージの競合するバージョンを追加する際の問題であったと思います。最近、NPMではなくPNPMを使用するように切り替えました。 _pnpm install @angular/material_を実行した後、私は最初にこの問題を見始めました。パッケージは正常にインストールされましたが、サーバー_ng serve_を実行すると、OPで上記のエラーが発生しました。 OPと同様に、すべての提案を試しましたが、どれもうまくいきませんでした。以前は機能していた_pnpm i @angular/[email protected]_の特定のバージョンのマテリアルをインストールしてみましたが、どちらも機能しませんでした。

うまくいったのはグローバルでした Anglar CLI構成でPNPMを私のパッケージマネージャーとして設定 。

_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
_

その後、新しいプロジェクトを作成し、_ng add @angular/material_を使用してMaterialパッケージをインストールしました。しばらくかかりましたが、すべて正常にインストールされました。どちらの場合も、NPMの代わりにPNMPが使用されました。古い構文を使用してMaterialモジュールをインポートすることもできました。

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