Error : Unknown provider After JavaScript Compression

Question

I have below AngularJS controller code

(function() {
    'use strict';
    angular
      .module('app')
      .controller('TemplateCtrl', TemplateCtrl);

      function TemplateCtrl($http, $auth, $rootScope,$scope){

      }
})();

After compression from http://jscompress.com/ I got below output.

!function(){"use strict";function t(t,l,n,e){}angular.module("app").controller("TemplateCtrl",t)}();

Before compression there was no error but after compression I am getting below error

 Error: [$injector:unpr] Unknown provider: tProvider <- t <- TemplateCtrl

I am not finding any clue to fix this ?

Thanks for your help and time.

Possible duplicate of Difference in controller declaration in AngularJS — Shashank Agrawal
– Shashank Agrawal, Commented Feb 15, 2016 at 12:45

dendimiiii · Accepted Answer · 2016-02-15 12:39:43Z

2

For angular compressing you need to do some extra stuff. You need to let it know how to compress dependencies. So you need this:

(function() {
'use strict';
angular
  .module('app')
  .controller('TemplateCtrl', ["$http", "$auth", "$rootscope", "$scope", TemplateCtrl]);

  function TemplateCtrl($http, $auth, $rootScope,$scope){

  }
})();

answered Feb 15, 2016 at 12:39

dendimiiii

1,6993 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

dendimiiii Over a year ago

Also: frontendcollisionblog.com/javascript/angularjs/2015/03/31/…

Niklesh Raut Over a year ago

I am getting same error after and before compression, after using this code.

Community · Accepted Answer · 2017-05-23 12:30:40Z

0

Angular resolves the dependency based on the names.

Read more here: https://stackoverflow.com/a/35336414/2405040 (Dependency Annotation)

And change your code like this:

(function() {
    'use strict';
    angular
      .module('app')
      .controller('TemplateCtrl', ["$http", "$auth", "$rootscope", "$scope", TemplateCtrl]);

      function TemplateCtrl($http, $auth, $rootScope,$scope){

      }
})();

To prevent missing things for minification and write code using inline annotation syntax, add the ng-strict-di annotation with ng-app attribute.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Feb 15, 2016 at 12:44

Shashank Agrawal

25.9k11 gold badges98 silver badges126 bronze badges

Comments

Niklesh Raut · Accepted Answer · 2016-02-15 13:01:26Z

0

Below code worked for me.

(function() {
'use strict';
angular
  .module('app')
  .controller('TemplateCtrl', TemplateCtrl);
  TemplateCtrl.$inject  = ['$http', '$auth', '$rootScope', '$scope'];

  function TemplateCtrl($http, $auth, $rootScope,$scope){

  }
})();

After compression this is

!function(){"use strict";function t(t,o,e,c){}angular.module("app").controller("TemplateCtrl",t),t.$inject=["$http","$auth","$rootScope","$scope"]}();

Thanks to all.

answered Feb 15, 2016 at 13:01

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

ojus kulkarni · Accepted Answer · 2016-02-15 12:41:19Z

-2

wright you controller in this way :

angular
  .module('app')
  .controller('TemplateCtrl', function () {

 var something = function ($http, $auth, $rootScope,$scope){

  }
});

answered Feb 15, 2016 at 12:41

ojus kulkarni

1,9073 gold badges27 silver badges42 bronze badges

3 Comments

oto lolua Over a year ago

when you minify this your parameters will be like "t,l,n,e" this

ojus kulkarni Over a year ago

@otololua Yes but the controller is not defined properly so he is getting that error

oto lolua Over a year ago

your function is just anonymous function and it doesn't matter

Collectives™ on Stack Overflow

Error : Unknown provider After JavaScript Compression

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related