MDB with JHipster

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB with JHipster

ozishemesh pro asked 7 years ago

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.

Damian Gemza staff commented 7 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, Damian

ozishemesh pro commented 7 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.

Lance answered 7 years ago

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.

  1. 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
  2. What does NOT work
    1. 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.
    2. there are formatting issues you will need to fix naturally.
    3. 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 commented 7 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 ``

Damian Gemza staff answered 7 years ago

Ozishemesh, 1st question: Do your IDE console or browser console throws any errors that some files is missing? 2nd question: Why do you want to add your custom styles from global styles.scssfile to bootstrap or our package styles? I don't see a reason to do that. Best Regards, Damian
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
ozishemesh
Pro User
2Support score
1Questions 0Answers
0Snippets likes 0Snippets