mdbootstrap组件未正确呈现

Question

我正在处理Angular 6项目，其中angular-bootstrap-md的配置已按文档中所述进行。

我的tsconfig.json文件

{
  "compileOnSave": false,
   ......
   ......
  "include": ["src/**/*.ts", "node_modules/angular-bootstrap-md/**/*.ts"]
}

我的angular.json文件

"styles": [
    "node_modules/font-awesome/scss/font-awesome.scss",
    "node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap.scss",
    "node_modules/angular-bootstrap-md/scss/mdb-free.scss",
    "src/styles.scss"
],
 "scripts": [
  "node_modules/chart.js/dist/Chart.js",
  "node_modules/hammerjs/hammer.min.js"
]

我的app.module.ts文件

import { MDBBootstrapModule } from 'angular-bootstrap-md';
.......
......
@NgModule({
  declarations: [
   ........
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot()
  ],
  providers: [.....],
  schemas: [NO_ERRORS_SCHEMA],
  bootstrap: [AppComponent]
})
export class AppModule {}

我的MyComponent.component.html文件

<button type="button" mdbBtn color="primary" mdbWavesEffect>Primary</button>
<button type="button" mdbBtn color="secondary" mdbWavesEffect>Secondary</button>
<button type="button" mdbBtn color="success" mdbWavesEffect>Success</button>
<button type="button" mdbBtn color="danger" mdbWavesEffect>Danger</button>
<button type="button" mdbBtn color="warning" mdbWavesEffect>Warning</button>
<button type="button" mdbBtn color="info" mdbWavesEffect>Info</button>
<button type="button" mdbBtn color="light" mdbWavesEffect>Light</button>
<button type="button" mdbBtn color="dark" mdbWavesEffect>Dark</button>
<button type="button" mdbBtn color="link">Link</button>

这应该呈现各种颜色的按钮集，但它只会显示类似这样的内容

关于出什么问题了吗？该如何解决？