Angular移除URL哈希后部署JBoss刷新页面异常问题求助

这个问题我之前帮好几个开发者解决过，核心原因是你用了Angular的HTML5路由模式（去掉哈希的那种），本地开发时Angular CLI的内置服务器已经帮你处理了路由重写，但部署到JBoss这类Java服务器时，服务器不知道该把这些客户端路由请求转发到index.html，所以刷新页面就会出现404或者异常。下面给你一步步的解决方案：

1. 修正构建时的base-href参数 #

你当前构建用的--base-href="dist"是错误的，因为你部署的是ROOT.war，应用会被映射到服务器的根路径（/）。正确的构建命令应该是：

ng build -op="app" --base-href="/"

这样生成的index.html里的<base href="/">才会正确指向应用的根路径，避免静态资源加载出错。

2. 配置JBoss的路由重写规则 #

我们需要让JBoss把所有非静态资源的请求都转发到index.html，让Angular的客户端路由来处理。推荐用以下两种方式之一：

方式一：使用jboss-web.xml配置（推荐） #

在你的Maven项目的WebContent/WEB-INF目录下创建jboss-web.xml文件，添加以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<jboss-web xmlns="http://www.jboss.com/xml/ns/javaee"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://www.jboss.com/xml/ns/javaee http://www.jboss.org/j2ee/schema/jboss-web_5_1.xsd">
    <context-root>/</context-root>
    <rewrite>
        <rewrite-rule>
            <rule-name>AngularRoutes</rule-name>
            <!-- 匹配所有不是静态资源的请求 -->
            <match-url>^(?!.*\.(js|css|html|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$).*$</match-url>
            <!-- 转发到index.html -->
            <substitution>/index.html</substitution>
            <redirect>false</redirect>
        </rewrite-rule>
    </rewrite>
</jboss-web>

这个规则会过滤掉所有静态资源请求（比如JS、CSS、图片），把其他所有路由请求直接转发到index.html，不会有跳转的痕迹，体验更好。

方式二：使用web.xml配置错误页面 #

如果上面的rewrite配置不生效，也可以通过捕获404错误来转发到index.html。在WebContent/WEB-INF/web.xml中添加以下配置：

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

这种方式是当服务器返回404时，跳转到index.html，虽然能解决问题，但用户会看到短暂的404状态，体验稍差。

3. 重新部署验证 #

按照上面的步骤修正构建命令，添加服务器配置文件后，重新打包成ROOT.war部署到JBoss。现在你访问IP/search，刷新页面应该就能正常加载对应的路由内容了。

内容的提问来源于stack exchange，提问作者Krishna