Angular-Formly Custom Type Controller Fails on Deployment

Question

I'm using the example for a repeating section given on the angular-formly website. In my app.config I am creating a new type like this:

var unique = 1;

formlyConfigProvider.setType({
  name: 'repeatSection',
  templateUrl: 'app/rawMaterial/repeatSection.html',
  controller: function($scope) {
    $scope.formOptions = {formState: $scope.formState};
    $scope.addNew = addNew;

    $scope.copyFields = copyFields;


    function copyFields(fields) {
      fields = angular.copy(fields);
      addRandomIds(fields);
      return fields;
    }

    function addNew() {
      $scope.model[$scope.options.key] = $scope.model[$scope.options.key] || [];
      var repeatsection = $scope.model[$scope.options.key];
      var lastSection = repeatsection[repeatsection.length - 1];
      var newsection = {};
      if (lastSection) {
        newsection = angular.copy(lastSection);
      }
      repeatsection.push(newsection);
    }

    function addRandomIds(fields) {
      unique++;
      angular.forEach(fields, function(field, index) {
        if (field.fieldGroup) {
          addRandomIds(field.fieldGroup);
          return; // fieldGroups don't need an ID
        }

        if (field.templateOptions && field.templateOptions.fields) {
          addRandomIds(field.templateOptions.fields);
        }

        field.id = field.id || (field.key + '_' + index + '_' + unique + getRandomInt(0, 9999));
      });
    }

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min)) + min;
    }
  }

  });

Everything works fine on my local machine, but when I deploy to Heroku I get the following error:

Error: [$injector:unpr] Unknown provider: aProvider <- a

If I remove the controller: section from the type definition the error goes away. Leaving the controller: definition in but commenting out all of its contents still throws the error.

I'm using the angular-fullstack yeoman generator with the default Grunt tasks.

Answer 1

If you're throwing an error based on an expected service called a , this is an effect of minification in the AngularJS ecosystem. I'm suspecting $scope is being transformed to a when minified. To preserve $scope , define your controller with a "min-safe" injection signature. There are various ways to do this, but here is a common pattern. Observe the following...

controller: ['$scope', function($scope) {
    /* ... */
}])

JSFiddle Link - simple demo reproducing error