AngularJS - 错误：[$compile:tpload] 无法加载模板（Spring Boot）答案

【问题标题】：AngularJS - Error: [$compile:tpload] Failed to load template (Spring Boot)AngularJS - 错误：[$compile:tpload] 无法加载模板（Spring Boot）
【发布时间】：2021-05-23 23:34:40
【问题描述】：

我已经在网上检查过类似的问题，但没有一个能满足我的问题。我正在使用 angularjs 1.6.4 和 spring boot 构建一个简单的 SPA。

错误：错误：[$compile:tpload] 加载模板失败：test.html （HTTP 状态：404）

当我不将 ngRoute 添加到代码中时它工作正常，并且当我尝试使用路由运行它时它无法加载 html 模板。我的后端是带有 thymeleaf 模板 的 springboot（不确定这是否会导致某种问题），因为在 xampp 服务器中单独运行 UI 代码可以正确提供路由。

我最初认为我在 templateUrl 中提到了错误的路径。这是我的文件夹结构的样子。

为了减轻压力，我将整个 JS 代码添加到单个 index.html 中作为标记。

<!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>

在 test.html 文件中，我只有一个包含三个字段的表单。这里的问题是，当我加载 localhost:8080/ 时，test.html 本身没有加载，它会抛出这个错误。

错误：[$compile:tpload] 无法加载模板：test.html（HTTP 状态：404）

非常感谢任何帮助！

【问题讨论】：

标签： javascript angularjs spring spring-boot

【解决方案1】：

这是我解决问题的方法。我不确定我对这个问题的理解是否正确。如果有人对这个问题有更好的理解，请改进这个答案。

基本上，Spring Boot Thymeleaf templating engine 从 src/main/java 文件夹 结构中获取 .html 文件。但是当添加路由时，Spring Boot 应用程序期望所有 .html 文件都在 webapp 文件夹中。即 src/main/webapp.

将 .html 文件放入 webapp 文件夹后解决了该问题。 angularJS 路由代码没有问题。

【讨论】：