Topic: How to install mdbootstrap angular for existing angular project?

asmitha free asked 5 years ago


I have an angular project. I want to install mdbootstrap for this project. This is the package.json:

{
    "name": "fuse",
    "version": "6.3.0",
    "license": "https://themeforest.net/licenses/terms/regular",
    "scripts": {
        "ng": "ng",
        "start": "ng serve --open",
        "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
        "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
        "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
        "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
        "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
        "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "bundle-report": "webpack-bundle-analyzer dist/stats.json"
    },
    "private": true,
    "dependencies": {
        "@agm/core": "1.0.0-beta.3",
        "@angular/animations": "^6.1.6",
        "@angular/cdk": "^6.4.6",
        "@angular/common": "6.1.6",
        "@angular/compiler": "6.1.6",
        "@angular/core": "6.1.6",
        "@angular/flex-layout": "6.0.0-beta.16",
        "@angular/forms": "6.1.6",
        "@angular/http": "6.1.6",
        "@angular/material": "^6.4.6",
        "@angular/material-moment-adapter": "6.4.6",
        "@angular/platform-browser": "6.1.6",
        "@angular/platform-browser-dynamic": "6.1.6",
        "@angular/router": "6.1.6",
        "@ctrl/ngx-csv": "^1.1.4",
        "@ctrl/ngx-emoji-mart": "^0.17.0",
        "@mobiscroll/angular": "https://npm.mobiscroll.com/@mobiscroll/angular-trial/-/angular-trial-4.7.3.tgz",
        "@ng-bootstrap/ng-bootstrap": "^3.3.1",
        "@ngrx/effects": "6.1.0",
        "@ngrx/router-store": "6.1.0",
        "@ngrx/store": "6.1.0",
        "@ngrx/store-devtools": "6.1.0",
        "@ngx-translate/core": "10.0.2",
        "@progress/kendo-angular-excel-export": "^2.2.0",
        "@progress/kendo-angular-l10n": "^1.3.0",
        "@swimlane/dragula": "3.7.3",
        "@swimlane/ngx-charts": "9.0.0",
        "@swimlane/ngx-datatable": "13.1.0",
        "@swimlane/ngx-dnd": "5.0.6",
        "@types/prismjs": "1.9.0",
        "angular-calendar": "0.25.2",
        "angular-crypto-js": "^1.0.7",
        "angular-in-memory-web-api": "0.6.1",
        "angular-mat-datepicker": "0.0.2",
        "angular-sortablejs": "^2.6.0",
        "angular-text-input-autocomplete": "^0.3.0",
        "angularx-social-login": "^1.2.3",
        "aws-sdk": "^2.406.0",
        "chart.js": "2.7.2",
        "classlist.js": "1.1.20150312",
        "core-js": "2.5.7",
        "crypto": "^1.0.1",
        "d3": "5.7.0",
        "exceljs": "^1.9.0",
        "file-saver": "^1.3.8",
        "fine-uploader": "^5.16.2",
        "fs": "0.0.1-security",
        "hammerjs": "^2.0.8",
        "jquery": "^3.3.1",
        "jwt-decode": "^2.2.0",
        "keyboardevent-key-polyfill": "^1.1.0",
        "lodash": "4.17.10",
        "mat-video": "^2.6.0",
        "mdbootstrap": "^4.8.8",
        "moment": "2.22.2",
        "net": "^1.0.2",
        "ng2-charts": "1.6.0",
        "ngrx-store-freeze": "0.2.4",
        "ngx-bootstrap": "^3.0.1",
        "ngx-color-picker": "6.6.0",
        "ngx-cookie-service": "1.0.10",
        "ngx-lightbox": "^1.2.0",
        "ngx-plyr": "^1.2.2",
        "ngx-stars": "^1.3.0",
        "ngx-webcam": "^0.2.2",
        "ngx-youtube-player": "^7.1.1",
        "os": "^0.1.1",
        "package.json": "^2.0.1",
        "perfect-scrollbar": "1.4.0",
        "pickerjs": "^1.2.0",
        "plyr": "^3.5.4",
        "prismjs": "1.15.0",
        "rxjs": "6.2.2",
        "rxjs-compat": "^6.3.3",
        "sortablejs": "^1.7.0",
        "stream": "0.0.2",
        "tls": "0.0.1",
        "web-animations-js": "2.3.1",
        "xlsx": "^0.14.0",
        "xlsx-style": "^0.8.13",
        "zone.js": "0.8.26"
    },
    "devDependencies": {
        "@angular/cli": "6.1.5",
        "@angular/compiler-cli": "6.1.6",
        "@angular/language-service": "6.1.6",
        "@angular-devkit/build-angular": "0.7.5",
        "@angularclass/hmr": "2.1.3",
        "@types/jasmine": "2.8.8",
        "@types/jasminewd2": "2.0.3",
        "@types/lodash": "4.14.116",
        "@types/node": "8.9.5",
        "codelyzer": "4.2.1",
        "jasmine-core": "2.99.1",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "1.7.1",
        "karma-chrome-launcher": "2.2.0",
        "karma-coverage-istanbul-reporter": "2.0.2",
        "karma-jasmine": "1.1.2",
        "karma-jasmine-html-reporter": "0.2.2",
        "protractor": "5.4.0",
        "ts-node": "5.0.1",
        "tslint": "5.9.1",
        "typescript": "2.7.2",
        "webpack-bundle-analyzer": "2.13.1"
    }
}

My Angular.json is :

