Angular + Spring Boot 参数化路由访问时静态资源404导致空白页问题求助

Hey，我刚好遇到过一模一样的问题，给你两个关键修复步骤，搞定后就能正常访问参数化路由了：

问题根源拆解 #

你遇到的其实是两个关联问题：

1. Angular静态资源用了相对路径，当路由嵌套（比如/message/100004）时，浏览器会把当前路由路径作为基准，导致资源请求变成/message/runtime.xxx.js这种错误路径
2. Spring Boot没有配置路由回退，直接访问Angular路由时，Spring会试图匹配自身的控制器接口，找不到就返回404，没把请求交给Angular路由器处理

第一步：修复Angular静态资源路径 #

先解决资源请求前缀错误的问题：

• 打开src/index.html，在<head>标签里添加一行：

  <base href="/">
  

  这会告诉Angular所有静态资源都从根路径/开始请求，不管当前路由是什么，资源路径都会变成http://localhost:9090/runtime.xxx.js这种正确格式。
• 或者在angular.json的构建配置里设置baseHref：

  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "baseHref": "/",
            // 其他配置...
          }
        }
      }
    }
  }
  

• 重新执行Angular构建命令：ng build --prod，把dist目录下的所有文件复制到Spring Boot项目的src/main/resources/static目录里。

第二步：配置Spring Boot路由回退 #

接下来让Spring把所有非API的页面路由请求转发给Angular的index.html：

方法一：用WebMvc配置类

创建一个配置类WebConfig.java：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 所有非静态资源的请求都转发到index.html
        registry.addViewController("/**")
                .setViewName("forward:/index.html");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // 确保静态资源能被正确访问
        registry.addResourceHandler("/**")
                .addResourceLocations("classpath:/static/");
    }
}

如果你的Spring Boot有自己的API接口（比如路径前缀是/api），可以修改转发规则，避免API请求被拦截：

registry.addViewController("/**")
        .setViewName("forward:/index.html")
        .setExcludePatterns("/api/**");

方法二：用回退控制器

如果不想写配置类，也可以直接写一个简单的控制器：

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class FallbackController {

    // 匹配所有不带后缀的请求（排除静态资源）
    @RequestMapping(value = "/**/{path:[^.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

这个正则表达式{path:[^.]*}会自动排除.js、.css、.png这类静态资源请求，只转发页面路由请求。

验证步骤 #

1. 重启Spring Boot项目
2. 访问localhost:9090/message/100004，此时静态资源会从根路径请求，同时Spring会把路由请求转发给Angular，页面就能正常加载了。

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