无法导入“@angular/material”模块

Posted 2023-03-07

技术标签:

【中文标题】无法导入“@angular/material”模块【英文标题】：Not able to import "@angular/material" module 【发布时间】：2020-05-25 06:34:40 【问题描述】：

我对堆栈完全陌生，我在使用 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 材质，但它以某种方式工作，因为我在导入它时没有遇到任何错误。谢谢！

【问题讨论】：

你把npm install添加到你的项目后运行了吗？是的，我在将它添加到我的项目后也执行了该命令，但没有成功:-( 同时发布您的导入声明我已经在问题中添加了上面的导入语句。这可能是因为 @angular/material 是 v9 和 Angular v8，但不完全确定。你能确定 Angular 和 Angular Material 的版本是一样的吗？（删除 node_modules，重新安装等） 【参考方案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

【讨论】：

不错！在导入中添加了这一行： import MatFormFieldModule from '@angular/material/form-field'; 问题是文件夹两层以上时vscode不导入。这是解释这一点的线程。 github.com/microsoft/TypeScript/issues/31763【参考方案2】：

你需要更具体：

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

不只是

import MatInputModule from '@angular/material';

然后将其添加到您的导入中

【讨论】：

我也尝试过这种方法，但没有成功。我在上面的问题中提到了这种方法，请参阅问题了解更多详细信息。尝试重启 angular。不幸的是，没有运气！【参考方案3】：

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

首先需要通过命令安装angular material：

npm install --save @angular/material

然后使用以下命令在您的项目中添加角度材质：

ng add @angular/material

对我来说，它是通过这两个简单的命令开始工作的。

【讨论】：

【参考方案4】：

您是否运行了命令ng add @angular/material?？

您也可以尝试在此处浏览 angular material 文档：https://material.angular.io/guide/getting-started

另外，您是否在接受马克西米利安·施瓦茨米勒（Maximilian Schwarzmüller）的刻薄路线？如果你不是太深入，试着看看你是否错过了任何步骤（我猜是因为他的项目也使用了“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 更新打字稿

【讨论】：

我查看了文档，并确保遵循文档中提到的每个步骤，但不幸的是，我仍然收到错误消息。是的，我正在接受马克西米利安·施瓦茨米勒 (Maximilian Schwarzmüller) 的平均路线。我已经多次查看视频以确保我遵循了每一步，但不幸的是，没有任何效果。其实我也有这门课，真巧！我不确定每当编辑答案时堆栈溢出是否会给您通知，但我认为问题出在您的 app.module.ts 尝试进行您上面提到的更改，但仍然向我抛出以下错误：' node_modules/@angular/material/input/input.d.ts:138:9 - error TS1086 : 不能在环境上下文中声明访问器 ' 你试过升级打字稿吗？还可以尝试查看课程的评论部分，有时人们在那里遇到同样的问题，Max 通常会回复并帮助他们解决问题。【参考方案5】：

您的 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

那么请更新所需的依赖项

【讨论】：

【参考方案6】：

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

【讨论】：

【参考方案7】：

我遇到了与 OP 相同的问题。我无法确定原因，但我认为可能是包管理器添加了 Material 包的冲突版本。我最近切换到在 NPM 上使用 PNPM。我在运行pnpm install @angular/material 后第一次开始看到这个问题。软件包安装成功，但每当我运行服务器时，我都会遇到上面的错误，ng serve。像 OP 我尝试了所有的建议，但没有一个奏效。我什至尝试安装以前工作的特定版本的材料pnpm i @angular/material@8.2.3，但这也不起作用。

有效的是全局setting PNPM as my package manager in the Anglar CLI configurations。

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'

【讨论】：

【参考方案8】：

对我来说，它是通过从“@angular/material/input”导入 MatInputModule 来解决的。

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

【讨论】：

以上是关于无法导入“@angular/material”模块的主要内容，如果未能解决你的问题，请参考以下文章

Angular 2 Material无法加载样式

找不到模块'@angular/material-moment-adapter'

安装 Angular Material，“无法实例化模块 ngMaterial”，即使我使用的是 Angular 版本 1.3.0

错误找不到模块'@angular/material

SassError：找不到要导入的样式表。 @use '~@angular/material' 作为垫子；

@angular/material/index.d.ts' 不是模块