angularjsgruntjsminifyangular-ui-select

Angular ui-select breaks after minifying


I currently need to maintain an angular.js 1.5 application which uses angular-ui-select 0.19.8. The problem I'm having is, that the ui-select somehow breaks when packaging the app. When running with grunt serve, this part:

<ui-select mandatory-field-marker
     multiple ng-required="true"
     ng-model="some.periods">
   <ui-select-match placeholder="Select some periods...">
     {{$item | period}}
   </ui-select-match>
   <ui-select-choices
        repeat="period in formCtrl.periods">
     <div ng-bind-html="period | highlight: $select.search"></div>
   </ui-select-choices>
</ui-select>

results in this output: local

When running the packaged app, it looks like this: packaged

It's not just a style problem, the broken input field doesn't allow more than 10 elements before it becomes unclickable due to shifting into the next component.

The packaging is done with grunt and as far as I can see, those are the steps used to minify the code:

I've found some workarounds, like downgrading ui-select and adding matching classes to <ui-select> and <ui-select-choices> but none of them worked.

The ui-select dependency pulled by bower seems to be minified already: ui-select-dist


Update: This seems to be a problem with grunt and/or bower. After reconfiguring the Apache hosting the website, I've reached the error, that the vendor.min.css is missing. I've found the part in the (generated by bower) index.html head where it says:

<!-- build:css(.) styles/vendor.min.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
<link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.) styles/bootstrap.min.css -->
<link rel="stylesheet" href="styles/bootstrap.css">
<!-- endbuild -->
<!-- build:css(.) styles/main.min.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

however, only the bootstrap.min.css and main.min.css are packaged into my dist: missing vendor.min.css

Still don't know the reason.


Solution

  • I've fixed it but not very elegantly. The problem was, that the select.css and ng-tags-input.css where not packaged into a vendor.min.css, so they where missing after deployment. I could not identify which grunt-task should build the vendor.min.css, but at least I know that whoever should do it, didnt'. So in the index.html I've changed the part

    <!-- build:css(.) styles/vendor.min.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
    <link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.) styles/bootstrap.min.css -->
    <link rel="stylesheet" href="styles/bootstrap.css">
    <!-- endbuild -->
    <!-- build:css(.) styles/main.min.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    

    to

    <!-- build:css(.) styles/select.min.css -->
    <link rel="stylesheet" href="bower_components/angular-ui-select/dist/select.css" />
    <!-- endbuild -->
    <!-- build:css(.) styles/ng-tags-input.min.css -->
    <link rel="stylesheet" href="bower_components/ng-tags-input/ng-tags-input.css" />
    <!-- endbuild -->
    <!-- build:css(.) styles/bootstrap.min.css -->
    <link rel="stylesheet" href="styles/bootstrap.css">
    <!-- endbuild -->
    <!-- build:css(.) styles/main.min.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    

    which now works. This will be a problem, if there are any more css-files from bower_components in the future, but the application I'm talking about is going to be put out of service next year, so it doesn't matter.