Thymeleaf + Boot + AngularJS directives parser error

Question

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.

I'm not really a bootstrap expert, but isn't "dropdown" a CSS class? — Dave Syer
– Dave Syer, Commented May 12, 2014 at 18:45
No, that is an AngularJS directive which creates specified dropdown. — Reeebuuk
– Reeebuuk, Commented May 12, 2014 at 19:06
I'm not an angular user either, but I wonder why it requires you to write malformed xml. Maybe dropdown="true" would work? — Dave Syer
– Dave Syer, Commented May 12, 2014 at 21:00
try data-dropdown instead of dropdown. It should be valid HTML5 and dropdown isn't but a data-* attribute is. The latter should be supported by AngularJS. — M. Deinum
– M. Deinum, Commented May 13, 2014 at 7:40
@Deinum, not working cuz this is not a standard AngularJS attribute directive but Boostrap UI directive. Dave Syer that is the syntax od AngularJS, you can make your own custom html tags which angular replaces with another html after the page is loaded. — Reeebuuk
– Reeebuuk, Commented May 13, 2014 at 7:54

geoand · Accepted Answer · 2014-07-04 19:02:01Z

11

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

edited Jul 4, 2014 at 19:02

answered Jul 4, 2014 at 18:54

geoand

64.8k24 gold badges185 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Johnny Lim · Accepted Answer · 2015-02-08 08:36:12Z

9

In Spring Boot,

to use legacy HTML5 mode for Thymeleaf,

adding the following property in your 'application.properties':

spring.thymeleaf.mode=LEGACYHTML5

and adding the following dependency

in your 'build.gradle' (if you're using Gradle):

compile("net.sourceforge.nekohtml:nekohtml:1.9.21")

will be sufficient.

You can find a working example as follows:

https://github.com/izeye/samples-spring-boot-branches/tree/thymeleaf

and a related post as follows:

http://izeye.blogspot.kr/2015/02/orgxmlsaxsaxparseexception-attribute.html

answered Feb 8, 2015 at 8:36

Johnny Lim

5,8839 gold badges40 silver badges58 bronze badges

Comments

Tomo · Accepted Answer · 2014-05-13 11:34:38Z

4

Change your

@Bean
public ServletContextTemplateResolver templateResolver() { ... }

with

@Bean
public ServletContextTemplateResolver defaultTemplateResolver() { ... }

(notice default).

In your case, spring (boot) is not using your configuration for Thymeleaf thus you're getting this "strange" error about parsing non-standard attribute (since default parser is XHTML).

answered May 13, 2014 at 11:34

Tomo

6,8971 gold badge24 silver badges32 bronze badges

Comments

Carlos Rafael Ramirez · Accepted Answer · 2017-02-14 23:42:21Z

1

Without changing anything just make it XML compatible:

<div class="btn-group" dropdown="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>

Regards

answered Feb 14, 2017 at 23:42

Carlos Rafael Ramirez

6,3141 gold badge32 silver badges37 bronze badges

Collectives™ on Stack Overflow

Thymeleaf + Boot + AngularJS directives parser error

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related