‘ mat-form-field’不是已知元素-角5 & 材料2

我正在尝试使用 <mat-form-field>在一个角度项目使用材料2，但我已经碰壁。

获取下面的错误消息。

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)

这是我的原则。

应用程序模块

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

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


}

包裹 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"
}
}
268422 次浏览
小开
最佳答案

You're only exporting it in your NgModule, you need to import it too

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

better yet

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


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

update

You're declaring component (SearchComponent) depending on Angular Material before all Angular dependency are imported

Like BrowserAnimationsModule

Try moving it to MaterialModule, or before it

小开

You're trying to use the MatFormFieldComponent in SearchComponent but you're not importing the MatFormFieldModule (which exports MatFormFieldComponent); you only export it.

Your MaterialModule needs to import it.

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

the problem is in the MatInputModule:

exports: [
MatInputModule
]
小开

When using the 'mat-form-field' MatInputModule needs to be imported also

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

When using MatAutocompleteModule in your angular application, you need to import Input Module also in app.module.ts

Please import below:

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

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

Also, do not forget to import the MaterialModule in the imports array of AppModule.

小开

Check the namespace from where we are importing

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

After importing module path, Import components name in import array

  imports: [
MatDialogModule,
MatCardModule,
MatButtonModule
]
小开

I had this problem too. It turned out I forgot to include one of the components in app.module.ts

小开

Make sure that you've added import {MatInputModule} from '@angular/material/input'; as import statement.

小开

In my case, this happened because I had copied the whole directory of a component that I had created from an old project into a new project and forgot to include my component in app.module.ts

(Hopefully this saves someone a lot of time.. as stackoverflow has done for me so many times:)

小开

I also encountered a similar problem. My problem was because I deleted a component from only directory and there was the component name in app.module's declarations. When I removed the component from app.module too, my problem was solved immediately. Hope it helps someone else.


提交答案