部署Angular+Spring Boot到Tomcat遇404及静态文件缺失问题求助

Let's break down where things went wrong and fix them step by step:

1. Angular构建与Maven资源复制的路径不匹配（核心问题） #

Your main headache comes from misalignment between your Angular build setup and how Maven copies static files into the WAR package:

• When you ran ng build –base-href /inj/ –prod, you told Angular to generate assets that reference paths starting with /inj/ (matching your WAR's context path inj). But your Maven plugin was copying the dist contents into ${project.build.directory}/${project.artifactId}-${project.version}/, which puts the Angular files outside the WAR's webapp root.
• Plus, Angular CLI by default builds into a subdirectory under dist (e.g., dist/inj if your Angular project is named inj). If you didn't adjust this, Maven was copying the entire dist folder structure instead of the actual static assets inside that subdirectory.

2. 多余的package.json操作 #

You don't need to copy package.json into dist or run npm install on the remote server. The dist folder already contains compiled, production-ready static assets—npm dependencies are only needed during local development and build time, not for running the deployed Angular app. This step was completely redundant and didn't fix your 404 issue.

3. Proxy配置仅用于开发环境 #

Your proxy.conf.json is only used by ng serve during local development to forward API requests. It has no effect when deploying the compiled Angular app to Tomcat, so you can ignore this file for production deployment.

修复步骤：解决404错误 #

Step 1: 修正Angular构建命令 #

首先，确保Angular构建将文件直接输出到dist根目录（而非子目录），并使用正确的base href：

ng build --base-href /inj/ --prod --output-path dist

--output-path dist参数确保所有静态资源（index.html、JS/CSS包）直接放在angular/dist文件夹下，而非嵌套子目录。

Step 2: 修复Maven资源插件配置 #

更新pom.xml中的资源插件，将Angular资源复制到WAR的webapp根目录（与web.xml同级）：

<build>
  <plugins>
    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-resources-plugin</artifactId>
      <version>2.4.2</version>
      <executions>
        <execution>
          <id>default-copy-resources</id>
          <phase>process-resources</phase>
          <goals>
            <goal>copy-resources</goal>
          </goals>
          <configuration>
            <overwrite>true</overwrite>
            <!-- 复制到WAR的webapp根目录 -->
            <outputDirectory>${project.build.directory}/${project.build.finalName}/</outputDirectory>
            <resources>
              <resource>
                <!-- 指向编译后的Angular资源目录 -->
                <directory>${project.basedir}/angular/dist</directory>
                <!-- 确保复制所有文件，而非仅文件夹 -->
                <includes>
                  <include>**/*</include>
                </includes>
              </resource>
            </resources>
          </configuration>
        </execution>
      </executions>
    </plugin>
  </plugins>
</build>

这样配置后，你的index.html、JS包和CSS文件会被放到inj.war的根目录，与存储web.xml的WEB-INF文件夹同级。

Step 3: 清理不必要的文件与操作 #

• 从dist文件夹中删除package.json——部署不需要它。
• 无需在远程服务器执行npm install，这步完全没用，只会浪费时间。

Step 4: 重新构建与部署 #

1. 在angular目录下重新运行修正后的Angular构建命令。
2. 在Spring Boot/Maven项目根目录执行mvn clean install。
3. 将生成的inj.war部署到远程Tomcat服务器。

Step 5: 验证访问路径 #

使用完整上下文路径访问你的应用：

http://<你的远程Tomcat地址>:8080/inj/

此时index.html应该能正常加载，JS/CSS包也会因为路径匹配你设置的--base-href而被正确找到。

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