从 URL 中删除哈希并在没有 404 错误的情况下刷新 - Angular 4.3.2 - JHipster答案

【问题标题】：Delete Hash from URL and refresh without 404 error - Angular 4.3.2 - JHipster从 URL 中删除哈希并在没有 404 错误的情况下刷新 - Angular 4.3.2 - JHipster
【发布时间】：2019-10-23 02:44:29
【问题描述】：

我有一个使用 JHipster 生成器、Angular 4.3.2 和 Spring 制作的项目。

所有这些都在一个单体应用程序中

在开发区，我使用 node 作为路由，使用 nginx 作为生产区。

这个项目在url后面有一个hashtag符号

http://example.com/#

我想在没有该符号的情况下在我的单页应用程序中导航，并刷新页面而不出现 404 not found 错误。

我让应用程序在没有替换所有这些符号的情况下运行

RouterModule.forRoot... {useHash: true}

到这里

RouterModule.forRoot... {useHash: false}

如何让应用程序刷新才能正常工作而不会出现错误 404？

【问题讨论】：

标签： angular spring refresh jhipster

【解决方案1】：

以下是为从 Angular 客户端的 URL 中删除哈希所做的所有更改。 https://github.com/ruddell/jhipster-examples/commit/2c31cf65eea96d45c8ed63845e2d96b04fb4b29f

重要部分如下：

添加 ClientForwardController，它将所有未映射的后端路由（任何不是 API 端点）转发到 index.html

    @Controller
    public class ClientForwardController {
        /**
         * Forwards any unmapped paths (except those containing a period) to the client index.html
         */
        @GetMapping(value = "/**/{path:^(?!websocket)[^\\.]*}")
        public String forward() {
            return "forward:/";
        }
    }

将 index.html 中的基本 href 更改为 /，如果您在上下文路径下部署，则必须在 webpack.common.js 中配置此值
对于生产环境中的 nginx，您必须将其配置为将未处理的 URL 发送到 index.html。 As documented，这是一个代理 API 并发送到 index.html 的示例：

server {
    listen 80;
    index index.html;
    server_name localhost;
    error_log  /var/log/nginx/error.log;

    root /usr/share/nginx/html;

    location /api {
        proxy_pass http://api.jhipster.tech:8081/api;
    }
    location /management {
        proxy_pass http://api.jhipster.tech:8081/management;
    }
    location /v2 {
       proxy_pass http://api.jhipster.tech:8081/v2;
    }
    location /swagger-ui {
        proxy_pass http://api.jhipster.tech:8081/swagger-ui;
    }
    location /swagger-resources {
        proxy_pass http://api.jhipster.tech:8081/swagger-resources;
    }
    location / {
        try_files $uri $uri/ /index.html;
    }
}

【讨论】：