Question

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

我正在尝试使用本指南安装材料设计自举（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"]

Answer 1

您的风格很好。我的脚本看起来像，我在bootstrap --save

中添加了bootstrap npm。

 "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"
            ] 

                                                                                                                                              ]

Answer 2

我问这个问题已经快 3 年了，答案是如此微不足道，但也许会对某人有所帮助。

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

为角度6安装了mdb，但是它不起作用

2 个答案: