Question

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

所有这些都在Monolithic应用程序中

在开发区域中，我将节点用于路由，将nginx用于生产区域。

URL中的此项目在URL后带有井号标记

http://example.com/#

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

我使应用程序正常运行，而无需用符号替换所有

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

    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;
    }
}

从URL删除哈希并刷新而没有404错误-Angular 4.3.2-JHipster

1 个答案: