Angular 17应用部署至Tomcat失败，求助解决方法

一、访问 localhost:8080/angular 出现404的解决办法 #

Angular 17采用了新的构建输出结构，默认构建产物的入口文件在dist/项目名/browser子目录下。你直接把dist/my-app整个目录复制到Tomcat的webapps并重命名为angular，Tomcat会找不到默认的index.html入口，导致404。

解决方式二选一：

• 方式1：调整文件复制路径
  直接将dist/my-app/browser下的所有文件，复制到Tomcat的webapps/angular目录中，而非复制整个dist/my-app目录。此时访问localhost:8080/angular就能直接命中入口文件。
• 方式2：修改Angular构建配置
  在项目根目录的angular.json中，找到projects -> 你的项目名 -> architect -> build -> options，修改outputPath并确认baseHref配置：

  "options": {
    "outputPath": "dist/angular",
    "baseHref": "/angular/",
    // 其他原有配置保持不变
  }
  

  执行构建命令ng build --configuration production，构建完成后直接把dist/angular整个目录复制到Tomcat的webapps下，无需额外重命名。

二、资源加载错误的排查与修复 #

若调整目录后仍出现资源加载失败，检查以下几点：

1. 确认base-href参数的正确性
   构建时的base-href必须和Tomcat中webapp的名称完全匹配，且结尾要带斜杠，避免路径拼接错误。正确的构建命令应为：

   ng build --configuration production --base-href=/angular/
   

2. 配置Tomcat处理单页应用路由刷新404
   Angular是单页应用，直接刷新路由页面会触发Tomcat的404，需添加配置：
   在webapps/angular/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_4_0.xsd"
            version="4.0">
     <error-page>
       <error-code>404</error-code>
       <location>/index.html</location>
     </error-page>
   </web-app>
   

3. 检查index.html中的资源路径
   打开webapps/angular/index.html，查看脚本、样式的引用路径，应均以/angular/开头，例如：

   <script src="/angular/main.xxxx.js" defer></script>
   

   若路径不符，重新执行带正确base-href参数的构建命令。

三、验证步骤 #

1. 停止Tomcat，清空webapps/angular目录
2. 重新执行正确的构建命令
3. 将构建产物（dist/my-app/browser下的所有文件）复制到webapps/angular
4. 启动Tomcat，访问localhost:8080/angular，测试页面加载与路由刷新是否正常

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