page refresh is giving 404 in angular5 with springboot application

Question

I have a web service running in springboot on port 8080. when I hit below url it works fine:

http://localhost:8080/app , i redirect the url to below:

now when i refresh the page I am getting 404

below is the content of my index.html:

  <base href="/myHome">

package.json:

"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build --dev --deploy-url=\"/app/\"",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "protractor"
},

I had tried using LocationStrategy mentioned in

Angular 2: 404 error occur when I refresh through the browser , but its not working for me.

score 12 · Answer 1 · edited Feb 15 '20 at 16:35

I had the same problem in spring boot 2. I have added resources resolver location as static directory and if not matched with any file then load index.html

@Configuration
public class WebConfig 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");
                    }
                });



}

score 3 · Answer 2 · answered Sep 11 '19 at 14:26

3

Add { useHash:true } to your routerModule, it worked for me :

imports: [RouterModule.forRoot(routes, { useHash:true})]

answered Sep 11 '19 at 14:26

Saad Joudi

595
4
5

score 1 · Answer 3 · answered Mar 20 '18 at 05:27

1

It error occur cause by spring check resource /myHome/home in but there not found

resource location is /app so you can fix -

1) Use hashRouting in angular application

or

2) Redirect to '/' in springboot aplication when requesting came from another url /**

answered Mar 20 '18 at 05:27

Birbal Singh

1,062
7
16

@Configuration public class StaticResourceConfiguration extends WebMvcConfigurerAdapter { public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(new String[]{"/**"}).addResourceLocations(new String[]{"file:resource/static/"}); } public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("forward:/index.html"); } } – Birbal Singh Mar 20 '18 at 05:31
i tried second option no luck,still getting 404,hash routing too not working – Anand Mar 20 '18 at 05:44
can you tell me where is you angualrbuild location in spring boot application ? – Birbal Singh Mar 20 '18 at 05:50
doing build of angular application using pom.xml: install node and npm install-node-and-npm .......,its a monolithic application basically – Anand Mar 20 '18 at 06:05
You can create a resource folder in spring project and put angualr build and registry.addResourceHandler(new String[]{"/**"}).addResourceLocations(new String[]{"file:resource/"}); – Birbal Singh Mar 20 '18 at 06:07
it worked after using href as ./ and hashbang solution both – Anand Mar 22 '18 at 07:21

score 1 · Answer 4 · edited Oct 28 '22 at 05:42

This was the solution I found which works: This is in Kotlin though. But not hard to change between.

https://github.com/emmapatterson/webflux-kotlin-angular/blob/master/README.md

Hope this helps! The main code is:

import org.springframework.context.annotation.Configuration
import org.springframework.web.server.ServerWebExchange
import org.springframework.web.server.WebFilter
import org.springframework.web.server.WebFilterChain
import reactor.core.publisher.Mono

private const val INDEX_FILE_PATH = "/index.html"

@Configuration
internal class StaticContentConfiguration(): WebFilter {

    override fun filter(exchange: ServerWebExchange, chain: WebFilterChain): Mono<Void> {
        val path = exchange.request.uri.path
        if (pathMatchesWebAppResource(path)) {
            return redirectToWebApp(exchange, chain)
        }
        return chain.filter(exchange)
    }
    
    private fun redirectToWebApp(exchange: ServerWebExchange, chain: WebFilterChain) = 
    chain.filter(exchange.mutate()
        .request(exchange.request.mutate().path(INDEX_FILE_PATH).build())
        .build())

    private fun pathMatchesWebAppResource(path: String) =
        !path.startsWith("/api") && path.matches("[^\\\\.]*".toRegex())
}

page refresh is giving 404 in angular5 with springboot application

4 Answers4