无法导入"@angular/material"模块

Question

我完全不了解 MEAN Stack，并且在使用 Angular 的 Material 模块时遇到了一些问题。 我正在尝试在代码中导入 "@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材料，某种方式它可以正常工作，因为我在导入时没有遇到任何错误。谢谢！

- AnonSar

---

在将它添加到你的项目后，你是否运行了 npm install 命令？ - JD Davis

是的，我将该命令添加到我的项目中后执行了它，但没有成功 :-( - AnonSar

请发布您的导入语句。 - Phix

我已经在问题上方添加了导入语句。 - AnonSar

可能是由于@angular/material是v9而Angular是v8，但不完全确定。您能确保Angular和Angular Material的版本相同吗？（删除node_modules，重新安装等） - Phix

尝试删除 node_modules 并重新安装，但仍然无法成功。 - AnonSar

Answer 1

创建一个新的module.ts文件。例如，您可以创建material.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 { }

在 app.module.ts 文件中导入此模块

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

- Arun

---

不错！已将该行添加到导入中：import { MatFormFieldModule } from '@angular/material/form-field'; - Valtoni Boaventura

问题在于当文件夹深度为两层或更多时，vscode无法导入。这里是解释该问题的线程：https://github.com/microsoft/TypeScript/issues/31763 - Natdrip

Answer 2

您需要更具体:

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

不只是

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

然后将它添加到你的导入中

- Syed Afzal

---

我也尝试了那种方法，但没有成功。我在我的问题中提到了这种方法，请参考问题以获取更多细节。 - AnonSar

尝试重新启动Angular。 - Syed Afzal

不幸的是，没有运气！ - AnonSar

Answer 3

当我第一次使用Angular Material时，我也遇到了同样的问题，不知道安装过程。

首先，你需要通过命令来安装Angular Material：

npm install --save @angular/material

然后使用以下命令在您的项目中添加Angular Material：

ng add @angular/material

对我来说，这两个简单的命令开始发挥作用。

- Neha Prajapati

Answer 4

首先确保你使用ng add @angular/material导入了材料，然后只需右键单击项目，从磁盘重新加载，错误就会消失。

- Khaoula Arfaoui

Answer 5

由于Angular/material版本高于8.0.0，因此您需要更加具体。如果您打开node_modules/@angular文件夹并进入material文件夹，组件将按文件夹组织，并且要使用它，请在material/后面写入组件名称。

注意：如果您没有找到material文件夹，则应首先安装@angular/material包：

npm install --save @angular/material

要使用版本高于8的Input material，请在material/后面写入组件名称，例如：

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

如果Angular/material版本小于或等于8.0.0，则导入格式如下：

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

- Eng_Farghly

Answer 6

看起来你的package.json中有很多版本不匹配。

你可以尝试运行ng update命令，然后会看到类似以下的内容：

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

请更新所需的依赖项。

- vishnu s pillai

Answer 7

你运行了ng add @angular/material命令吗？

你也可以尝试查看Angular Material文档，链接在这里：https://material.angular.io/guide/getting-started

另外，你是在跟Maximilian Schwarzmüller学习MEAN课程吗？如果没有学到很深入的地方，可以看看是否漏掉了任何步骤（我猜这个项目也使用了“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。

- flyingCode

---

我查看了文档，并确保按照文档中提到的每个步骤进行操作，但不幸的是，我仍然遇到了错误。是的，我正在学习 Maximilian Schwarzmüller 的平均课程。我已经多次回顾了视频，以确保我按照每个步骤进行操作，但不幸的是，没有任何作用。 - AnonSar

我也有那门课程，真巧！我不确定 Stack Overflow 是否会在答案被编辑时通知你，但我认为问题可能在你的 app.module.ts 文件中。 - flyingCode

尝试根据您上述提到的更改进行调整，但仍然会抛出以下错误：“node_modules/@angular/material/input/input.d.ts:138:9 - 错误TS1086：无法在环境上下文中声明访问器”。 - AnonSar

你尝试过升级TypeScript吗？还可以试着查看一下课程的评论区，有时候其他人也会遇到相同的问题，然后Max通常会回复并帮助他们解决。 - flyingCode

Answer 8

对我来说，解决方法是从'@angular/material/input'导入MatInputModule。

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

- Kapil Das

Answer 9

我遇到的问题与 OP 相同，我无法确定原因，但我认为可能是包管理器添加了 Material 包的冲突版本。最近我切换到使用 PNPM 而不是 NPM。在运行 pnpm install @angular/material 后，我开始看到这个问题。该包安装成功，但每当我运行服务器 ng serve 时，我都会遇到 OP 上述的错误。

像 OP 一样，我尝试了所有建议，但都没有起作用。我甚至尝试安装先前工作的特定版本的 Material，但那也不起作用。

有效的解决方法是在 Anglar CLI 配置中全局设置 PNPM 作为我的包管理器。（设置 PNPM 作为 Angular 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

接下来，我创建了一个新项目，并使用ng add @angular/material安装了Material包。这花费了一些时间，但是所有东西都成功安装了。 在这两种情况下，PNMP被用来代替NPM。 我还能够使用旧语法导入Material模块。

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

- HelloWorldPeace