'mat-form-field' 不是已知元素 - Angular 5 & Material2答案

【问题标题】：'mat-form-field' is not a known element - Angular 5 & Material2'mat-form-field' 不是已知元素 - Angular 5 & Material2
【发布时间】：2018-06-14 11:27:02
【问题描述】：

我正在尝试在使用 Material2 的 Angular 项目中使用 <mat-form-field>，但我碰壁了。

得到下面的错误信息。

Uncaught Error: Template parse errors:
'mat-form-field' is not a known element:
1. If 'mat-form-field' is an Angular component, then verify that it is part of this module.
2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-form-field>
  <input matInput placeholder="Simple placeholder" required>
</mat-form-field>"): ng:///MaterialModule/SearchComponent.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24660)
    at JitCompiler._parseTemplate (compiler.js:34471)
    at JitCompiler._compileTemplate (compiler.js:34446)
    at eval (compiler.js:34347)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:34347)
    at eval (compiler.js:34217)
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34216)

这是我的代码。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormGroup, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { YahooService } from './yahoo.service';
import { SearchComponent } from './search/search.component';

@NgModule({
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule {};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpModule,
    HttpClientModule,
  ],
  providers: [
    YahooService,
  ],
  bootstrap: [
    AppComponent,
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA,
  ],
})
export class AppModule { }

search.component.html

<mat-form-field>
   <input matInput placeholder="Simple placeholder" required>
</mat-form-field>

search.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {

  options: FormGroup;

  constructor(fb: FormBuilder) {
    this.options = fb.group({
      floatLabel: 'never',
    });
  }

  ngOnInit() {
  }

}

package.json

{
  "name": "forecast",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/schematics": "0.0.40",
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/router": "^5.1.3",
    "axios": "^0.17.1",
    "body-parser": "^1.18.2",
    "core-js": "^2.5.3",
    "express": "^4.16.2",
    "node-sass": "^4.7.2",
    "nodemon": "^1.14.7",
    "q": "^1.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "^5.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.4.0"
  }
}

【问题讨论】：

标签： angular typescript angular-material2

【解决方案1】：

你只是在你的 NgModule 中导出它，你也需要导入它

@NgModule({
  imports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
 ]
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})export class MaterialModule {};

更好

const modules = [
        MatButtonModule,
        MatFormFieldModule,
        MatInputModule,
        MatRippleModule
];

@NgModule({
  imports: [...modules],
  exports: [...modules]
  ,
})export class MaterialModule {};

更新

在导入所有 Angular 依赖项之前，您要根据 Angular Material 声明组件（SearchComponent）

点赞BrowserAnimationsModule

尝试将其移至 MaterialModule 或之前

【讨论】：

但是，据我所知，在exports 中列出一个模块确实会自动将其导入到模块中，以避免重复代码
@ArmenVardanyan 从例如导出模块 A 使其可用于导入模块 A 的其他模块，但不能用于模块 A 本身 - 它也需要导入它。
@iancovici 如果我尝试设置const modules 数组，我得到一个错误“找不到（模块名称）”你如何使用它？
仅供那些好奇的人参考，代码中的三个点 (...) 要么是剩余参数，要么是扩展运算符。在这种情况下，它是一个“扩展运算符”并将一个数组扩展为一个列表。

【解决方案2】：

您尝试在SearchComponent 中使用MatFormFieldComponent，但您没有导入MatFormFieldModule（导出MatFormFieldComponent）；你只导出它。

您的MaterialModule 需要导入它。

@NgModule({
  imports: [
    MatFormFieldModule,
  ],
  exports: [
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatRippleModule,
  ],
  declarations: [
    SearchComponent,
  ],
})
export class MaterialModule { }

【讨论】：

【解决方案3】：

使用“mat-form-field”时，还需要导入 MatInputModule

import { 
    MatToolbarModule, 
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule ,
    MatStepperModule,
    MatInputModule
} from '@angular/material';

【讨论】：

【解决方案4】：

问题出在 MatInputModule 中：

exports: [
    MatInputModule
  ]

【讨论】：

【解决方案5】：

我也有这个问题。原来我忘了在 app.module.ts 中包含一个组件

【讨论】：

^ 这个。在我的例子中，一个对话框组件抛出了错误（我手动创建了对话框组件）。从 app.module.ts （在我的例子中）导入并添加了声明数组中的对话框组件，问题就解决了
类似的事情发生在我身上，但在我的情况下，我将一个模块拆分为两个模块，并忘记删除一些代码，这些代码正在启动一个带有不属于模块的组件的模式，刚刚删除该代码现在可以使用。这帮助我意识到了这个错误，谢谢。

【解决方案6】：

在您的 Angular 应用程序中使用 MatAutocompleteModule 时，您还需要在 app.module.ts 中导入 Input Module

请在下方导入：

从“@angular/material”导入 { MatInputModule }；

【讨论】：

【解决方案7】：

确保您已添加 import {MatInputModule} from '@angular/material/input'; 作为导入语句。

【讨论】：

【解决方案8】：

@NgModule({
  declarations: [
    SearchComponent
  ],
  exports: [
    CommonModule,
    MatInputModule,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatDialogModule,
  ]
})
export class MaterialModule { }

另外，不要忘记在AppModule 的导入数组中导入MaterialModule。

【讨论】：

【解决方案9】：

检查我们要导入的命名空间

import { MatDialogModule } from **"@angular/material/dialog";**
import { MatCardModule } from **"@angular/material/card";**
import { MatButtonModule } from **"@angular/material/button";**

【讨论】：