从 URL 中删除哈希并刷新无 404 错误 - Angular 4.3.2 - JHipster

Question

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

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

在开发区我用node做路由，nginx做生产区

url 中的这个项目在 url

之后有一个标签符号

http://example.com/#

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

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

RouterModule.forRoot... {useHash: true}

对此

RouterModule.forRoot... {useHash: false}

如何使应用程序刷新正常运行而不会收到错误 404？

Answer 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[=17 中配置此值=]
对于生产中的 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;
    }
}

从 URL 中删除哈希并刷新无 404 错误 - Angular 4.3.2 - JHipster

Delete Hash from URL and refresh without 404 error - Angular 4.3.2 - JHipster

spring

refresh

jhipster

angular