找不到模块“@angular/material”

Question

我正在使用 Angular 2。当我尝试导入“@angular/material”时，我遇到了错误。我正在导入如下包：

import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";

我的 tsconfig.json 文件如：

{
 "compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
  "../node_modules/@types"
]
}
}

我的 package.json 代码：

{
 "name": "rmc-temporary",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
   "start": "ng serve",
   "lint": "tslint \"src/**/*.ts\"",
   "test": "ng test",
   "pree2e": "webdriver-manager update",
   "e2e": "protractor"
 },
 "private": true,
 "dependencies": {
 "@angular/common": "2.2.1",
 "@angular/compiler": "2.2.1",
 "@angular/core": "2.2.1",
 "@angular/forms": "2.2.1",
 "@angular/http": "2.2.1",
 "@angular/platform-browser": "2.2.1",
 "@angular/platform-browser-dynamic": "2.2.1",
 "@angular/router": "3.2.1",
 "core-js": "^2.4.1",
 "rxjs": "5.0.0-beta.12",
 "ts-helpers": "^1.1.1",
 "zone.js": "^0.6.23"
},
"devDependencies": {
 "@angular/compiler-cli": "2.2.1",
 "@types/jasmine": "2.5.38",
 "@types/node": "^6.0.42",
 "angular-cli": "1.0.0-beta.21",
 "codelyzer": "~1.0.0-beta.3",
 "jasmine-core": "2.5.2",
 "jasmine-spec-reporter": "2.5.0",
 "karma": "1.2.0",
 "karma-chrome-launcher": "^2.0.0",
 "karma-cli": "^1.0.1",
 "karma-jasmine": "^1.0.2",
 "karma-remap-istanbul": "^0.2.1",
 "protractor": "4.0.9",
 "ts-node": "1.2.1",
 "tslint": "3.13.0",
 "typescript": "~2.0.3",
 "webdriver-manager": "10.2.5"
}
}

Answer 1

改成，

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

DEMO

Answer 2

按照这些步骤开始使用 Angular 材质。

第 1 步：安装 Angular 材质

npm install --save @angular/material

第 2 步：动画

一些 Material 组件依赖于 Angular 动画模块，以便能够进行更高级的过渡。如果您希望这些动画在您的应用中工作，您必须安装 @angular/animations 模块并将 BrowserAnimationsModule 包含在您的应用中。

npm install --save @angular/animations

然后

import {BrowserAnimationsModule} from '@angular/platform browser/animations';

@NgModule({
...
  imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }

第 3 步：导入组件模块

为您要使用的每个组件导入 NgModule：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
 })
 export class PizzaPartyAppModule { }

确保在 Angular 的 BrowserModule 之后导入 Angular Material 模块，因为导入顺序对 NgModules 很重要

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MdCardModule} from '@angular/material';
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MdCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

第 4 步：包含主题

需要包含主题才能将所有核心和主题样式应用到您的应用程序。

要开始使用预构建的主题，请在应用的 index.html 中包含以下内容：

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Answer 3

这就是为我解决这个问题的方法。

我用过：

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

但在应用程序的文件夹中。

来源： https://medium.com/@ismapro/first-steps-with-angular-cli-and-angular-material-5a90406e9a4

Answer 4

请查看Angular Getting started :)

1. 安装 Angular 材质和 Angular CDK
2. 动画 - 如果需要
3. 导入组件模块

并享受{{Angular}}

Answer 5

我遵循了这里的每个建议（我使用的是 Angular 7），但没有任何效果。我的应用拒绝承认 @angular/material 存在，所以它在这一行显示错误：

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

即使我使用 --save 参数将 Angular Material 添加到我的项目中：

npm install --save @angular/material @angular/cdk

...它拒绝向我的“package.json”文件添加任何内容。

我什至尝试删除 package-lock.json 文件，因为一些文章表明这​​会导致问题，但这没有效果。

要解决此问题，我必须手动将这两行添加到我的“package.json”文件中。

{
    "devDependencies": {
        ...
        "@angular/material": "~7.2.2",
        "@angular/cdk": "~7.2.2",
        ...

我无法确定这是与使用 Angular 7 相关的问题，还是已经存在多年......

Answer 6

发现这篇文章：Angular 9 中的“重大更改”。所有模块必须单独导入。感谢@jeff-gilliland，那里还有一个很好的模块： https://stackoverflow.com/a/60111086/824622

Answer 7

import {MatButtonModule} from '@angular/material/button';

Answer 8

只需使用[ng add @angular/material][1] 和yes 即可添加动画并添加到环境中。您还可以选择 Angular 材质主题。这个单一的命令将添加所需的所有依赖项和声明。 参考Angular Material Guide Getting Started

Answer 9

• 第一步：npm install @angular/material
• 第二步：import {MatDialogModule} from "@angular/material/dialog";
• 第三步：导入应用模块后：

    @NgModule({
      imports: [
        CommonModule,
        MatDialogModule
       ]

• 第 4 步：在组件上导入：import { MatDialog} from '@angular/material/dialog';

• 第 5 步：使用弹出对话框

    showPopup(Id){
            this.matDialog.open(PopupComponent, {
                disableClose: true,
                width: "1200px",
                data: {
                  Title: "im vuong le - dev VietNam",
                  sepId:Id,
                  Message: "test-dialog,
                },
              })
                .afterClosed()
                .subscribe((result) => {
                  if (result == "Yes") {
                    
                  }
                });
        }

Answer 10

这些答案都不适合我。由于我在使用 reactjs 时有过不工作节点模块的经验，因此我删除了我的 node_modules 文件夹并再次执行npm install。然后我没有使用import { MatTableModule } from '@angular/material'，而是像这样导入模块import { MatTableModule } from '@angular/material/table'。这对我有用:-)。