页面刷新在 Angular 5 中使用 Spring Boot 应用程序给出 404答案

【问题标题】：page refresh is giving 404 in angular5 with springboot application页面刷新在 Angular 5 中使用 Spring Boot 应用程序给出 404
【发布时间】：2018-08-28 19:59:39
【问题描述】：

我有一个 web 服务在 springboot 的 8080 端口上运行。当我点击下面的 url 时它工作正常：

http://localhost:8080/app，我把网址重定向到下面：

http://localhost:8080/myHome/home

现在当我刷新页面时，我得到 404

下面是我的 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"
},

我曾尝试使用

中提到的 LocationStrategy

Angular 2: 404 error occur when I refresh through the browser ，但它不适合我。

【问题讨论】：

标签： spring-boot angular2-routing angular5

【解决方案1】：

我在 Spring Boot 2 中遇到了同样的问题。我已将资源解析器位置添加为静态目录，如果与任何文件都不匹配，则加载 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");
                    }
                });



}

【讨论】：

【解决方案2】：

将 { useHash:true } 添加到您的 routerModule，它对我有用：

导入：[RouterModule.forRoot(routes, { useHash:true})]

【讨论】：

【解决方案3】：

spring check 资源 /myHome/home 中出现错误，但没有找到

资源位置是 /app 所以你可以修复 -

1) Use hashRouting in angular application

或

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

【讨论】：

@Configuration public class StaticResourceConfiguration extends WebMvcConfigurerAdapter { public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(new String[]{"/**"}).addResourceLocations(new String[]{"file ：资源/静态/“}）； } public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/").setViewName("forward:/index.html"); } }
我试过第二个选项没有运气，仍然得到 404，哈希路由也不起作用
你能告诉我你在 Spring Boot 应用程序中的 angualrbuild 位置在哪里吗？
使用 pom.xml 构建 Angular 应用程序：install node and npminstall-node-and-npm目标> .......，它基本上是一个单体应用程序
可以在spring项目中创建一个resource文件夹，并把angualr build和registry.addResourceHandler(new String[]{"/**"}).addResourceLocations(new String[]{"file:resource /"});

【解决方案4】：

这是我找到的可行的解决方案：虽然这是在 kotlin 中。但不难改变。

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

希望这会有所帮助！主要代码是：

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())
}

【讨论】：