Note: please see EDIT 2 shorter example of issue
This is my AuthService minified code:
var Services;
!function(a) {
var b = function() {
function a(a, b, c) {
var d = this;
d.$q = a, d.$http = b, d.$rootScope = c;
}
return a.prototype.login = function(a) {
//....
}, a.AuthServiceFactory = function(b, c, d) {
return new a(b, c, d);
}, a;
}();
a.AuthService = b, b.$inject = [ "$q", "$http", "$rootScope" ], angular.module("eucngts").factory("AuthService", b.AuthServiceFactory);
}(Services || (Services = {}));
And this is my controller minified code where I get error:
var Controllers;
!function(a) {
var b = function() {
function a(a, b, c, d, e, f) {
//...
}
//...
}();
a.HeaderController = b, b.$inject = [ "$scope", "$location", "AuthService", "$rootScope", "$modal", "$timeout" ],
angular.module("eucngts").controller("HeaderController", b);
}(Controllers || (Controllers = {}));
Error message is:
Unknown provider: bProvider <- b <- AuthService
Otherwise when I comment lines that use this service, my other controllers and services works fine.
The orders of lines in source file seems fine
My concatenated and none minified js file works fine as well.
What I could be reason that I get this error.
EDIT
When I put none uglified code instead of uglified one, it works fine
var Services;
(function (Services) {
var AuthService = (function () {
function AuthService($q, $http, $rootScope) {
var self = this;
self.$q = $q;
self.$http = $http;
self.$rootScope = $rootScope;
}
//...
AuthService.AuthServiceFactory = function ($q, $http, $rootScope) {
return new AuthService($q, $http, $rootScope);
};
return AuthService;
})();
Services.AuthService = AuthService;
AuthService.$inject = ['$q', '$http', '$rootScope'];
angular.module('eucngts').factory('AuthService', AuthService.AuthServiceFactory);
})(Services || (Services = {}));
EDIT 2: This is complete code of another service that I could not define that service which is shorter and easier to inspect:
var Services;
!function(a) {
var xxx = function() {
function a(a, zzz) {
var c = this;
this.request = function(a) {
a.headers = a.headers || {};
var zzz = JSON.parse(localStorage.getItem("authorizationData"));
return zzz && (a.headers.Authorization = "Bearer " + zzz.token), a;
}, this.responseError = function(a) {
var zzz = c;
return 401 === a.status && (localStorage.removeItem("authorizationData"), zzz.$location.path("/login")),
zzz.$q.reject(a);
};
var d = this;
d.$location = a, d.$q = zzz;
}
return a.AuthInterceptorServiceFactory = function(kkk, c) {
return new a(kkk, c);
}, a;
}();
a.AuthInterceptorService = xxx, xxx.$inject = [ "$location", "$q" ], angular.module("eucngts").factory("AuthInterceptorService", xxx.AuthInterceptorServiceFactory);
}(Services || (Services = {}));
none-uglified code:
var Services;
(function (Services) {
var AuthInterceptorService = (function () {
function AuthInterceptorService($location, $q) {
var _this = this;
this.request = function (config) {
var self = _this;
config.headers = config.headers || {};
var authData = JSON.parse(localStorage.getItem('authorizationData'));
if (authData) {
config.headers.Authorization = 'Bearer ' + authData.token;
}
return config;
};
this.responseError = function (rejection) {
var self = _this;
if (rejection.status === 401) {
localStorage.removeItem('authorizationData');
self.$location.path('/login');
}
return self.$q.reject(rejection);
};
var self = this;
self.$location = $location;
self.$q = $q;
}
AuthInterceptorService.AuthInterceptorServiceFactory = function ($location, $q) {
return new AuthInterceptorService($location, $q);
};
return AuthInterceptorService;
})();
Services.AuthInterceptorService = AuthInterceptorService;
AuthInterceptorService.$inject = ['$location', '$q'];
angular.module('eucngts').factory('AuthInterceptorService', AuthInterceptorService.AuthInterceptorServiceFactory);
})(Services || (Services = {}));
which says:
Unknown provider: kkkProvider <- kkk <- AuthInterceptorService <- $http <- $templateRequest <- $compile
Here is my answer to my question with greate help of @YOU
My typescipt code for AuthInterceptorService
class
module Services {
export class AuthInterceptorService {
$location: ng.ILocationService;
$q: ng.IQService;
constructor($location, $q) {
var self = this;
self.$location = $location;
self.$q = $q;
}
//...
static AuthInterceptorServiceFactory($location, $q) {
return new AuthInterceptorService($location, $q);
}
}
AuthInterceptorService.$inject = ['$location', '$q'];
angular.module('eucngts').factory('AuthInterceptorService', AuthInterceptorService.AuthInterceptorServiceFactory);
}
When I update it to:
module Services {
export class AuthInterceptorService {
$location: ng.ILocationService;
$q: ng.IQService;
constructor($location, $q) {
var self = this;
self.$location = $location;
self.$q = $q;
}
//..
static AuthInterceptorServiceFactory($location, $q) {
return new AuthInterceptorService($location, $q);
}
}
AuthInterceptorService.AuthInterceptorServiceFactory.$inject = ['$location', '$q'];
angular.module('eucngts').factory('AuthInterceptorService', AuthInterceptorService.AuthInterceptorServiceFactory);
}
It works as expected