AngularJS Grunt Dist HTML "Cannot read property 'length' of undefined Used --force, continuing"

Question

Hi I have an AngularJS aplication created using Grunt bower and yeoman.

I am trying do grunt serve:dist on the application. While minifying some HTML shows error and doesn't minifying even if I do --force

I have some HTML pages in my views.

application.html

<!-- build:js scripts/applicationctrl.js -->
<script src="scripts/controllers/appln.js"></script>
<!-- endbuild -->
<div ng-if="view" id="application"
    class="tab-pane active">

    <div class="box-header blue-background">
        <div class="title">
            <div class="icon-edit"></div>
            Application Information
        </div>
    </div>

    <form class="form form-horizontal " id="appForm" name="appForm"
        ng-submit="saveapplication()" ng-if="update"
        style="margin-top: 1%">
        <div ng-if="statusMessage!=null"
            class="alert {{alertType}} alert-dismissable">
            <a class="close" data-dismiss="alert" href="">× </a> <i
                class="{{statusIcon}}"></i> {{statusMessage}}
        </div>
        <div class="groupedColumns"
            ng-if="allowed">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="control-label col-sm-4 " for="applicationName">Application
                        : <span class="required">*</span>
                    </label>
                    <div class="col-xs-7 controls">
                        <input class="form-control input-sm inline-block"
                            data-rule-required="true" ng-model="application.name"
                            placeholder="Application Name" required="required" />
                    </div>
                    <div class="availability-result">
                        <i id="loading" class="{{spinnerClass}}"></i> <span
                            class="{{msgClass}}"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-4 " for="applicationID">Application
                        ID : </label>
                    <div class="col-xs-7 controls">
                        <input class="form-control input-sm"
                            ng-model="application.applicationId" id="applicationID"
                            name="applicationID" placeholder="Application ID" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

I have another file in the same views folder.

info.html

<!-- build:js scripts/infoctrl.js -->
<script src="scripts/controllers/info.js"></script>
<!-- endbuild -->
<div class="box bordered-box" ng-if="tabpage.enable">
    <div class="box-content box-no-padding">
        <div class="responsive-table">
            <div class="box-header">
                <div class="title icon-truck">Summary</div>
            </div>
            <div class="form-group col-sm-6 no-margin-bottom">
                <label
                    class="control-label col-sm-5 col-xs-12 input-sm-attr no-padding">Active
                    : </label>
                <div>
                    <input class"no-padding" type="checkbox" ng-model="info.isActive"
                        ng-change="enablesave()">
                </div>
            </div>
            <div class="col-xs-2 actions">
                <button type="submit" id="infoSaveID"
                    ng-disabled="savebutton.enable" value="Save"
                    ng-click="saveInfo()"
                    class="btn btn-primary icon-ok icon-white">Save</button>
            </div>
            <div class="scrollable-area" style="padding-top: 5px;">
                <table class="table-condensed table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="col-size-reduce"
                                ng-repeat="(key ,value) in infoStatus[0]">{{key}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in infoStatus">
                            <td class="col-size-reduce" ng-repeat="(key, value) in row">
                                {{value}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

And I have many files too like this.

When I do grunt serve:dist it minifies the first html page. While it shows error while minifying the info.html page

Warning: dist/views/info.html
Parse Error: <input class"no-padding" type="checkbox" ng-model="info.isActive"
                        ng-change="enablesave()">
                </div>
            </div>
            <div class="col-xs-2 actions">
                <button type="submit" id="infoSaveID"
                    ng-disabled="savebutton.enable" value="Save"
                    ng-click="saveInfo()"
                    class="btn btn-primary icon-ok icon-white">Save</button>
            </div>
            <div class="scrollable-area" style="padding-top: 5px;">
                <table class="table-condensed table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th class="col-size-reduce"
                                ng-repeat="(key ,value) in infoStatus[0]">{{key}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in infoStatus">
                            <td class="col-size-reduce" ng-repeat="(key, value) in row">
                                {{value}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div> Used --force, continuing.
Warning: Cannot read property 'length' of undefined Used --force, continuing.

Why the first one is working fine and the second one shows error? How to solve it?

Answer 1

There is an error in your HTML syntax. At the first line, replace

<input class"no-padding" type="checkbox" ng-model="info.isActive"
                        ng-change="enablesave()">

By

<input class="no-padding" type="checkbox" ng-model="info.isActive"
                        ng-change="enablesave()">

And htmlmin will work properly.