使用 Angular 配置 Tomcat 8答案

【问题标题】：Configure Tomcat 8 with Angular使用 Angular 配置 Tomcat 8
【发布时间】：2025-11-25 01:20:09
【问题描述】：

我正在尝试在我的本地 apache tomcat 8 服务器上部署我的 Angular 应用程序。

我使用了 ng build --prod 并将 dist 的结果复制粘贴到这里。

Location of my app on server

我将<base href="/caquiweb/"> 放入我的 index.html。

所以，我可以访问我的应用程序，并且路由工作正常，但是在浏览器中手动将 URL 更改为定义的路由器路由时出现 404。

Working url by using routerLink

404 manually changing from browser

我认为我必须配置我的服务器，但我真的不知道该怎么做。

提前致谢

【问题讨论】：

标签： angular apache tomcat

【解决方案1】：

从我的角度来看最简单的解决方案：

在tomcat/webapps/caquiweb中添加WEB-INF/web.xml，内容如下：

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

这样 Tomcat 会在每次找不到 URL 时重定向到 index.html，这会导致 Angular 使用组件路由器来处理它。

【讨论】：

抱歉，这看起来不合法。如果你得到一个 real 404 怎么办？此外，我相信 Tomcat 会发送 index.html，但状态码仍为 404，这是不正确的（OK 响应必须为 200）
实际的 404 将由 Angular 路由器处理，您将在其中重定向到错误组件。我已经成功地为我的客户使用了该解决方案。我不会发布不起作用的东西。

【解决方案2】：

这个问题是因为 Angular 应用程序中的 PathLocationStrategy 路由。

您的应用程序的上下文路径是/caquiweb/。

您在 index.html 中的设置应该是 - <base href="/">

您必须使用 - ng build --base-href /caquiweb/ 构建应用程序

您必须如下配置深层链接到应用程序根 index.html 的重新路由 -

在 server.xml 中配置 RewriteValve
在rewrite.config中写入重写规则

server.xml -

...
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="true">

        <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

...
      </Host>
...

rewrite.config - (位置 - {tomcatHome}/conf/Catalina/localhost)

RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/caquiweb/(.*) /caquiweb/index.html

详细说明可以参考文章-Fixing deep linking issue – Deploying angular application on Tomcat server

【讨论】：

【解决方案3】：

您可以按照这篇精彩的帖子中所述以编程方式配置重写：https://levelup.gitconnected.com/packaging-your-spring-boot-and-angular-2-projects-together-a13a9c5efdb7。

这种方法的优点是您不需要更改服务器上的任何内容。您需要更改的唯一文件是您的部署描述符文件，在本例中是您的 web.xml 文件，以注册您的过滤器。另一个优点是您可以让 angular 能够仅处理其路线。因此，如果您尝试访问某个资源，例如服务器中的文件或端点，但该资源不存在，您将得到一个真正的 404。

【讨论】：