CODEWITHSUNDEEP
angularspring-boottomcatwarangular7
Valerii Sloboda
Valerii Sloboda

Reputation: 128

Angular 404 error after refresh in Tomcat

How to fix 404 error after refreshing in Tomcat? All works fine until you go to http://localhost:8080/login and refresh your browser. After that my app doesn't see angular and does request to API. I have spring boot 2 app with angular 7. I need to add some rewrite rule.

p.s. I don't want to use hash location strategy.

Upvotes: 1

Views: 2733

Answers (2)

Valerii Sloboda
Valerii Sloboda

Reputation: 128

As @xcesco has answered, my final solution for Spring Boot:

First, I've moved all my angular files to the static directory, and then I've added:

    @Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
    
            registry.addResourceHandler("/**")
                    .addResourceLocations("classpath:/static/")
                    .resourceChain(true)
                    .addResolver(new PathResourceResolver() {
                        @Override
                        protected Resource getResource(String resourcePath,
                                                       Resource location) throws IOException {
                            Resource requestedResource = location.createRelative(resourcePath);
                            return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                                    : new ClassPathResource("/static/index.html");
                        }
                    });
        }
    }

Upvotes: 2

xcesco
xcesco

Reputation: 4838

I had to manage a similar problem: I'm developing a web application with Angular 6 frontend and Java backend (REST web service, Spring and MyBatis).

For the Spring configuration, I still use the XML configuration files.

In develop-mode, I work on 4200 port for client part and 8080 for backend (on Tomcat). No problem in this situation.

Then I merged the Angular app in war, in particular in the public folder. After this, when I run the application and I hit the F5 button, I receive a 404 error.

For public folder on Spring side I do the following configuration:

<mvc:resources mapping="/public/**" location="/public/">
    <mvc:resource-chain resource-cache="false">
        <mvc:resolvers>
            <bean class="com.example.web.AngularResourceResolver" />
        </mvc:resolvers>
    </mvc:resource-chain>
</mvc:resources>

The AngularResourceResolver is so defined:

import org.springframework.core.io.Resource;
import org.springframework.web.servlet.resource.PathResourceResolver;

public class AngularResourceResolver extends PathResourceResolver {

    @Override
    protected Resource getResource(String resourcePath, Resource location) throws IOException {
        Resource requestedResource = location.createRelative(resourcePath);     

        Resource defaultResource=location.createRelative("/index.html");
        Resource resource = requestedResource.exists() && requestedResource.isReadable() ? requestedResource : defaultResource;
        return resource;
    }
}

After applying this configuration, everything works fine even on Tomcat, even after pressing F5.

I hope this helps you.

Upvotes: 1

Related Questions