Удалить хэш из URL и обновить без ошибки 404 - Angular 4.3.2 - JHipster

Question

У меня есть проект с генератором JHipster, Angular 4.3.2 и Spring.

Все это в монолитном приложении

В области разработки я использую узел для маршрутизации и nginx для рабочей области.

Этот проект в URL имеет символ хэштега после URL

http://example.com/#

Я хочу перемещаться в приложении на одной странице без этого символа, а также обновлять страницу, не получая ошибку 404. Не найдено.

Я заставил приложение работать без символа, заменяющего все это

RouterModule.forRoot... {useHash: true}

К этому

RouterModule.forRoot... {useHash: false}

Как сделать так, чтобы приложение работало без ошибок 404?

Answer 1

Вот все изменения, внесенные для удаления хеша из URL-адреса для Angular-клиента.https://github.com/ruddell/jhipster-examples/commit/2c31cf65eea96d45c8ed63845e2d96b04fb4b29f

Важными частями являются следующие:

1. Добавление 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:/";
        }
    }

Измените базовый href в index.html на /, если вы развертываете по контекстному пути, вам придется настроить это значение в webpack.common.js

Для nginx в рабочей среде вы должны настроить его так, чтобы он отправлял необработанные URL-адреса в index.html. Как документировано , вот пример, который прокси для 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;
    }
}