шаблон разбора ошибок mdb карта не известный элемент

Question

Я работаю над угловым приложением и использую формы mdbbootstrap с угловым материалом и bootstrap4, я установил их два, но при компиляции выдает ошибку: ошибки синтаксического анализа шаблона mdb-card не является известным элементом

Я пытался добавить модули ... но это не работает

<mdb-card>



  <!--Card content-->
  <mdb-card-body class="px-lg-5 pt-0">

    <!-- Form -->
    <form class="text-center" style="color: #757575;">

      <!-- Name -->
      <div class="md-form mt-3">
        <input type="text" id="materialContactFormName" class="form-control" mdbInput>
        <label for="materialContactFormName">Name</label>
      </div>

      <!-- E-mail -->
      <div class="md-form">
        <input type="email" id="materialContactFormEmail" class="form-control" mdbInput>
        <label for="materialContactFormEmail">E-mail</label>
      </div>

      <!-- Subject -->
      <span>Subject</span>
      <div class="row">
        <div class="col-md-12 mx-auto">
          <mdb-select [options]="optionsSelect" placeholder="Choose your option"></mdb-select>
        </div>
      </div>

      <!--Message-->
      <div class="md-form">
        <textarea type="text" id="materialContactFormMessage" class="form-control md-textarea" mdbInput></textarea>
        <label for="materialContactFormMessage">Message</label>
      </div>

      <!-- Copy -->
      <div class="row">
        <div class="col-md-6 mx-auto d-flex justify-content-center">
          <mdb-checkbox>Send me a copy of this message</mdb-checkbox>
        </div>
      </div>

      <!-- Send button -->
      <button mdbBtn color="info" outline="true" rounded="true" block="true" class="z-depth-0 my-4 waves-effect" mdbWavesEffect
        type="submit">Send</button>

    </form>
    <!-- Form -->

  </mdb-card-body>

</mdb-card>

Answer 1

    import { BrowserModule } from '@angular/platform-browser';
    import { HttpClientModule } from '@angular/common/http';
    import { NgModule } from '@angular/core';
    import { ReactiveFormsModule, FormsModule } from '@angular/forms';


    import { MDBBootstrapModule } from 'angular-bootstrap-md';
    import {MatExpansionModule} from '@angular/material/expansion';




import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LandingPageComponent } from './landing-page/landing-page.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatCardModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSelectModule, MatMenuModule
  , MatDividerModule, MatInputModule, MatProgressBarModule, MatSidenavModule, MatListModule
} from '@angular/material';
import { HomeComponent } from './home/home.component';
import { LoadPipe } from './home/load.pipe';
import { GraphQLModule } from './graphql.module';
import { InsertComponent } from './form/insert.component';
import { StudentService } from './students.service';
import { FetchComponent } from './fetch/fetch.component';

const material = [MatCardModule, MatToolbarModule, MatButtonModule, MatIconModule, MatSelectModule, MatMenuModule
  , MatDividerModule, MatInputModule, MatProgressBarModule, MatSidenavModule, MatListModule];
@NgModule({
  declarations: [
    AppComponent,
    LandingPageComponent,
    HomeComponent,
    InsertComponent,
    FetchComponent,
    LoadPipe
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    HttpClientModule,
    AppRoutingModule,
    ...material,
    BrowserAnimationsModule,
    GraphQLModule,
    FormsModule,
    MDBBootstrapModule.forRoot(),
    MDBBootstrapModule,
    MatExpansionModule


  ],
  providers: [ StudentService],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {}
}