> {   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
> "version": 1,   "newProjectRoot": "projects",   "projects": {
>     "fuse": {
>       "root": "",
>       "sourceRoot": "src",
>       "projectType": "application",
>       "prefix": "app",
>       "schematics": {
>         "@schematics/angular:component": {
>           "styleext": "scss"
>         }
>       },
>       "architect": {
>         "build": {
>           "builder": "@angular-devkit/build-angular:browser",
>           "options": {
>             "outputPath": "dist",
>             "index": "src/index.html",
>             "main": "src/main.ts",
>             "polyfills": "src/polyfills.ts",
>             "tsConfig": "src/tsconfig.app.json",
>             "assets": [
>               "src/favicon.ico",
>               "src/assets",
>               "src/lib"
>             ],
>             "styles": [
>               "src/styles.scss",
>               "node_modules/plyr/dist/plyr.css",
>               "node_modules/ngx-lightbox/lightbox.css",
>               "node_modules/@ctrl/ngx-emoji-mart/picker.css"
>             ],
>             "scripts": [
>               "src/lib/js/dndTree.js"
>             ],
>             "showCircularDependencies": false
>           },
>           "configurations": {
>             "production": {
>               "fileReplacements": [
>                 {
>                   "replace": "src/environments/environment.ts",
>                   "with": "src/environments/environment.prod.ts"
>                 }
>               ],
>               "optimization": true,
>               "outputHashing": "all",
>               "sourceMap": false,
>               "extractCss": true,
>               "namedChunks": false,
>               "aot": true,
>               "extractLicenses": true,
>               "vendorChunk": false,
>               "buildOptimizer": true
>             },
>             "ec": {
>               "sourceMap": true,
>               "extractCss": true
>             },
>             "hmr": {
>               "fileReplacements": [
>                 {
>                   "replace": "src/environments/environment.ts",
>                   "with": "src/environments/environment.hmr.ts"
>                 }
>               ]
>             }
>           }
>         },
>         "serve": {
>           "builder": "@angular-devkit/build-angular:dev-server",
>           "options": {
>             "browserTarget": "fuse:build"
>           },
>           "configurations": {
>             "production": {
>               "browserTarget": "fuse:build:production"
>             },
>             "hmr": {
>               "hmr": true,
>               "browserTarget": "fuse:build:hmr"
>             },
>             "ec": {
>               "browserTarget": "fuse:build:ec"
>             }
>           }
>         },
>         "extract-i18n": {
>           "builder": "@angular-devkit/build-angular:extract-i18n",
>           "options": {
>             "browserTarget": "fuse:build"
>           }
>         },
>         "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": [
>               "styles.scss",
>               "node_modules/plyr/dist/plyr.css",
>               "node_modules/ngx-lightbox/lightbox.css"
>             ],
>             "scripts": [
>               "src/lib/js/dndTree.js"
>             ],
>             "assets": [
>               "src/favicon.ico",
>               "src/assets"
>             ]
>           }
>         },
>         "lint": {
>           "builder": "@angular-devkit/build-angular:tslint",
>           "options": {
>             "tsConfig": [
>               "src/tsconfig.app.json",
>               "src/tsconfig.spec.json"
>             ],
>             "exclude": [
>               "**/node_modules/**"
>             ]
>           }
>         }
>       }
>     },
>     "fuse-e2e": {
>       "root": "e2e/",
>       "projectType": "application",
>       "architect": {
>         "e2e": {
>           "builder": "@angular-devkit/build-angular:protractor",
>           "options": {
>             "protractorConfig": "e2e/protractor.conf.js",
>             "devServerTarget": "fuse:serve"
>           }
>         },
>         "lint": {
>           "builder": "@angular-devkit/build-angular:tslint",
>           "options": {
>             "tsConfig": "e2e/tsconfig.e2e.json",
>             "exclude": [
>               "**/node_modules/**"
>             ]
>           }
>         }
>       }
>     }   },   "defaultProject": "fuse" }

How can i install mdbootstrap?


Arkadiusz Idzikowski staff answered 5 years ago


Please take a look at our quick start guide:

https://mdbootstrap.com/docs/angular/getting-started/quick-start/

Let me know if you encounter any further problems with the installation.


Meenal free commented 4 years ago

I have installed mdbootstrap in my angular 10 but I m getting an error while running the project, The error seems like -->
angular-bootstrap-md/lib/free/inputs/equal-validator.directive.d.ts is not exported from angular-bootstrap-md/lib/free/mdb-free.module (import into E:/E-Commerce project Spring hibernate angular/FrontEnd/Scss-Sample/src/app/app.component.ts).


Arkadiusz Idzikowski staff commented 4 years ago

Please create a new thread and provide more details about your project configuration.


Altafa6638 free answered 5 years ago


Install mdbootstrap create new project ng new project_name --style=scss npm i angular-bootstrap-md --save to app.module.ts add import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core'; import { MDBBootstrapModule } from 'angular-bootstrap-md';

@NgModule({ imports: MDBBootstrapModule.forRoot() , schemas: [ NO_ERRORS_SCHEMA ] }); in angular.json change: "styleExt": "css" to "styleExt": "scss"

rename /src/styles.css to styles.scss

if you want to change styles in exisiting project you can use ng set defaults.styleExt scss

add below lines to 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" ], install external libs npm install -–save chart.js@2.5.0 font-awesome hammerjs



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: All
  • Browser: All
  • OS: Ubuntu 16.04 LTS
  • Provided sample code: No
  • Provided link: No