我试图<mat-form-field>
在使用Material2的Angular项目中使用,但是碰到了墙。
在下面获取错误消息。
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"
}
}
exports
确实会自动将其导入模块中,以避免重复代码