Как избежать ошибки 404 с приложением Angular 7 Single Page на Wildfly

Question

У меня есть интерфейсный проект в виде одностраничного приложения (SPA), созданного на Angular 7, который использует Java REST API, размещенный на Wildfly (на том же сервере есть другие проекты). Недавно мы перевели этот SPA из Apache в Wildfly, чтобы обслуживать его по протоколу HTTPS. Все работает хорошо, кроме случаев, когда пользователь нажимает клавишу F5 или обновляет страницу любым другим способом; в этом случае он или она попадает в ошибку 404, поскольку SPA ожидают, что навигация будет постоянно находиться в index.html.

Например, если я получаю доступ к [сервер: порт] / myspa , он корректно загружается и перенаправляет меня на [сервер: порт] / myspa / login . Но если я уже в [сервер: порт] / myspa / login и обновляю страницу, я застреваю в 404.

Я уже пробовал некоторые конфигурации в standalone.xml , которые не работали, например, установка фильтра внутри подсистемы undertow , как показано ниже:

<subsystem xmlns="urn:jboss:domain:undertow:4.0">
    ...
    <server name="default-server">
        ...
        <host name="default-host" alias="localhost">
            ...
            <filter-ref name="spa-to-index" predicate="equals(%s,404)" />            
        </host>
    </server>
    ...
    <filters>
        ...        
        <rewrite name="spa-to-index" redirect="true"
            target="http://localhost:8080/myspa/" />
    </filters>
</subsystem>

Кто-нибудь знает, как перенаправить запросы на [сервер: порт] / myspa / * в index.html?

Answer 1

Я нашел простой способ решить эту проблему: установить grunt.js и grunt war .

npm install -g grunt -cli
npm install grunt-war --save-dev

Создайте файл Gruntfile.js в корневой папке проекта со следующим содержимым (не забудьте заменить вхождения [myapp] информацией о вашем собственном проекте)

module.exports = function ( grunt ) {
    grunt.loadNpmTasks( 'grunt-war' );

    var taskConfig = {
        war: {
            target: {
                options: {
                    war_verbose: true,
                    war_dist_folder: 'warFile',   // Folder path seperator added at runtime. 
                    war_name: '[myapp]',      // .war will be appended if omitted 
                    webxml_welcome: 'index.html',
                    webxml_webapp_extras: ['<error-page><location>/index.html</location></error-page>'], 
//redirect the errors pages to index.html
                    webxml_display_name: '[myapp]'
                },
                files: [
                    {
                        expand: true,
                        cwd: 'dist/[myapp]', //the folder where the project is located
                        src: ['**'],
                        dest: ''
                    }
                ]
            }
        }
    };

    grunt.initConfig( taskConfig );
};

Затем запустите команду:

grunt war

Это упакует приложение Angular в файл .war, и вы сможете его нормально развернуть в Wildfly, и обновление страницы будет работать как положено,