Why the the httpInterceptor got rejected when the App starts even when there is network?

Question

I'm using the following code to show a message when there is no network. It works well when testing the app in airplane mode. However, it always shows the popup even when there is network when the app code start (rejection.status === 0). How to workaround it?

.config(function($provide, $httpProvider) {
    $provide.factory('httpInterceptor', function($q, $injector) {
        return {
            response: function(response) {
                return response || $q.when(response);
            },
            responseError: function(rejection) {
                var interactiveService = $injector.get('interactiveService');
                if (rejection.status === 0 || rejection.status === -1) {
                    interactiveService.showPopup('The internet is disconnected on your device.' + rejection.status);
                }
                return $q.reject(rejection);
            }
        };
    });
    $httpProvider.interceptors.push('httpInterceptor');
})

Answer 1

If it helps try this

.config(function($provide, $httpProvider) {
$provide.factory('httpInterceptor', function($q, $injector) {
    return {
        response: function(response) {
            return response || $q.when(response);
        },
        responseError: function(rejection) {
            var interactiveService = $injector.get('interactiveService');
            /************** New code starts*******/
             var networkState = navigator.connection.type;
             if(networkState === Connection.NONE){
              interactiveService.showPopup('The internet is disconnected on your device.' + rejection.status);
             }

             /************** New code ends*******/
            return $q.reject(rejection);
        }
    };
});
$httpProvider.interceptors.push('httpInterceptor');
})