I minified and merged all js files in one and included in html nothing is working in site.

There are so many files in js and I dont want include all one by one, so modified and merged all in one.

Is there any other way to decrease number of http calls for js files.

I minified and merged all js files in one and included in html nothing is working in site.

There are so many files in js and I dont want include all one by one, so modified and merged all in one.

Is there any other way to decrease number of http calls for js files.

• javascript
• php
• jquery
• angularjs
• minify

• Can you share how you are defining your controllers? – Ankit Singh Commented Jul 7, 2016 at 8:24
• You can try to use a CDN to reduce the number of calls per domain, but minifying and merging should work fine, I use webpack with Angular JS with no issue. – ymas Commented Jul 7, 2016 at 8:26
• see the plunker link plnkr.co/edit/NEmPfu18tePMZ8keZp2p?p=info – Praveen D Commented Jul 7, 2016 at 8:34
• @Greatym., did you get it working in the end? – Dayle Salmon Commented Jul 8, 2016 at 7:46

3 Answers 3

When minifying your AngularJS documents it is important that you follow the docs for dependancy injection, otherwise your code can break. You should make sure you are using the preferred array method an example can be seen below:

   someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
  // ...
}]);

As seen in the official Angular JS docs: https://docs.angularjs/guide/di.

It seems, that's a reason of implicit dependency injection. According to the Angular JS documentation:

Careful: If you plan to minify your code, your service names will get renamed and break your app.

Use strict dependency injection instead. For example:

angular
  .module("MyModule")
  .controller("MyCtrl", ["$scope", "$timeout", function ($scope, $timeout) {
    ...
  }]);

More over, consider using ng-annotate that's much easier:

angular
  .module("MyModule")
  .controller("MyCtrl", function ($scope, $timeout) {
    "ngInject";
    ...
  });

To follow up on @dayle-salmon 's answer, if you have your controllers like this

app.controller('DemoCtrl', function(dependency1, dependency2){
 // controller code
});

Change it to

app.controller('DemoCtrl', ['dependency1', 'dependency2', function(dependency1, dependency2){
 // controller code
}]);

Reason JS minificators usually change the name of the dependency that is injected. And Angular wont have a clue on what the dependency is. So, you manually declare them so it won't cause a problem after minification!