2

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

ygk
  • 550
  • 1
  • 7
  • 17

3 Answers3

1

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

Amir Choubani
  • 829
  • 2
  • 14
  • 28
0

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

Jinna Balu
  • 6,747
  • 38
  • 47
  • 2
    I have already did all these steps, do you know jhipster? Question is related to jhipster – ygk Jul 04 '17 at 17:42
  • i create jhipster application at least one application. jhipster fully supports angular cli. this works. What is your exact issue? – Jinna Balu Jul 04 '17 at 18:01
  • adding deeppurple-amber.css directly to index.html solved the warning problem but material widgets are not working as expected.. For example md-menu is not closed once opened – ygk Jul 05 '17 at 08:27
0

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/animations@x.x.x
npm install --save-exact @angular/material@x.x.x
Marwen Aouiti
  • 33
  • 7