I've checked similar questions online for this, but none of them satisfied my issue. I'm building a simple SPA with angularjs 1.6.4 and spring boot.
Error: Error: [$compile:tpload] Failed to load template: test.html (HTTP status: 404 )
It is working fine when I don't add ngRoute to the code & it fails to load the html template when I try to run it with routes. My backend is springboot with thymeleaf template (not sure if this is causing issue of some sort) because running the UI code alone in xampp server provides the routing correctly.
I initially thought in the templateUrl I've mentioned the wrong path. Here is how my folder structure looks.
To reduce strain I've added my entire JS code in single index.html as a tag here.
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-app="app">
<ng-view></ng-view>
<script>
// Creating Routes (ngRoute)
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when("/", {
templateUrl : 'test.html',
controller : 'postcontroller'
}).when("/uploadPath", {
templateUrl : 'test1.html',
controller : 'uploadPath'
}).otherwise({
redirectTo : "/"
});
});
// Creating controller
app.controller("uploadPath", function($scope, $location) {
$scope.passthrough = function() {
$location.path('/uploadPath')
};
});
app.controller('postcontroller', function($scope, $http, $location) {
// be used to decide for showing PostResults
$scope.postDivAvailable = false;
// be used for decide for showing GetResults
$scope.getDivAvailable = false;
$scope.submitForm = function() {
// post URL
var url = $location.absUrl() + "api/config/save";
// prepare headers for posting
var config = {
headers : {
'Content-Type' : 'application/json',
'Accept' : 'application/json'
}
}
// prepare data for post messages
var data = {
xx: $scope.xx,
yyyy: $scope.yyyy,
zzzz: $scope.zzzzz
};
// do posting
$http.post(url, data, config).then(function(response) {
$scope.postDivAvailable = true;
$scope.postCust = response.data;
}, function error(response) {
$scope.postResultMessage = "Error Status: " + response.statusText;
});
// reset data of form after posting
$scope.xx= '';
$scope.yyyy= '';
$scope.zzzzz= '';
}
});
</script>
</body>
</html>
In the test.html file I just have a form with three fields. The problem here is that when I load localhost:8080/ the test.html itself is not loading & it throws this error.
Error: [$compile:tpload] Failed to load template: test.html (HTTP status: 404 )
any help is much appreciated!!