My index.html file has the following structure:
<head>
...
<link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
<script th:src="@{/js/app.js}" type="script" async></script>
...
</head>
When rendered, it looks like this:
<link rel="stylesheet" type="text/css" href="/css/index.css">
<script src="/js/app.js" type="script" async="">
The file structure is displayed in the image below:
On visiting /index in the browser, the styles work but the JavaScript is not loaded.
I have tested different filenames and accessed /css/index.css and /js/app.js directly in the browser (which works fine). I also added the following code snippet, but it did not change the behavior:
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/css/**", "/js/**")
.addResourceLocations("classpath:/static/css/", "classpath:/static/js");
}
In the network tab of the browser, I can see that the web page loads index.css but not app.js.