[解決済み】Angular 6 エラー表示から 'mat-form-field' は既知の要素ではありません。

質問

こんにちは、私はangular 6を使用しており、私のコードは次のとおりです。

{{コード

というようなhtmlを作成します。

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';




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


import { MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule } from '@angular/material';
//import { MaterialModule } from 'src/app/et-shared/material.module';


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

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,
    RouterModule,
    AppRoutingModule,
   // MaterialModule,
   ...modules

  ],
  exports:[
    ...modules
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

私のパッケージはこんな感じ

<div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

で、このエラーになります。

"dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "^6.0.0",
    "zone.js": "^0.8.26"
  },

なぜ私はこのエラーになる私はこれに解決するためにあまりにも多くの時間を費やす必要がありますが、私は間違っている任意のソリューションを取得していない私もここにいくつかのソリューションが、私の問題に解決しない見つけるスタックオーバーフローに検索あなたは私がこのエラーに見つけるのを助けることができるしてください。

私の問題を解決してくれてありがとう

解決するには？

エラーを見る {コード

と宣言したと結論づけることができます。 '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. (" <div class="example-container"> [ERROR ->]<mat-form-field> <input matInput placeholder="Input"> </mat-form-field> "): ng:///AppRoutingModule/LoginComponent.html@7:2 '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. (" </mat-form-field> [ERROR ->]<mat-form-field> <textarea matInput placeholder="Textarea"></textarea> </mat-form-field> "): ng:///AppRoutingModule/LoginComponent.html@11:2 'mat-option' is not a known element: 1. If 'mat-option' is an Angular component, then verify that it is part of this module. 2. If 'mat-option' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <mat-form-field> <mat-select placeholder="Select"> [ERROR ->]<mat-option value="option">Option</mat-option> </mat-select> </mat-form-field> "): ng:///AppRoutingModule/LoginComponent.html@17:6 'mat-select' is not a known element: 1. If 'mat-select' is an Angular component, then verify that it is part of this module. 2. If 'mat-select' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" で ng:///AppRoutingModule/LoginComponent.html@11:2 をインポートしていませんでしたが LoginComponent というのがあります。

どちらか一方を動かす AppRoutingModule をクリックします。 MatFormFieldModule の配列 LoginComponent:

{{コード

または輸入 declarations または一部 AppModule で {コード :

{{コード

こちらもご覧ください。

• 他のモジュールからコンポーネントを使用する