The [$injector:strictdi] Missing Explicit Dependency Annotation error in AngularJS occurs when Strict Dependency Injection (Strict DI) mode is enabled, but one or more dependencies are not explicitly defined in a way that AngularJS can process safely.
1. Understanding the Error
Error Message in Console
Error: [$injector:strictdi] function($scope, myService) is not using explicit annotation and cannot be invoked in strict mode
Why This Happens?
- AngularJS minifies JavaScript by shortening function parameters (
$scope, myService→a, b). - During minification, AngularJS loses track of which service is which, breaking dependency injection.
- Strict DI mode requires an explicit way to define dependencies.
2. Common Causes & Fixes
1. Using Implicit Dependency Injection
Incorrect Code (Implicit Injection)
angular.module('myApp', [])
.controller('MyController', function($scope, myService) {
$scope.message = myService.getMessage();
});
Fix: Use $inject Array Annotation
angular.module('myApp', [])
.controller('MyController', ['$scope', 'myService', function($scope, myService) {
$scope.message = myService.getMessage();
}]);
Why This Works?
- The
$injectarray tells AngularJS exactly which services to inject before minification. - This ensures AngularJS does not lose track of dependencies.
2. Missing $inject in Services
Incorrect Code (Implicit Injection in Service)
angular.module('myApp', [])
.service('myService', function($http) {
this.getData = function() {
return $http.get('/api/data');
};
});
Fix: Use $inject Array Annotation
angular.module('myApp', [])
.service('myService', ['$http', function($http) {
this.getData = function() {
return $http.get('/api/data');
};
}]);
3. Using Class-Based Components Without Explicit Annotation
Incorrect Code (Missing $inject in Class-Based Services)
angular.module('myApp', [])
.service('MyService', class MyService {
constructor($http) {
this.$http = $http;
}
});
Fix: Define $inject on the Class
class MyService {
constructor($http) {
this.$http = $http;
}
}
MyService.$inject = ['$http'];
angular.module('myApp', [])
.service('MyService', MyService);
Why This Works?
- The
$injectproperty explicitly tells AngularJS what dependencies are required before runtime.
4. Using Arrow Functions (=>) in DI (Not Allowed)
Incorrect Code (Arrow Functions Don’t Work for DI)
angular.module('myApp', [])
.controller('MyController', ($scope, myService) => {
$scope.message = myService.getMessage();
});
Why This Fails?
- Arrow functions (
=>) do not have their ownthiscontext, which AngularJS uses for dependency injection.
Fix: Use Regular Functions
angular.module('myApp', [])
.controller('MyController', ['$scope', 'myService', function($scope, myService) {
$scope.message = myService.getMessage();
}]);
5. Forgetting $inject in Factory Functions
Incorrect Code (Factory Function Without Annotation)
angular.module('myApp', [])
.factory('myFactory', function($http) {
return {
getData: function() {
return $http.get('/api/data');
}
};
});
Fix: Use $inject Array Annotation
angular.module('myApp', [])
.factory('myFactory', ['$http', function($http) {
return {
getData: function() {
return $http.get('/api/data');
}
};
}]);
3. Debugging and Enabling Strict DI
🔎 How to Detect Strict DI Issues
- Open Chrome DevTools (F12) → Console
- Look for
[$injector:strictdi]errors.
- Look for
- Run AngularJS DI Check in Console:
angular.injector(['myApp']).annotate(function(myService) {});- If the function does not return
['myService'], explicit annotation is missing.
- If the function does not return
How to Enable Strict DI in AngularJS
Strict DI helps prevent hidden injection issues. Enable it in two ways:
✔ Method 1: In ng-app (Best for Debugging)
<html ng-app="myApp" ng-strict-di>
- This ensures AngularJS checks all dependencies.
✔ Method 2: In Code (Best for Production)
angular.bootstrap(document, ['myApp'], { strictDi: true });
- This applies strict dependency checking programmatically.