This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
$httpProvider's interceptor prevents the component in the ngView to be loaded #14938
Closed
Description
_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