Praveen D
Praveen D

Reputation: 2377

AngularJS minified js files not working

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.

Upvotes: 1

Views: 2938

Answers (3)

Alex M
Alex M

Reputation: 2836

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";
    ...
  });

Upvotes: 3

Srijith
Srijith

Reputation: 1444

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!

Upvotes: 1

Dayle Salmon
Dayle Salmon

Reputation: 281

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.org/guide/di.

Upvotes: 5

Related Questions