When serving the source files, the following angular form renders correctly and the button submits correctly when pressed (i have reduced the size of the form to keep things concise)
<form class="form-horizontal ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group">
<label class="control-label col-md-2" for="price">Price:</label>
<div class="col-md-10">
<input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price" />
</div>
</fieldset>
<fieldset>
<button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>
</fieldset>
</form>
But after minifying (with Grunt and Usemin) and serving the minified files from the Dist folder, then the form inputs render correctly, but the submit button is simply not there.
The relevant section of the dist/scripts/script.*******.js shows the button html is still present
a.put('...<form class="form-horizontal" ng-submit="entry.addEntry()" novalidate>
<fieldset class="form-group has-feedback"> <label class="control-label col-md-2" for="price">Price:</label> <div class="col-md-10"> <input id="price" type="text" class="form-control" ng-model="entry.price" placeholder="Price" title="Price"> </div> </fieldset>
<fieldset>\r\n <button type="submit" class="btn btn-primary pull-right"> Submit Entry <i class="ion-checkmark-round"></i></button>\r\n </fieldset>\r\n \r\n </form>
Clearly the Grunt minification has sent the button to the dist folder, but it just doesn't render, either in chrome or firefox or from heroku.
The only strange thing i can point to are these strange spaces that were inserted into the build file along with a bunch of newlines and carriage returns.
If this is to blame, what can be done? Also, why would the grunt file insert spaces around the button? It also did it in a couple of other areas. But in any case, manually removing the spaces and newlines did not seem to resolve the problem
In another very similar form, the button also doesn't render after minifying. There are also some spaces inserted into that part of the minified scripts file. All other buttons in the app render and function correctly after minifying
My editor is Visual Studio Code
Please help me to see what it is i have done wrong!
I fixed the problem
It was a small mistake in one of the input fields. Not the one i posted above, actually.
I wrote a textarea tag acccidentally as a self-closing tag, in the manner of old input tags
<textarea something something /></textarea>
unminified this was interpreted as i intended it to be, and so of course the error was never detected
but in the minification process it was reduced to
<textarea something something />
which never closed properly and therefore removed some subsequent blocks
so I think I can generalize from this:
the html parser can handle some mistakes before minification, but the minification parser may handle errors differently and afterwards the errors may appear
so any strange post-minification errors should result in careful scrutiny of the html for correct tag formatting