CSS folder not included in node_module

Arkadiusz Idzikowski staff commented 6 years ago

Did you follow the steps from our Quick Start guide?

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

Please try to remove node_modules and package-lock.json and run 'npm install' command again to make sure that the package is installed correctly.

EyedPes commented 6 years ago

I followed the instructions in your github repo (https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design#how-to-install-mdb-via-npm). As far as i can see, they are slightly different but the important part ( npm i angular-bootstrap-md --save ) is identical.

Edit: I did the npm install again and the CSS folder ist still missing :(

EyedPes commented 6 years ago

I just realized, that said folder is only available in the general bootstrap-material-design project (https://github.com/mdbootstrap/bootstrap-material-design). It is not included in the angular version (https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design)

Arkadiusz Idzikowski staff commented 6 years ago

Bootstrap-material-design repository is for MDB jQuery version. You can find Angular styles in projects/angular-bootstrap-md/src/lib.

These styles will be available in node_modules after you run 'npm install' command and will be ready to use in the project.

EyedPes commented 6 years ago

Yes, you are right. The documentation here (https://mdbootstrap.com/docs/angular/utilities/flexbox/) states, that the flexbox elements should be available in the angular styles aswell. But the angular angular-bootstrap-md project does not contain selectors like d-flex or align-items etc.

Damian Gemza staff commented 6 years ago

Dear @EyedPes

The d-flex align-items-center and similar comes from Bootstrap, not from MDB.

So you have to include the Bootstrap 4 styles in the angular.json file.

Could you please provide me with this file? I mean angular.json file.

EyedPes commented 6 years ago

Ah, ok I see. As there is no mention of it in the quick start guide, I simply missed it.

My angular.json file:

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "central-invoice-presystem": { "root": "", "sourceRoot": "src", "projectType": "application", "prefix": "app", "schematics": { "@schematics/angular:component": { "styleext": "scss" } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/central-invoice-presystem", "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" ], "es5BrowserSupport": true }, "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, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "central-invoice-presystem:build" }, "configurations": { "production": { "browserTarget": "central-invoice-presystem:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "central-invoice-presystem: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": [ "src/styles.scss" ], "scripts": [], "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/" ] } } } }, "central-invoice-presystem-e2e": { "root": "e2e/", "projectType": "application", "prefix": "", "architect": { "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "central-invoice-presystem:serve" }, "configurations": { "production": { "devServerTarget": "central-invoice-presystem:serve:production" } } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": "e2e/tsconfig.e2e.json", "exclude": [ "/node_modules/" ] } } } } }, "defaultProject": "central-invoice-presystem" }

Damian Gemza staff commented 6 years ago

After including the Bootstrap scss file, everything is working fine?