部署至SpringBoot应用后Angular路由失效，报路由匹配错误

你遇到的是前端路由与后端路由冲突的典型场景：当直接访问/access这类Angular路由路径时，SpringBoot会把它当作后端API请求处理，找不到对应控制器就返回404，导致Angular路由系统无法接管请求，最终抛出Cannot match any routes错误。下面是具体的解决步骤：

1. 配置SpringBoot转发前端路由请求到index.html #

需要在SpringBoot中添加一个控制器，将所有非静态资源、非API的请求转发到Angular的入口文件index.html，让Angular路由接管处理。示例代码如下：

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

@Controller
public class ForwardController {

    // 匹配所有不带后缀的GET请求，转发到index.html
    @RequestMapping(value = "/**/{[path:[^\\.]*}")
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

这个配置会让SpringBoot忽略对前端路由路径的解析，直接把请求交给Angular处理。

2. 修正Angular打包命令的参数 #

你的打包命令里只设置了--deploy-url，但缺少关键的--base-href参数，这会导致Angular路由的基础路径解析错误。根据你的部署场景调整命令：

• 如果应用部署在根路径（比如http://localhost:8080/），打包命令应为：

ng build --base-href / --output-path ../backend/src/main/resources/static

• 如果应用部署在/BeatAcknowledgeTest子路径下，命令调整为：

ng build --base-href /BeatAcknowledgeTest/ --deploy-url /BeatAcknowledgeTest/ --output-path ../backend/src/main/resources/static

注意base-href的值必须以/开头和结尾，确保Angular能正确识别路由的基础路径。

3. 确认打包文件的存放路径 #

确保--output-path参数完整正确，最终打包后的Angular文件（index.html、各类js/css资源）要确实出现在SpringBoot项目的src/main/resources/static目录下，否则SpringBoot无法加载到前端页面。

额外注意事项 #

• 后端API接口建议统一以/api/开头，避免和Angular路由路径冲突，这样SpringBoot能准确区分API请求和前端路由请求。
• 测试时先通过根路径访问应用，再通过Angular导航菜单跳转到/access，或者刷新页面验证路由是否正常工作。

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