logo标签列表

找不到模块“@angular/material”。

angulartypescript
65

我正在使用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"
}
}
1
由于某些原因，您的package.json中没有@angular/material。这可能是问题所在。 - ForNeVeR
1
你在添加 @angular/material 后，在命令行中执行了 npm install 吗？ - eko
最新版本是2.0.0-alpha.11-3。"@angular/material": "2.0.0-alpha.11-3"。 - Yong
我做了这个导入：import { MatInputModule，MatPaginatorModule，MatProgressSpinnerModule，MatSortModule，MatTableModule，MaterialModule } from '@angular/material'; 我在这一行代码中遇到了错误：**'@angular/material'**。我该如何解决？ - pnet
我明白了。现在在我的项目中运行正常。我重新安装并且工作了。昨天我尝试使用以下方式进行安装：npm install @angular/material --save，但是没有成功。今天我删除了 g 并且成功了。 - pnet
显示剩余2条评论
10个回答
107

请按照以下步骤开始使用Angular Material。

步骤1：安装Angular Material

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 { }

第四步：包含主题

包含主题是将所有核心和主题样式应用于您的应用程序所必需的。

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

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
1
可能需要进行父级npm安装： $ npm i @angular/cdk - Soumav
你需要的是 material 的哪个版本？能否在 npm install 命令中提及一下？ - Mayur Kukadiya
稍作更正：import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; - Jay
14
1
完美，就像任何人所期望的那样。 - Mihir Bhatt
5
  • 步骤1：npm install @angular/material
  • 步骤2：import {MatDialogModule} from "@angular/material/dialog";
  • 步骤3：将其导入到应用程序模块后：
    @NgModule({
      imports: [
        CommonModule,
        MatDialogModule
       ]

  • 第四步：在组件中引入对话框：import { MatDialog} from '@angular/material/dialog';

  • 第五步：使用弹出式对话框

    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") {
                    
                  }
                });
        }
1
你好，欢迎来到 Stack Overflow。如 [新手指南] 所述，该网站是有用问题及其答案的库。你的回答与此答案非常相似，且并没有添加任何新价值或信息，因此不是很有用。请避免撰写重复的答案。要么编辑您的答案以添加价值，要么将其删除; 这将确保网站上的所有问题和答案都保持有用性，而不会分散/重复。 - Vimal Patel
4

改为,

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

演示

我尝试像上面的语句一样导入，但对我来说不起作用。 - Anil Jagtap
@ritesh，有什么问题吗？ - Sajeetharan
无法找到 '@angular/material'。 - user2136053
1
为什么会这样？ - Steven
1
为什么这被标记为答案，而 Angular 团队在 2016 年宣布 Material 组件尚未准备好。https://stackoverflow.com/questions/33181745/cannot-find-module-angular2-material-material 另一个链接 https://github.com/angular/angular/issues/4612 - TheKingPinMirza
我有一个解决这些问题的步骤指南。请查看：http://www.heavyweightsoftware.com/blog/how-to-use-tabs-with-angular-5/ - Thom
3

我遵循了这里的每个建议（我正在使用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有关，还是已经存在多年....

1
1
import {MatButtonModule} from '@angular/material/button';
0
只需使用[ng add @angular/material][1]，然后选择是否添加动画和添加到环境中即可。您还可以选择一个Angular Material主题。这个单一的命令将添加所有所需的依赖项和声明。 参考Angular Material指南入门
0

这些答案都不适用于我。由于我之前在使用ReactJS时遇到过无法工作的Node模块，因此我删除了我的node_modules文件夹并再次执行了npm install。然后，我使用import { MatTableModule } from '@angular/material/table'导入模块，而不是使用import { MatTableModule } from '@angular/material'。这对我有效：-）。

-3
请查看Angular入门 :)
  1. 安装Angular Material和Angular CDK
  2. 动画 - 如果需要的话
  3. 导入组件模块

享受{{Angular}}吧！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接