Angular 6 Material MatFormField показывает как неизвестный компонент

Question

Я пытаюсь создать базовый "блог" со стеком MEAN. Сейчас я пытаюсь работать с Angular 6. Консоль показывает эту ошибку при загрузке страницы формы:

Ошибка: ошибки синтаксического анализа шаблона: 'mat-form-field' не известен элемент:

1. Если 'mat-form-field' является угловым компонентом, то убедитесь, что он является частью этого модуля.

2. Если 'mat-form-field' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' к '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение. ("[ОШИБКА ->]"): 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 { }

material.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 (созданный угловой установкой):

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. Удалить declarations in AppRoutingModule

2. Добавить к app.module.ts

   declarations: [
       AppComponent,
       CreatePostComponent
   ],
   

3. Импорт AppRoutingModule в ваш AppModule

   imports: [ ...modules, AppRoutingModule],