Question

我正在尝试使用Material2在Angular项目中使用php artisan config:clear，但我已经碰壁了。

获取以下错误消息。

<mat-form-field

这是我的代码。

app.module.ts

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)

search.component.html

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.ts

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

的package.json

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

}

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或其之前

Answer 2

您尝试使用MatFormFieldComponent中的SearchComponent，但未导入MatFormFieldModule（导出MatFormFieldComponent）;你只出口它。

您的MaterialModule需要导入它。

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

Answer 3

问题出在MatInputModule中：

exports: [
    MatInputModule
  ]

Answer 4

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

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

Answer 5

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

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

Answer 6

在角度应用程序中使用 MatAutocompleteModule 时，您还需要将输入模块导入app.module.ts

请在下面导入：

从'@ angular / material'导入{MatInputModule};

Answer 7

从导入位置检查名称空间

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

Answer 8

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

Answer 9

我也有这个问题。原来我忘了在app.module.ts

中包含其中一个组件。

'mat-form-field'不是一个已知的元素 - Angular 5＆amp;材料2

9 个答案:

更新