Topic: MDB with JHipster
Hi,
can you please share if and how it is possible to apply MDB into Angular 5 project that was generated via JHipster platform.
Thanks.
So For all Using Jhipster 4.12.1 and above... aka Bootstrap 4 with Angular... and want to install Angular Material Design... here is what you need to know.
- first off... it doesn't work fully (for me yet).. but it is close... and I'm not expert at anything Bootstrap/Material/etc. so you may be able to make it work fully
- What does NOT work
- the menu drop-downs... they menu drop downs work... but they are invisible... you can over on invisible links, they work... even copying the code from an MDB example straight in will not work... so jhipster is overriding something.. Id dont know what.
- there are formatting issues you will need to fix naturally.
- Naturally the jhipster MDM generator does not work since it is Bootstrap 3 and a dead project
https://www.npmjs.com/package/generator-jhipster-bootstrap-material-design
HOW TO GET IT (ALMOST) working
If you are css and not scss you will need to witch in your .yo-rc.json... and do all that.
you will have to follow the instructions to yarn install MDB, and hammerjs, and chart.js
app.module.ts
import { NgModule, Injector, NO_ERRORS_SCHEMA } from '@angular/core';
schemas: [ NO_ERRORS_SCHEMA ],
tsconfig.json
add in the "include: "node_modules/angular-bootstrap-md/**/*.ts"
vendor.scss -- THIS IS IMPORTANT FOR JHIPSTER--
/* after changing this file run 'yarn run webpack:build' */ $fa-font-path: '~font-awesome/fonts'; // Images Path for angular-bootstrap-md $image-path: '../../../../../node_modules/angular-bootstrap-md/img' !default; // Fonts Path for angular-bootstrap-md $roboto-font-path: "../../../../../node_modules/angular-bootstrap-md/font/roboto/" !default; /*************************** put Sass variables here: eg $input-color: red; ****************************/ // Override Boostrap variables @import "bootstrap-variables"; // Import Bootstrap source files from node_modules @import 'node_modules/bootstrap/scss/bootstrap'; @import 'node_modules/font-awesome/scss/font-awesome'; @import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap'; @import 'node_modules/angular-bootstrap-md/scss/mdb-free'; /* jhipster-needle-scss-add-vendor JHipster will add new css style */
angular-cli.json - - IS NOT USED BY JHIPSTER... but you can add this for fun... it does nothing
add in the 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",
add in the scripts
"../../../node_modules/chart.js/dist/Chart.js",
"../../../node_modules/hammerjs/hammer.min.js"
It looks great on most pages... so close.
amir choubani free commented 6 years ago
Did you have this problem ``` ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./src/main/webapp/content/scss/vendor.scss Module build failed: undefined ^ Argument `$map2` of `map-merge($map1, $map2)` must be a map Backtrace: node_modules/angular-bootstrap-md/scss/core/_colors.scss:43, in function `map-merge` node_modules/angular-bootstrap-md/scss/core/_colors.scss:43 in C:UsersamirDesktopMarketplacenode_modulesangular-bootstrap-mdscsscore_colors.scss (line 43, column 7) @ ./src/main/webapp/content/scss/vendor.scss 4:14-198 18:2-22:4 19:20-204 @ ./src/main/webapp/app/vendor.ts @ ./src/main/webapp/app/app.module.ts @ ./src/main/webapp/app/app.main.ts ```
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Damian Gemza staff commented 6 years ago
Hello Ozishemesh, I'm sorry, but I never used JHipster platform, so I can't give you any advices. But if your project in JHipster got package.json and other Angular things like angular-cli.json, you probably could use MDB with this project. Let me know if you configure our MDB with your project! Best Regards, Damianozishemesh pro commented 6 years ago
Thanks for the prompt reply. once the project is created its like a regular Angular 5 project (including package.json and other Angular things like angular-cli.json). i tried to follow the installation guidelines, it is compiled successfully using webpack but seems like some of the property are missing at runtime. like colors deep-orange etc... I also tried to add reference from global.scss to @import 'node_modules/angular-bootstrap-md/scss/bootstrap/bootstrap'; @import 'node_modules/angular-bootstrap-md/scss/mdb-free'; but in that case the compilation is failing due to wrong resolving of fonts and images. any suggestion what can be wrong and or any other way that i can import it? Is it possible to verify using google dev-tools if mdbootstrap artifacts were loaded fine into the client? Thanks, Oz.