Angular转译.js文件在Tomcat服务器加载失败（404错误）求助

我之前碰到过几乎一模一样的坑，给你几个实操性的排查方向，应该能快速解决：

• 先核对JS文件的引用路径与实际存放位置
  打开你的登录页面HTML，把所有<script>标签的src路径和webapp目录下的文件结构逐一对比。比如如果你的转译JS都放在webapp/angular-dist文件夹里，但HTML里写的是./runtime.js，那肯定会404，得改成./angular-dist/runtime.js。别小看拼写错误，这是最常见的原因。

• 确保Maven构建时把Angular转译文件同步到部署目录
  如果你是把Angular编译输出到了项目根目录的dist文件夹（而不是直接生成到src/main/webapp），得让Maven在构建时自动把这些文件复制到war包的正确位置。可以在pom.xml里添加资源复制插件配置：

  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-resources-plugin</artifactId>
        <version>3.3.1</version>
        <executions>
          <execution>
            <id>copy-angular-build-files</id>
            <phase>process-resources</phase>
            <goals>
              <goal>copy-resources</goal>
            </goals>
            <configuration>
              <outputDirectory>${project.build.directory}/${project.build.finalName}</outputDirectory>
              <resources>
                <resource>
                  <directory>${project.basedir}/dist</directory>
                  <filtering>false</filtering>
                </resource>
              </resources>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
  

  把${project.basedir}/dist换成你实际的Angular编译输出目录，执行mvn clean install后，转译文件就会被自动打包到war包里。

• 检查Tomcat的应用上下文配置
  在IntelliJ的Tomcat配置面板里，看看Application context是什么值。如果是/my-login-app这种非根路径，那你的JS引用路径得加上这个前缀，比如<script src="/my-login-app/runtime.js"></script>；开发阶段也可以直接把Application context设为/，这样根路径访问更省心。

• 清缓存+重新部署
  浏览器缓存、Tomcat的旧部署文件都可能搞鬼。先按Ctrl+Shift+Delete清空浏览器缓存，然后在IntelliJ里执行mvn clean，再重新启动Tomcat部署项目，确保所有文件都是最新的。

• 通过Tomcat日志定位问题
  打开Tomcat安装目录下的logs/localhost_access_log.*.txt，看看404请求的具体路径是什么，再对比Tomcat/webapps/你的项目名下的实际文件结构，就能明确是路径写错了，还是文件根本没被部署上去。

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