I have set up an interceptor to display an ajax spinner while loading.
interface IInterceptorScope extends angular.IRootScopeService {
loading: number;
}
export class Interceptor {
public static Factory($q: angular.IQService, $rootScope : IInterceptorScope) {
return new Interceptor($q, $rootScope);
}
constructor(private $q: angular.IQService, private $rootScope: IInterceptorScope) {
this.$rootScope.loading = 0;
}
public response(response) {
console.log(response);
this.$rootScope.loading = 1;
return response || this.$q.when(response);
}
public responseError(rejection) {
console.log(rejection.status);
if (rejection.status === 401) {
}
return this.$q.reject(rejection);
}
}
Encountering the following error:
https://i.sstatic.net/FkcBO.jpg
The issue is that $q is not defined. I am unsure why this is happening. Can someone assist with this?
EDIT: Here is how I'm adding the interceptor in my config() block, the relevant snippet looks like this:
.config($httpProvider : angular.IHttpProvider) => {
$httpProvider.interceptors.push(Interceptor.Factory);
}
And registering the factory:
.factory('Interceptor', Interceptor)
For reference, I was checking out the first answer mentioned here:
AngularJS global $http state ajax loader
The plain JavaScript implementation uses $rootScope with the loading property, but I'm uncertain if this relates to the TypeScript setup in the code above.