Topic: How to install mdbootstrap angular for existing angular project?
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?
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 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 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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