"mat-form-field"不是一个已知的元素 - Angular 5和Material2

Question

我正在尝试在使用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"
  }
}

- user6885115

Answer 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中或移至先前位置。

- Iancovici

---

但据我所知，在exports中列出一个模块会自动将其导入到该模块中，以避免重复代码。 - Armen Vardanyan

从例如模块A导出使其可用于导入模块A但不导入模块A本身的其他模块 - 它也需要导入它。 - Kirk Larkin

@iancovici 如果我尝试设置const modules数组，会出现错误“找不到（模块名称）”。你如何使用它？ - Steve

对于那些好奇的人，代码中的三个点（...）可以是rest参数或展开运算符。在这种情况下，它是一个“展开运算符”，将数组扩展为列表。 - konyak

为什么使用[...modules]的第二个示例更好？ - Oushima

Answer 2

您尝试在SearchComponent中使用MatFormFieldComponent，但是您没有导入MatFormFieldModule（该模块导出MatFormFieldComponent），而只是将其导出。 您的MaterialModule需要导入它。

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

- Lazar Ljubenović

Answer 3

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

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

- Prasanth Nath

Answer 4

我也遇到了这个问题。原来是我忘记在 app.module.ts 中包含其中一个组件。

- Mars Z

---

这个问题。在我的情况下，一个对话框组件抛出了错误（我手动创建了对话框组件）。从app.module.ts中导入并将对话框组件添加到声明数组中（在我的情况下），问题得到解决。 - Johnny Andrew

类似的事情也发生在我身上，但是我的情况是将一个模块分成了两个模块，然后忘记删除一些启动模态框的代码，该组件并不属于该模块，只需删除该代码即可解决问题。这帮助我意识到了错误，谢谢。 - Jorge Rivera

谢谢，这个救了我！在我的情况下，我在同一个文件中创建了2个组件，但只在app.module中导入了1个。 - Harshit Gangwar

Answer 5

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

- Badri Paudel

Answer 6

问题出在MatInputModule模块中：

exports: [
    MatInputModule
  ]

- Leo Lanese

Answer 7

检查我们正在导入的命名空间

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

导入模块路径后，在导入数组中导入组件名称

  imports: [
      MatDialogModule,
      MatCardModule,
      MatButtonModule
]

- Alexander Zaldostanov

Answer 8

在您的Angular应用程序中使用MatAutocompleteModule时，您需要在app.module.ts中导入InputModule模块。

请导入以下内容：

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

“Original Answer”翻译成中文为“最初的回答”。

- Santhosh Raj Mudulakar

Answer 9

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

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

- Monu Chaudhary

Answer 10

我也遇到了类似的问题。我的问题是因为我只从目录中删除了一个组件，而在app.module的声明中仍然有该组件的名称。当我也从app.module中删除了该组件时，我的问题立即得到解决。希望能帮助其他人。

- Taha Körkem