[FIXED] Thymeleaf TemplateInputException when loading html page

Issue

I have a html page where I use jQuery to load page content from a spring boot application

here is the project structure

I m using zuul as proxy I m confident about the Zuul Eureka configuration on my project

When I try to access my root project page (facturation.html) by calling in browser for localhost:9999/facturation I'm getting the following exception

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "root folder where all thymeleaf files/facturation.html")

Caused by: java.io.FileNotFoundException: ClassLoader resource "root folder where all thymeleaf files/facturation.html" could not be resolved at org.thymeleaf.templateresource.ClassLoaderTemplateResource.reader(ClassLoaderTemplateResource.java:130) ~[thymeleaf-3.0.6.RELEASE.jar:3.0.6.RELEASE] at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:223) ~[thymeleaf-3.0.6.RELEASE.jar:3.0.6.RELEASE]

java.io.FileNotFoundException: ClassLoader resource "root folder where all thymeleaf files/facturation.html" could not be resolved

My spring controller is as below

    @Controller
    public class LandingController {
    
        
        private static final Logger log = LoggerFactory.getLogger(LandingController.class);
    
        
    
        
        
        @Autowired
        private AppClientFeign appClientFeign;
        
        @Autowired
        private UserClientFeign userClientFeign;
    
    
        @RequestMapping("/")
        String home(Model model,Principal principal) {
            List<Menu> appMenus = appClientFeign.getAppMenus("facturation");
            model.addAttribute("applications", appClientFeign.getApps());
            model.addAttribute("applicationsHistory", appClientFeign.getAppsHistory(principal.getName()));
            model.addAttribute("currentUser", userClientFeign.getUserDetails(principal.getName()));
            if(log.isDebugEnabled()) {
                StringBuilder stringBuilder2 = new StringBuilder();
                stringBuilder2.append(appMenus);
                stringBuilder2.append("");
                log.debug(stringBuilder2.toString());
            }
            model.addAttribute("menuV", appMenus);
            model.addAttribute("addClientObject", AddClientDTO.builder().build());
            StringBuilder stringBuilder = new StringBuilder();
            stringBuilder.append(" hello world ****************** ---------------------- ************************ \n \n \n");
            stringBuilder.append(appClientFeign.getApps());
            if(log.isDebugEnabled())log.debug(stringBuilder.toString());
            return "facturation";
        }
    @RequestMapping("/html/{page}")
    String resolveHTML(Model model,Principal principal,@PathVariable String page) {
        List<Menu> appMenus = appClientFeign.getAppMenus("facturation");
        model.addAttribute("applications", appClientFeign.getApps());
        model.addAttribute("applicationsHistory", appClientFeign.getAppsHistory(principal.getName()));
        model.addAttribute("currentUser", userClientFeign.getUserDetails(principal.getName()));
        if(log.isDebugEnabled()) {
            StringBuilder stringBuilder2 = new StringBuilder();
            stringBuilder2.append(appMenus);
            stringBuilder2.append("");
            log.debug(stringBuilder2.toString());
        }
        model.addAttribute("menuV", appMenus);
        model.addAttribute("addClientObject", AddClientDTO.builder().build());
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append(" hello world ****************** ---------------------- ************************ \n \n \n");
        stringBuilder.append(appClientFeign.getApps());
        if(log.isDebugEnabled())log.debug(stringBuilder.toString());
        return page;
    }
    
    @RequestMapping("/html/{folder}/{page}")
    String resolveHTML(Model model,Principal principal,@PathVariable String page,@PathVariable String folder) {
        List<Menu> appMenus = appClientFeign.getAppMenus("facturation");
        model.addAttribute("applications", appClientFeign.getApps());
        model.addAttribute("applicationsHistory", appClientFeign.getAppsHistory(principal.getName()));
        model.addAttribute("currentUser", userClientFeign.getUserDetails(principal.getName()));
        if(log.isDebugEnabled()) {
            StringBuilder stringBuilder2 = new StringBuilder();
            stringBuilder2.append(appMenus);
            stringBuilder2.append("");
            log.debug(stringBuilder2.toString());
        }
        model.addAttribute("menuV", appMenus);
        model.addAttribute("addClientObject", AddClientDTO.builder().build());
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append(" hello world ****************** ---------------------- ************************ \n \n \n");
        stringBuilder.append(appClientFeign.getApps());
        if(log.isDebugEnabled())log.debug(stringBuilder.toString());
        return folder+"/"+page;
    }
    
}

My facturation.htl page is

<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="UTF-8"/>
    <title>Facturation - MDS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/loader.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/main.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/facturation.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/chart.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/menus.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/grid.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/tab.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/notify.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/print.js"></script>
    <script src="http://localhost:9999/MDS-WEB-RESSOURCE/js/check.js"></script>
    <script onloadstart="loadAdditionalData()" src="http://localhost:9999/MDS-WEB-RESSOURCE/js/facturationLoader.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/facturation.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/chart.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/grid.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/tab.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/notify.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/menus.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/dropdown.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:9999/MDS-WEB-RESSOURCE/css/check.css"/>   
</head>

    
<body>

<div id="overlay" class="overlay">
    <div class="form-container">
    </div>
</div>
    
<div style="height: 100%;">
    <div id="header" class="header">
    </div>  
    <div id="menu0" class="menu-V">
    </div>  
    <div class="container">
        <div id="menu0-func0-panel" class="main-panel" style="display: block;">         
        </div>
        <div id="menu0-func1-panel" class="main-panel">
        </div>      
        <div id="menu0-func2-panel" class="main-panel">
        </div>
        <div id="menu0-func3-panel" class="main-panel">
        </div>
    </div>
</div>
</body>
</html>

finally loader.js is as below

$(document).ready(function() {
    $("#header").load("http://"+document.location.host+"/facturation/html/facturation-header");
    $("#menu0").load("http://"+document.location.host+"/facturation/html/facturation-menu0");
    $("#menu0-func0-panel").load("http://"+document.location.host+"/facturation/html/facturation-menu0-func0-panel", function() {
        var option={
            parent: "#stat-container",
            type: "Pie",
            labels: ['FACTURES EN ATTENTE', 'FACTURES EN RETARD (- DE 30 JOURS)', 'FACTURES EN RETARD (+ DE 30 JOURS)'],
            data: [20, 15, 10],
            colors: ["#0ae1ff", "#067180", "#dd4d40"],              
            canvasWidth: 250,
            canvasHeight: 250,
            legendType: "value",
            legendPosition: "bottom", 
            legendUnit: "DZD",
            overlay: false                    
        };
        chart(option);
    });
    $("#menu0-func1-panel").load("http://"+document.location.host+"/facturation/html/facturation-menu0-func1-panel");
    $("#menu0-func2-panel").load("http://"+document.location.host+"/facturation/html/facturation-menu0-func2-panel");
    $("#menu0-func3-panel").load("http://"+document.location.host+"/facturation/html/facturation-menu0-func3-panel");
});

to be honest, I don't have the slightest clue why I m getting this, nor an idea about what should I do or try.

NB: I m using zuul and eureka as mentioned, my service is named facturation that why I'm adding facturation after zuul address so he knows which service to contact

Solution

using this question I configured thymeleaf to get my pages from the classpath

Answered By - Mohammed Housseyn Taleb