$compile:tpload Failed to load template (HTTP status: 404) happens in one sub url only
Question
I am trying to run my angularjs-based app on local file throughout File transfer protocol(not on any server).
My project contains html files as index.html and template folder on the top level, and other sub html files, such as common.html, main.html, etc. which are included in the template folder.
This app triggers the error below,
Error: [$compile:tpload] Failed to load template: template/common.html (HTTP status: 404) ,
only when entering through File transfer, file:///C:/Webapp/index.html#common/abc .
But it does not happen when entering by http.
Also, this file transfer access triggers an error in Chrome, IE, but not in Firefox.
And the second odd thing is that this happens only when url ends with #common/abc . The only one url that triggers the tpload error goes like file:///C:/Webapp/index.html#common/abc (case only with #common/~ after index.html, and I don't get the error if it doesn't has 'abc' at the last).
The 'abc' functions like parameters(called channelTag on my project) going to be input on my App, not actual files.
And This project intends to start with the url file:///C:/Webapp/index.html#common/abc which gets the channelTag, and flows other sub urls.
Other urls like file:///C:/Webapp/index.html#main , or file:///C:/Webapp/index.html#sub2 are okay. No errors are shown there.
After checking some related answers on searching, most of the answers say to include bootstrap-tpls.js instead of bootstrap.js, but this method shows the same result.
Attached are the html and javascript code below :
index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="EUC-KR">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="{{metaservice.metaViewport()}}" />
<title>BtvWebApp</title>
<link rel="stylesheet" type="text/css" href="css/btv.css">
<script src="js/lib/jquery-1.11.1.min.js"></script>
<script src="js/bxslider/jquery.bxslider.min.js"></script>
<script src="js/lib/angular.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<script src="js/lib/angular-route.min.js"></script>
<script src="js/lib/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lib/script.js"></script>
<script src="js/view/main/mainController.js"></script>
<script src="js/view/commonController.js"></script>
<script src="js/filters/zerofillFilter.js"></script>
<script src="js/config/constants.js"></script>
<script src="js/config/messages.js"></script>
</head>
<body>
<ng-view></ng-view>
</body>
</html>
common.html is an empty html file.
app.js:
var app = angular.module('myApp', [
'ngRoute',
'ngSanitize',
'myApp.constant',
'myApp.messages'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'template/main.html',
controller: 'mainCtrl'
})
// Containing other sub whens...
/////////////////////////////
.otherwise({redirectTo: '/common/:channelTag'});
}]);
commonController.js:
'use strict';
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/common/:channelTag', {
templateUrl: 'template/common.html',
controller: 'commonCtrl'
});
}])
.controller('commonCtrl', ['$scope', '$location', '$http', '$rootScope', '$routeParams', 'commonConstant', 'information', 'Utils', 'MetaService'
, function($scope, $location, $http, $rootScope, $routeParams, commonConstant, information, Utils, MetaService) {
$scope.isDataLoading = true;
var channelTag = $routeParams.channelTag;
if(!Utils.isEmpty(channelTag)){
information.channelTag = channelTag;
}
}])
.service('MetaService', function() {
var metaViewport = '';
return {
set: function(newViewport) {
metaViewport = newViewport;
},
metaViewport: function() { return metaViewport; }
}
});
What is the problem when running through file transfer protocol even I set the chrome option with disable-security?
And why I get the error only when the url ends with '~#common/abc' ?
Any suggestions are welcome, please.
2 answers
solution1
2 2017-02-20 16:32:24
在项目中包含ui.bootstrap.tpls将解决上述问题
solution2
0 2016-01-06 04:11:20
Oops, I solved this problem myself.
It was due to common.html with empty code, so some browsers could not find the template contents. Adding a <div> tag in that file, no error found.
Wish it be helping someone...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.