CODEWITHSUNDEEP
jhipster
ygk
ygk

Reputation: 600

How to add angular material design to jhipster

I am trying to add material desing to jhipster generated gateway. Although it seems it is working I am getting this warning on console;

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
Could not find HammerJS. Certain Angular Material components may not work correctly.

Below lines are added to package.json dependencies

"@angular/material": "^2.0.0-beta.7",
"hammerjs": "^2.0.8",

Below lines are added to global.scss

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700');
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

Just note that if I comment out indigo-pink.css line UI becomes uglier so I conclude that this css is imported successfully when not commented.

Jhipster version is 4.5.6

What can be the reason for the warning

Edit 1: this solves the hammerjs warning https://stackoverflow.com/a/41322757/795168 , but still theme warning and problem on UI is continues

Upvotes: 2

Views: 6129

Answers (3)

Marwen Aouiti
Marwen Aouiti

Reputation: 43

you'll need to add both @angular/animations and @angular/material with the specific version that is compatible with your angular version.

npm install --save-exact @angular/[email protected]
npm install --save-exact @angular/[email protected]

Upvotes: 0

Amir Choubani
Amir Choubani

Reputation: 1011

Adding angular material to monolothic jhipster project worked for me by deleting hammerjs if it is installed

npm uninstall hammerjs --save

and verify that is deleted in package.json file

Upvotes: 1

Jinna Baalu
Jinna Baalu

Reputation: 7819

Install the @angular/material library and add the dependency to package.json

npm install --save @angular/material

Import the Angular Material NgModule into your app module...

import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [
  ...
  MaterialModule
 ],
  ...
})

Now that the project is set up, it must be configured to include the CSS for a theme. Angular Material ships with some prebuilt theming, which is located in node_modules/@angular/material/prebuilt-themes/.

To add an angular CSS theme and material icons to your app

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

please check with the link Install Angular Material

Upvotes: 0

Related Questions