1

I have been using the JHipster Mini Book to learn AngularJS and Spring Boot but I've hit a snag near the beginning of the book, at page 14. So far, I have run "yo jhipster", created a PostgreSQL database, and installed material design with "bower install bootstrap-material-design --save" and "grunt wiredep", with the configuration edits described in the book. When I run "gradlew bootRun", everything starts up and I can browse to "http://127.0.0.1:8080" and get the expected page shown in Figure 2 in the book.

The problem is that the drop-down menus do not drop-down, even after I log in.

I am using Windows 8.1 with node.js 5.2.0, npm 3.5.1, bower 1.7.0, and jhipster 2.26.1. Also PostgreSQL 9.4.5. I also had to install Visual Studio Express 2015 (with Update 1) and all related files so that node.js could work. Not to mention Python 2.7.1. I've worked through the issues mentioned at https://github.com/nodejs/node-gyp/issues/629#issuecomment-153196245 and Unable to Connect to GitHub.com For Cloning

I have used Google Chrome (Version 47.0.2526.106 m), and Internet Explorer (11.0.9600.18098) to test. I have checked that JavaScript is allowed in both browsers, and other JS-intensive websites work.

I recreated the project several times, so I don't think I'm leaving out any steps.

Since I'm new to AngularJS I don't know whether it is a JHipster problem or something wrong with my environment.

Where else could I look for problems?

UPDATE 22/12/2015

On page 13 of the JHipster book referred to above, there is an instruction on page 13 to run

bower install bootstrap-material-design --save

followed by

grunt wiredep

This adds some lines to src\main\webapp\index.html (amongst other files)

<script src="bower_components/bootstrap-sass/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/material.js"></script>
<script src="bower_components/bootstrap-material-design/dist/js/ripples.js"></script>

The first of these is the problem - when I remove it, everything appears to work (except I haven't tested everything so may find a problem later). I don't know what the problem is with that .js file.

Community
  • 1
  • 1
johnsgp
  • 103
  • 1
  • 8
  • Frontend dev on Windows is such a pain, check my answer on jhipster env at http://stackoverflow.com/questions/34399362/node-js-issue-angular-is-not-defined-cannot-fined-bower-packages-nodegy – Gaël Marziou Dec 21 '15 at 17:57
  • Open browser's console, there are probably errors – Gaël Marziou Dec 21 '15 at 17:57
  • @GaëlMarziou There are no errors in the Developer console in Google Chrome or Internet Explorer. – johnsgp Dec 22 '15 at 12:07
  • 1
    Are you running only gradle or are you running both gradle and grunt as recommended in http://jhipster.github.io/development.html ? Then accessing your app at http://localhost:3000/ ? – Gaël Marziou Dec 22 '15 at 13:17
  • @GaëlMarziou I'm running "gradlew bootRun" only and navigating to http://127.0.0.1:8080. I tried running "grunt serve" only but that didn't work at all from http://localhost:3000. I didn't realise I was meant to run both at the same time. I'll try that shortly. – johnsgp Dec 22 '15 at 18:52
  • @GaëlMarziou Running both gradle and grunt at the same time does not fix the problem, but removing the bootstrap.js line from index.html as outlined in my update fixes it at both URLs (8080 and 3000). – johnsgp Dec 22 '15 at 19:14
  • Have you checked whether you have all bootstrap files in your bower_components folder? – Gaël Marziou Dec 22 '15 at 23:03

2 Answers2

1

It's because you use bootstrap-material-design library, there are some evolutions about the dropdown of the navbar with bootstrap. If you want to fix it, 2 solutions:

Community
  • 1
  • 1
Thibaut Mottet
  • 414
  • 4
  • 15
0

Are you running in your index.html?

<script type="text/javascript">
     $.material.init() 
</script>
Daniel Gerber
  • 3,226
  • 3
  • 25
  • 32