Spring Boot shows the String instead of the HTML file from an Angular2 Single Page app

Question

I'm trying to map all GET requests to unmapped url of the site to show the index.html file.

So, I created the following @RestController:

@RequestMapping(method=RequestMethod.GET)
public String redirectToIndex() {
    return "index.html";
}

My index.html is in resources/static/index.html. I also tried the following controller:

@RequestMapping(method=RequestMethod.GET)
public String redirectToIndex() {
    return "/static/index.html";
}

However, in both cases, browser literally shows the strings index.html and /static/index.html respectively instead of showing the html file. I tried a lot of different other approaches to similar questions here but can't get it to resolve... Please help.

EDIT:

My fill @RequestController class:

@RestController
public class FeedbackController {
    @Autowired
    private FeedbackService feedbackService;

    @RequestMapping(method=RequestMethod.POST, value="/feedback")
    public Feedback addFeedback(@RequestBody Feedback feedback) {
        return feedbackService.addFeedback(feedback);
    }

    @RequestMapping(method=RequestMethod.GET)
    public String redirectToIndex() {
        return "index.html";
    }

}

My pom.xml:

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.5.8.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</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>

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

Are you using jsps or Thymeleaf? – Abdullah Khan Nov 16 '17 at 06:28 — Abdullah Khan, Nov 16 '17 at 06:28

score 3 · Answer 1 · answered May 31 '18 at 01:38

3

In your controller, change

@RestController

to

@Contoller

That will render thymeleaf page instead of rendering string as output.

answered May 31 '18 at 01:38

Antony Genil Gregory

53
1
6

Umesh Morsu · Answer 2 · 2017-11-16T06:18:08.780

With @RestController annotation ResponseBody will be generated. In this case String will be generated as string instead of your view mapping.

In your case you will have to use @Controller and you will have to use redirect or create proper index.jsp and return "index"

Below is the code i can think of

add these into your application.properties

   spring.mvc.view.prefix=/WEB-INF/view/
   spring.mvc.view.suffix=.jsp

Add index.jsp under /main/webapp/WEB-INF/view folder. for controller add the following code

@Controller
public class MyController {

    @RequestMapping("/index")
     public String index() {
        return "index"
     }
}

sSaroj · Answer 3 · 2017-11-16T07:46:39.313

If you are using Thymeleaf as the template resolver in your SpringBoot Project.

e.g:

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

then put your index.html inside src/main/resources/templates. This is where Thymeleaf looks for the static resources!

Your RestController should have the following

@Controller
public class FeedbackController {
@Autowired
private FeedbackService feedbackService;

@RequestMapping(method=RequestMethod.POST, value="/feedback")
@ResponseBody
public Feedback addFeedback(@RequestBody Feedback feedback) {
    return feedbackService.addFeedback(feedback);
}

@RequestMapping(method=RequestMethod.GET)
public String redirectToIndex() {
    return "index";
}

}

You may need to put your Security config correct to have this accessible.

score 1 · Answer 4 · answered May 17 '18 at 18:06

If your controller to return html then the Controller should have @Controller annotation and not @RestController
Also you should check the location where your htmls are place, if you are using thymeleaf template engine your html should be inside src/main/resources/templates folder. Doing the above two things should solve your issue.

Spring Boot shows the String instead of the HTML file from an Angular2 Single Page app

4 Answers4