如何避免 404 错误与 Angular 7 单页应用程序在野蝇.

Question

我有一个前端项目，作为单页应用程序（SPA）使用Angular 7构建，它使用Wildfly上托管的Java REST API（同一服务器上还有其他项目）。我们最近将此SPA从Apache移至Wildfly，以便在HTTPS下提供服务。一切正常，除非用户按 F5 或以任何其他方式刷新页面;在这种情况下，他或她陷入 404 错误，因为 SPA 希望导航始终保持在索引.html。

例如，如果我访问[server：port]/myspa

，它会正确加载并将我重定向到[server：port]/myspa/login。但是，如果我已经在 [server：port]/myspa/login 中并刷新页面，我就会陷入 404。

我已经在独立中尝试了一些配置.xml但不起作用，例如在波纹管等欠流子系统中设置过滤器：

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

有谁知道如何将 [server：port]/myspa/* 的请求重定向到索引.html？

Answer 1

我发现解决这个问题的一个简单方法是：安装咕噜声.js和咕噜声战争。

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

在

项目的根文件夹中创建 Gruntfile.js 文件，内容如下（不要忘记将 [myapp] occurrency 替换为您自己的项目信息）

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 上正常部署它，刷新页面将按预期工作。

Answer 2

不需要咕噜

咕噜。只需将此内容添加到WEB-INF/web.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
     version="4.0">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>
</web-app>