7

I want to make page using thymeleaf. But I have some problem with the static files. I've investigated questions(1,2,3) with similar problem, but it didn't help me.

I use Spring Boot framework in the application. My files look like: enter image description here

test.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <script src="js/test.js" th:src="@{/test.js}"/>
</head>
<body>
<button onclick="testFunction('test value')">Button</button>
</body>
</html>

test.js

function testFunction(test) {
    console.log(test);
}

Configuration class

@Configuration
@EnableWebMvc
public class WebMvcConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/**").addResourceLocations("classpath:/static/js/");
        super.addResourceHandlers(registry);
    }
}

And problem, when I load test.html file with javascript not loaded.

@GetMapping(value = "web/test")
public String getTestHtmlPage() {
    return "test";
}

enter image description here

/api/v1 is a configuration in application.properties => server.servlet-path=/api/v1

What do I do wrong? Can you help me?

Thanks all!

boden
  • 1,621
  • 1
  • 21
  • 42
  • 1
    You didn't include the error for test.js... Is it a 404? The actual path should just be `test.js` not `js/test.js` – Christopher Schneider Mar 06 '17 at 21:35
  • Yes, it is 404 error. When I changed to `` response status is 200, but in console appear a new error `Refused to execute script from 'http://localhost:8080/api/v1/web/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.` What is it mean? – boden Mar 06 '17 at 21:45
  • I don't know Thymeleaf, but looking at the [docs](http://www.thymeleaf.org/doc/articles/standardurlsyntax.html) indicates `th:href` applies to HTML content. Javascript is not HTML, so you should remove `th:href` and change `src` to `th:src` I guess. – Christopher Schneider Mar 07 '17 at 13:44
  • @ChristopherSchneider, ohh, yes, it's silly error, I changed to `th:src` i now receive 404 error, request to file look as `http://localhost:8080/api/v1/web/js/test.js`. I don't have this endpoint. – boden Mar 07 '17 at 21:59
  • It's the same as your original error... – Christopher Schneider Mar 07 '17 at 22:09
  • why the href? Also the path you are using is relative, have you tried ``? It works for me regardless of the controller url – Paizo Mar 08 '17 at 08:39
  • @Paizo That won't work due to the resource locations. If the resource location is mapped to `classpath:/static/` then `/js/test.js` will work. With the way it's configured, `/js/test.js` looks in `/js/js/test.js` – Christopher Schneider Mar 08 '17 at 14:23

1 Answers1

9

For a better understanding of registry.addResourceHandler("/**").addResourceLocations("classpath:/static/js/");

I wrote a more thorough answer here that discusses invalid resource location mappings. It didn't receive any upvotes, so I hope it's not terrible. :-)

In short, with the way you're mapping classpath:/static/js/, and then accessing, /js/test.js, you're telling Spring to look in /static/js/js/test.js.

What you probably want is classpath:/static/. In that case, when you try to access /js/test.js, it's looking in /static/js/test.js for the file instead.

As for Thymeleaf, I've never used it, but docs indicate you should load scripts with th:src instead of th:href. th:href appears to only be for HTML content.

Community
  • 1
  • 1
Christopher Schneider
  • 3,745
  • 2
  • 24
  • 38
  • Thanks for answer, I tried to make change according to your answer. I found problem in source. I use property `server.servlet-path` in the `application.properties`. The `server.servlet-path` mean path to controller and equals `/api/v1`. When did I make request without `server.servlet-path` property all works fine (url `http://localhost:8080/css/main.css`). If do request with `server.servlet-path` property then I will receive 404 error (url the same `server.servlet-path` property, but **I think it must be changed**). Maybe do you know? I can't find solution.. – boden Mar 09 '17 at 22:26
  • I was added `api/v1` to `th:href` and `th:src` and **it work**. Can I make it other way? When `server.servlet-path` will be change I also must to change path in the all `.html` files :-( – boden Mar 09 '17 at 22:55
  • I'm not really sure, as I have no experience with Thymeleaf. I'd suggest looking into the docs to find out how `th:href` and `th:src` resolve paths. It seems like they're not aware of the servlet-path. There's probably a setting so Thymeleaf is aware of the context root you can set. – Christopher Schneider Mar 12 '17 at 01:21