Angular项目打包为WAR后无法在Tomcat/Payara正常部署

你的核心问题是Angular静态资源路径与WAR上下文路径不匹配，导致部署后资源加载404，后端API正常说明服务端部署无问题，仅前端资源映射错误。以下是针对性的解决步骤：

1. 修正Angular Build的Base Href配置 #

Angular的base href决定了所有静态资源的根路径，必须与WAR部署后的上下文路径完全一致：

• 执行Build命令时，明确指定WAR的上下文路径（你的WAR名为paginacion，所以路径是/paginacion/）：

  ng build --prod --base-href="/paginacion/"
  

  注意：参数值必须加引号，且结尾带斜杠，避免路径解析错误。
• 无需手动修改Angular项目index.html中的<base href="/">，Build命令会自动替换该标签内容为指定的base-href值。

2. 调整静态资源在Maven项目中的存放位置 #

根据项目类型选择正确的目录：

普通Java Web项目（非Spring Boot） #

将Angular Build后dist/Georreferenciacion下的所有文件（包括js、css、assets、index.html等）直接复制到Maven项目的src/main/webapp目录下（与WEB-INF同级），不要放到子目录中。

Spring Boot项目 #

将上述文件复制到src/main/resources/static目录，Spring Boot默认会将该目录下的静态资源映射到应用根路径。

3. 确保Maven打包正确包含静态资源 #

检查pom.xml中的War插件配置，确保所有静态资源被正确打包：

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-war-plugin</artifactId>
    <version>3.3.2</version>
    <configuration>
        <warName>paginacion</warName>
        <!-- 确保webapp目录下所有资源被打包 -->
        <webResources>
            <resource>
                <directory>src/main/webapp</directory>
                <includes>
                    <include>**/*</include>
                </includes>
            </resource>
        </webResources>
        <!-- Spring Boot项目需添加以下配置，避免覆盖静态资源 -->
        <failOnMissingWebXml>false</failOnMissingWebXml>
    </configuration>
</plugin>

4. 验证部署后的路径一致性 #

• Build后验证：打开Angular Build生成的dist/Georreferenciacion/index.html，确认<base href="/paginacion/">已正确设置。
• War包验证：解压生成的paginacion.war，检查根目录下是否存在js、css等静态资源文件夹，路径层级正确。
• 部署后验证：访问http://localhost:8080/paginacion/，打开浏览器控制台，确认静态资源的请求路径为http://localhost:8080/paginacion/js/xxx.js这类带上下文前缀的地址，而非根路径请求。

额外排查点 #

• 如果是Spring Boot项目，检查是否有Security拦截器或自定义过滤器阻止了静态资源访问，需在配置类中允许静态资源路径：

  @Override
  public void configure(WebSecurity web) throws Exception {
      web.ignoring().antMatchers("/js/**", "/css/**", "/assets/**");
  }
  

• 确认服务器未修改WAR的上下文路径：Payara/Tomcat默认以WAR文件名作为上下文路径，若手动修改过服务器配置（如Tomcat的server.xml或Payara的部署设置），需同步调整Angular的base-href值。

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