Thymeleaf not displaying fragments-CodePudding

I am trying to learn Thymeleaf and when using th:fragment and th:replace or th:insert, nothing is displayed on the page. This is in intellij Idea using the spring boot framework.

What I've tried:

Changing routing on th:insert (ex. th:insert="fragments/test::test">)
Trying different code in the fragment
Changing test.html to include / not include
"xmlns:th="http://www.thymeleaf.org""
Stopping / restarting Apache Tomcat for every single change I make

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>SC2Hub</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>SC2Hub</name>
    <description>SC2Hub</description>
    <properties>
        <java.version>18</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

index.html:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <title>Title</title>
    </head>
    <body>
        <div th:insert="test::test"></div>
        <div th:replace="test::test"></div>
    </body>
</html>

test.html:

<div th:fragment="test">
  <h1>Hello from the fragment!</h1>
</div>

File structure:

project

--src

----resources

------static

--------index.html

------templates

--------fragments

----------test.html

CodePudding user response：

From the given code I see 2 issues. The first is that your index.html is not inside the templates folder, all files used by thymeleaf should be inside this folder unless you've overriden the default value of where thymeleaf looks for files.

After that as mentioned by @andrewJames fragment calls should be relative to the thymeleaf source folder (by default src/main/resources/templates) and in your case that would be <div th:replace="fragments/test::test"></div>