2

I have got an angular project generated with yeoman/generator-angular with both mobile and desktop views. The mobile templates heavily rely on mobile-angular-ui and it works just fine in development.

For some reason the modals are not displayed after grunt build. Instead, calling a modal would act as if a transparent component was added on top of the page (I mean, with the highest z-index), stealing the focus in the same way that a modal would do. As a consequence, the modal itself is not displayed and the page does not respond to any click event (assuming the fake modal is locking the focus).

The content of my modals is loaded via ng-include directives and it seems to work (from what I can see in the network tool of Chrome). There are no error message complaining about a missing resource in the console and the only thing I can think of is that the code responsible for toggling the modals visibility in mobile-angular-ui was somehow impacted by the build process. Sounds possible?

Any idea of what could cause this difference of behaviour between dev and production?

I am using mobile-angular-ui 1.2.0-beta.11. Feel free to request more information.

Buddyshot
  • 1,614
  • 1
  • 17
  • 44

2 Answers2

1

Bingo. The problem actually came from a clash between mobile-angular-ui and bootstrap, as I was using both of them for the mobile and desktop views respectively.

Since I use a very limited subset of bootstrap, I decided to remove all my bootstrap dependencies and only work with mobile-angular-ui which also provides a minimalist support for desktop views (namely col-md-xx etc. for responsive layouts).

Buddyshot
  • 1,614
  • 1
  • 17
  • 44
0

I don't know about mobile-angular-ui, but in Angular ui-bootstrap you need to include not only the main code but also the templates:

<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

When you don't include the tpls, the development is still working, because it's able to load the files from their location in bower_components. In production you get a similar result as you describe when using modals, because the templates were not bundled in your dist directory. Maybe it's a similar problem?

hoeni
  • 3,031
  • 30
  • 45
  • Hum... They do not mention such a thing in the [documentation](http://mobileangularui.com/docs/#installation) and there are no "templates" provided by `mobile-angular-ui` so to speak. But now I'm wondering whether there could be a clash between the bootstrap modals (that I use in the desktop views) and the `mobile-angular-ui` modals (that I use in the mobile views)... – Buddyshot May 08 '15 at 12:26