ОШИБКА Ошибка: StaticInjectorError (AppModule) [MatToolbar -> ElementRef]

Question

Я получил ошибку при использовании @ angular / material с моим первым днем.Версии как это:

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/material": "^6.2.0",
...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.6",
    "@angular/cdk": "^6.2.0",
    "@angular/cli": "~6.0.7",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@angular/material": "^6.2.0",
    "hammerjs": "^2.0.8",
    "typescript": "~2.7.2"
  }

Я импортирую модули в app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// the third modules
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule } from '@angular/material/toolbar';
import 'hammerjs';
import { HeaderComponent } from './header/header.component';
import { BaseDataComponent } from './base-data/base-data.component';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    BaseDataComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    LayoutModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Затем я использую панель инструментов mat в html, но когда я запускаю ее в браузере, я получаю сообщение об ошибке в консоли: ошибка Я ищумного, но все еще есть проблема, кто-нибудь может мне помочь?плз!