$httpProvider's interceptor prevents the component in the ngView to be loaded #14938

w20089527 · 2016-07-21T05:23:58Z

_Angularjs: 1.5.7_
_ngRoute: 1.5.7_

When I use the $httpProvider's interceptor, it will prevent the component in the ngView to be loaded.
If I remove the interceptor, it will be ok.
Well, it sounds confusing. So Let's check the code.
Here is my code:

index.html

<!DOCTYPE html>
<html>
<head>
  <script src="angular.min.js"></script>
  <script src="angular-route.min.js"></script>

  <script src="app.js"></script>
</head>

<body ng-app="httpApp" ng-cloak>
  <app></app>
</body>

</html>

app.js

function AppController() {
}

function NavController() {
}

angular.module('httpApp', ['ngRoute'])
  .config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $routeProvider.when('/nav1', {
      template: '<nav1></nav1>'
    }).when('/nav2', {
      template: '<nav2></nav2>'
    }).otherwise('/nav1');

    // If I uncomment the interceptor, 
   //  it will prevent the component to be loaded.
    $httpProvider.interceptors.push(['$q', '$location',
      function ($q, $location) {
        return {
          'request': function (config) {
            config.headers = config.headers || {};
            return config;
          },
          'requestError': function (config) {
            return config;
          },
          'response': function (response) {
            return response;
          },
          'responseError': function (response) {
            return $q.reject(response);
          }
        };
    }]);

  }])
  .component('app', {
    templateUrl: 'app.html',
    controller: AppController
  })
  .component('nav1', {
    template: '<div><h4>This is <em>Nav1</em> View<h4></div>',
    controller: NavController
  })
  .component('nav2', {
    template: '<div style="color: red"><h4>This is <em>Nav2</em> View<h4></div>',
    controller: NavController
  });;

app.html

<section>
  App
  <ul>
    <li><a href="#/nav1">Nav1</a></li>
    <li><a href="#/nav2">Nav2</a></li>
  </ul>
  <hr>
  <section>
    <div><h3>ngView</h3></div>
    <div ng-view style="background-color: #EEF4F7; height: 300px; border: 1px solid;"></div>
  </section>
</section>

Here is the result.

And Following is expected(_Just switch the nav to see the result_):

Here is the live preview link https://plnkr.co/edit/LxtA1hRjuJ0MiymazWmD?p=preview

gkalpak · 2016-07-21T06:43:51Z

This is a known issue. It has been fixed on master (the fix will be included in the 1.6 release). You can find more context in #14893 (and the issues/commits/PR linked from there).

To make it work with v1.5.7, you can instantiate the $route service yourself. E.g. add:

.run(['$route', angular.noop])

gkalpak closed this as completed Jul 21, 2016

gkalpak added the resolution: fixed label Jul 21, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

$httpProvider's interceptor prevents the component in the ngView to be loaded #14938

$httpProvider's interceptor prevents the component in the ngView to be loaded #14938

w20089527 commented Jul 21, 2016 •

edited

Loading

gkalpak commented Jul 21, 2016

$httpProvider's interceptor prevents the component in the ngView to be loaded #14938

$httpProvider's interceptor prevents the component in the ngView to be loaded #14938

Comments

w20089527 commented Jul 21, 2016 • edited Loading

index.html

app.js

app.html

gkalpak commented Jul 21, 2016

w20089527 commented Jul 21, 2016 •

edited

Loading