CODEWITHSUNDEEP
angularspring-boot
Stuti Kalra
Stuti Kalra

Reputation: 153

Angular + Springboot : How do I make the Routed angular app fallback to index.html from server side?

The front-end of my application is in Angular and the services are written using Spring Boot. My angular code and services code is hosted on two different urls.

Problem: When I reload any page, it gives me Error 404 not found.

I want to implement the solution mentioned in the following link under the server configuration part: https://angular.io/guide/deployment#fallback

How do I pass the index.html page from the server side to angular when they are hosted on 2 different links?

Upvotes: 1

Views: 877

Answers (1)

Bunyamin Coskuner
Bunyamin Coskuner

Reputation: 8859

I have developed an app which has the same architecture, i.e. Spring for backend, Angular for frontend.

What I'd like to in this scenario is to have a suffix for angular app as follows

@Controller
public class InitController {

    @GetMapping("/ng-app/**")
    public String handleNgApp(Model model) {
        return "ng-app/index";
    }

And provide following config as template resolver. I use thymeleaf but you can use anything.

@Bean
public SpringResourceTemplateResolver thymeleafTemplateResolver() {
    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setPrefix("classpath:/templates/"); // /WEB-INF/ or classpath:/templates/
    templateResolver.setSuffix(".html");
    templateResolver.setTemplateMode("LEGACYHTML5"); // HTML5 or LEGACYHTML5
    templateResolver.setCharacterEncoding("UTF-8");
    return templateResolver;
}

And finally, when I build my angular application, I set the output path as follows

ng build --prod -op=<root-directory-of-spring>/src/main/resources/templates/ng-app

-op aka output-path is for angular-cli to know where to put the complied resources.

With this setup, when user comes to your application and navigates to a child route, let's call it home, the address bar will look like this: yourdomain.com/ng-app/home.

When you hit refresh button, the browser will make a request to /ng-app/home which will be handled by InitController. Then, the angular app will be returned and angular will navigate to the route home. Everyone will be happy.

Upvotes: 1

Related Questions