为 Angular 6 安装了 mdb 但它不工作答案

【问题标题】：installed mdb for angular 6 but it's not working为 Angular 6 安装了 mdb 但它不工作
【发布时间】：2019-01-19 10:57:08
【问题描述】：

我使用 cli 创建了一个具有 .scss 样式的新 Angular 项目。我安装了 Angular 材料设计。

我正在尝试使用本指南安装材料设计 Bootstrap (MDbootstrap)

https://mdbootstrap.com/angular/5min-quickstart/

使用 npm。

我已经多次完成手册中的所有内容。

我检查了 app.modules 和 angular.json 文件是否与手册指定的一样。

我已经尝试了 MDB 官方网站上的几个代码示例 https://mdbootstrap.com/angular/forms/forms/

似乎即使项目编译，并且没有错误，材料设计也没有改变。

我怎样才能让我的项目认可 MDB 的设计？

代码：

app.modules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import {MatCardModule} from '@angular/material/card';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { MDBBootstrapModule } from 'angular-bootstrap-md';


import { AppComponent } from './app.component';
import { CardComponent } from './card/card.component';
import { CardsCollectionComponent } from './cards-collection/cards-collection.component';
import { EditDialogComponent } from './edit-dialog/edit-dialog.component';

@NgModule({
  declarations: [
    AppComponent,
    CardComponent,
    CardsCollectionComponent,
    EditDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    MatCardModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    FontAwesomeModule,  
    MDBBootstrapModule.forRoot(),

  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  entryComponents: [EditDialogComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

angular.json

"test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "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"
            ],

和

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/bookCollection",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "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"]

【问题讨论】：

显示一个未按原样显示的示例组件。

标签： angular sass bootstrap-4 material-design

【解决方案1】：

你的风格很好。我的脚本看起来像，我添加了 bootstrap npm i bootstrap --save

 "scripts": [
                            "node_modules/jquery/dist/jquery.min.js",
                            "node_modules/chart.js/dist/Chart.js",
                            "node_modules/hammerjs/hammer.min.js",
                            "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ] 

                                                                                                                                              ]

【讨论】：

【解决方案2】：

我问这个问题已经快 3 年了，答案很琐碎，但也许它会对某人有所帮助。

要解决这个问题，我只需要重启服务器ng serve 或npm run start。

【讨论】：