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 Mohammad Motiullah
– Abdullah Mohammad Motiullah

2017-11-16 06:28:49 +00:00
Commented Nov 16, 2017 at 6:28 — Abdullah Mohammad Motiullah
– Abdullah Mohammad Motiullah, Commented Nov 16, 2017 at 6:28
Angular for the html

kovac
– kovac

2017-11-16 06:29:43 +00:00
Commented Nov 16, 2017 at 6:29 — kovac
– kovac, Commented Nov 16, 2017 at 6:29

Antony Genil Gregory · Accepted Answer · 2018-05-31 01:38:13Z

3

In your controller, change

@RestController

to

@Contoller

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

answered May 31, 2018 at 1:38

Antony Genil Gregory

631 silver badge6 bronze badges

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

Comments

Umesh Morsu · Accepted Answer · 2017-11-16 06:18:08Z

2

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"
     }
}

edited Nov 16, 2017 at 6:18

answered Nov 16, 2017 at 5:49

Umesh Morsu

333 bronze badges

1 Comment

kovac Over a year ago

Can you give a an example?

sSaroj · Accepted Answer · 2017-11-16 07:46:39Z

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.

Ruchi Pareek · Accepted Answer · 2018-05-17 18:06:05Z

1

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.

answered May 17, 2018 at 18:06

Ruchi Pareek

538 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related