Grunt build command generate a different result that developer versión

Question

I have a Angular project, I'm using Bower Yeoman and Grunt (v0.4.5), the problem it's that when generated the production version using the command grunt build the result it's different that my developer version; for example in the following table {{field.type}} never showing when !field.edit is true (and show the edit button)

<table class="table table-hover">
  <tr>  
    <th>{{ 'TYPE' | translate }}</th> 
    <th>{{ 'OPTIONS' | translate }}</th>    
  </tr>

  <tr ng-repeat="field in data.fields">         
    <td>
      <div ng-if="field.edit" class="form-group">              
        <select ng-model="field.typeT" ng-options="type for type in data.types" class="form-control" required/>
      </div> 
      <div ng-if="!field.edit" class="form-group">  
          {{ field.type }}   
      </div>               
    </td>           
    <td>
      <div ng-if="field.edit" class="form-group">              
        <button type="button" class="btn btn-success" ng-click="form.accept($index)">
            <span class ="glyphicon glyphicon-ok"></span> 
            {{ 'ACCEPT' | translate }}
        </button>                     
      </div> 
      <div ng-if="!field.edit" class="form-group">  
        <button type="button" class="btn btn-warning" ng-click="form.edit($index)">
            <span class ="glyphicon glyphicon-pencil"></span> 
            {{ 'EDIT' | translate }}
        </button>   
      </div>                
    </td>            
  </tr>                 
</table>

EDIT this is part of the controller file (Is too long to add in the question)

'use strict';

/**
 * @ngdoc function
 * @name demosApp.controller:formCreateCtrl
 * @description
 * # formCreateCtrl
 * Controlador de la forma generada dinamicamente
 */
angular.module('formModule')
  .controller('formCreateCtrl', ['$scope', 'formRESTService', 'selectedService'
                                ,'$location', 'formFieldRESTService', 'listRESTService'
                                , 'subFormRESTService', formCreateCtrl]);

    function formCreateCtrl ($scope, formRESTService, selectedService, $location
                            , formFieldRESTService, listRESTService, subFormRESTService) {

    $scope.data = {};
    $scope.info = {};

    $scope.data.fields = []; //Lista de campos del formulario
    $scope.data.form = {};
    $scope.data.types  = []; //Tipos de campos disponibles 
    $scope.info.isForm  = true; //variable para mostrar y ocultar el campo de imagen en el formulario de crear  

    initCtrl();

    /*
    * Funcion de inicio del controlador
    */
    function initCtrl () {
      formFieldRESTService.getTypes()
     .then(function (types) {
          $scope.data.types = types;
      })
     .catch(function (error) {
        console.log(error)
      });  
      .......         
    }

   /*
    * Valida que el nombre y el tipo de campo no sean nulos y los añade a la lista de campos
    */
    this.accept = function accept (index) {

      $scope.data.fields[index].edit = false;
      if (validationField(index)){
        $scope.data.fields[index].label = $scope.data.fields[index].labelT;
        $scope.data.fields[index].type = $scope.data.fields[index].typeT;
        //Añade el Id de la lista al campo
        if($scope.data.fields[index].list != undefined){
          $scope.data.fields[index].list_id = $scope.data.fields[index].list.list_id;          
        }
        //Añade el Id del formulario auxiliar al campo
        if($scope.data.fields[index].subForm != undefined){
          $scope.data.fields[index].sub_form_id = $scope.data.fields[index].subForm.sub_form_id;          
        }
      }
      console.log($scope.data.fields[index]);      
    }    

    this.edit = function accept (index) {
      $scope.data.fields[index].edit = true;
    }     

    .....
}

the grunt file was auto generate by generator-angular 0.12.1 and don't have any change the code can be see in this question

The problem is that when I run the project using grunt serve these errors do not occur.

As I can resolve these inconsistencies? They are problem Grunt version I am using?

thanks for the help :)

Answer 1

I finally find a solution but I have no idea why it works or what was the mistake, the only thing I did was reverse the order of the tags in the HTML

<div ng-if="!field.edit" class="form-group">  
     {{ field.type }}   
</div>              
<div ng-if="field.edit" class="form-group">              
     <select ng-model="field.typeT" ng-options="type for type in data.types" class="form-control" required/>
</div>   

However I retain the same doubt this is an error of grunt?

Answer 2

That´s not your issue, but, be aware using grunt with AngularJS.

Angular uses methods signatures to dynamically load resources and modules. When you uglify the code, be sure that grunt did not change the variables names.

Example:

app.controller('XController',['$rootScope','$scope','$http','$location','servicesocket',function($rootScope, $scope, $http,$location,servicesocket) {

}]);

About your issue, be sure about Node version on server and dev. You can have slightly different results with different plattaforms too, mainly with windows on dev and linux on production.