javascript - Angular 6 Material MatFormField 显示为未知组件

Question

我正在尝试使用 MEAN 堆栈构建一个基本的“博客”。现在我正在尝试使用 Angular 6。加载我的表单页面时控制台显示此错误:

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 ->] "): ng:///AppRoutingModule/CreatePostComponent.html@1:2

我不确定发生了什么......或如何解决它。我的代码是:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './material';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularMaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ma​​terial.ts(AngularMaterialModule):

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';

const modules = [
  MatToolbarModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule,
  MatDatepickerModule
];

@NgModule({
  imports: [ ...modules ],
  exports: [ ...modules ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AngularMaterialModule {}

app-routing.module.ts(由 Angular 安装创建):

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreatePostComponent } from './posts/create-post.component/create-post.component';

const routes: Routes = [
  {
    path: 'posts/new',
    component: CreatePostComponent
  }
];

@NgModule({
  declarations: [
    CreatePostComponent
  ],
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

最后，create-post.component.html:

<form #createPost>
  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>
</form>

因此，任何有助于我解决此问题的评论都将受到赞赏。

Answer 1

1. 删除 AppRoutingModule 中的声明

2. 将其添加到 app.module.ts

   declarations: [
       AppComponent,
       CreatePostComponent
   ],
   

3. 将 AppRoutingModule 导入到您的 AppModule

   imports: [ ...modules, AppRoutingModule],