Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Thymeleaf + Boot + AngularJS directives parser error

this should be an easy one but I can't find any solution for it.

I'm using Spring Boot 1.0.2 with Thymeleaf on Jetty to support my AngularJS application. But parser throws an exception when attribute directives are used.

pom.xml

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

<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
    <version>1.9.20</version>
</dependency>

Thymeleaf config

@Configuration
public class ThymeleafConfig {

    @Bean
    public ServletContextTemplateResolver templateResolver() {
        ServletContextTemplateResolver resolver = new ServletContextTemplateResolver();
        resolver.setPrefix("/templates/");
        resolver.setSuffix(".html");
        resolver.setTemplateMode("LEGACYHTML5");
        resolver.setCacheable(false);
        return resolver;
    }

    @Bean
    public ResourceBundleMessageSource messageSource() {
        ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
        messageSource.setBasename("messages");
        messageSource.setDefaultEncoding("UTF-8");

        return messageSource;
    }
}

Thymeleaf is working ok but it has a problem with attribute directives like this Bootstrap UI example:

<div class="btn-group" dropdown is-open="true">
    <button type="button" class="btn btn-primary dropdown-toggle">
        Button dropdown<span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

I receive this error

org.xml.sax.SAXParseException: Attribute name "dropdown" associated with an element type "div" must be followed by the ' = ' character.

Where can I tweak Thymeleaf to accept those kind of attributes?

EDIT

I've added nekoHTML parser for LEGACYHTML5 but still no result.

like image 779
Reeebuuk Avatar asked May 12 '14 18:05

Reeebuuk


People also ask

Can we use Thymeleaf with angular?

Thymeleaf and AngularJS are not mutually exclusive. You can certainly use them together, depending on what you are trying to accomplish.

Is angular better than Thymeleaf?

Angular is for development while Thymeleaf takes care of the design aspects. Moreover, Thymeleaf can be said to combine a template with data model and functionality to produce end-result while AngularJS provides actual functionality for an application.

Should I use Thymeleaf or react?

Both technologies are completely different. React provides so much, however Thymeleaf is just a template rendering library. If you want to make career in FE then learn React/Angular/Vue.. if you just want to build a crud with minimal learning curve then only go for Thymeleaf.

Is Thymeleaf a frontend or backend?

Thymeleaf is used to render the frontend, e-mail templates and also Handlebars fragments for the dynamic part of our EnSupply frontend. Even though Thymeleaf has a huge number of features, its learning curve is relatively flat. Due to its good integration into the Spring ecosystem can be productive from day one on.


1 Answers

An even easier way to enable to LEGACYHTML5 in Spring Boot (at least for version 1.1.3.RELEASE that I checked) is to simply add the property

spring.thymeleaf.mode=LEGACYHTML5

in one of the places Spring Boot looks for properties

(the first that comes to mind is application.properties).

Spring Boot's ThymeleafAutoConfiguration will take care of the rest

like image 102
geoand Avatar answered Oct 23 '22 02:10

geoand