Angular 5部署Tomcat，IE11/Edge刷新报404（不启用useHash）怎么解决？

这个问题我之前部署Angular应用到Tomcat时也踩过坑！不用useHash: true的核心矛盾在于：刷新页面时，IE/Edge会把Angular的路由路径当成Tomcat的物理资源路径去查找，而这些路径根本不存在，自然就返回404了。下面给你几个实用的解决方案：

方案一：配置Tomcat URL重写（最推荐） #

这个方法让Tomcat把非资源请求转发到Angular的入口文件index.html，由Angular路由接管处理，不会影响真实的资源请求：

1. 开启Tomcat的RewriteValve
   打开Tomcat安装目录下的conf/server.xml，找到<Host>标签，添加以下Valve配置：

   <Host name="localhost"  appBase="webapps"
         unpackWARs="true" autoDeploy="true">
       <!-- 新增这一行 -->
       <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
       ...
   </Host>
   

2. 创建重写规则文件
   在你的Angular项目打包后的WEB-INF目录下（如果没有就新建），创建rewrite.config文件，写入规则：

   # 如果请求的不是文件或目录，转发到index.html
   RewriteCond %{REQUEST_PATH} !-f
   RewriteCond %{REQUEST_PATH} !-d
   RewriteRule ^/(.*)$ /index.html [L]
   

   打包war包时，确保这个文件被包含在WEB-INF目录下。

方案二：利用Tomcat的404错误页 fallback #

如果不想修改Tomcat的全局配置，可以通过配置错误页，让所有404请求跳转到index.html：

在项目的WEB-INF目录下创建web.xml文件（如果已有则修改），添加以下配置：

<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_3_1.xsd"
         version="3.1">
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

⚠️ 注意：这个方案会把所有404请求（包括真正不存在的静态资源）都导向index.html，如果你的应用需要区分真实404场景，谨慎使用。

方案三：补全IE11的Polyfill #

IE11对HTML5 History API的支持不完善，这也可能导致路由刷新异常。确保你的src/polyfills.ts中导入了必要的polyfill：

// 基础ES6+ polyfill
import 'core-js/es6/array';
import 'core-js/es6/date';
import 'core-js/es6/function';
import 'core-js/es6/map';
import 'core-js/es6/number';
import 'core-js/es6/object';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/regexp';
import 'core-js/es6/set';
import 'core-js/es6/string';
import 'core-js/es6/symbol';
import 'core-js/es6/weak-map';
import 'core-js/es7/array';

// Web Animations polyfill（Angular动画需要）
import 'web-animations-js';

// 如果用到HttpClient，确保导入这个
import '@angular/common/http';

执行npm install core-js web-animations-js --save安装依赖后，重新打包部署即可。

总结 #

优先推荐方案一，它既能解决刷新404问题，又不会干扰真实的资源请求；同时配合方案三的polyfill，可以彻底解决IE11下的兼容性问题。

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