Spring Boot集成Angular项目如何从后端控制器跳转至Angular路由页面

Angular默认使用HTML5 History模式实现客户端路由，路径无#锚点标识，用户直接在浏览器访问/pageone这类路径时，请求会先提交到Spring Boot服务端，服务端没有匹配的接口就会返回404错误。

方案1：通过WebMvc配置统一forward前端路由（无跳转、地址不变，最优） #

新增Spring MVC配置类，将前端路由路径直接转发到index.html，不需要重定向，地址栏路径保持不变，Angular加载完成后会自动解析路由渲染对应页面：

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

@Configuration
public class AngularRouteConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 适配已知的前端路由
        registry.addViewController("/pageone").setViewName("forward:/index.html");
        registry.addViewController("/pagetwo").setViewName("forward:/index.html");
        
        // 如有大量前端路由，可以用通配符匹配所有无后缀的路径，排除静态资源请求
        // registry.addViewController("/**/{path:[^\\.]*}").setViewName("forward:/index.html");
    }
}

注意：通配符规则[^\\.]*会自动过滤带后缀的静态资源请求（如.js、.css、.png等），不会影响资源加载。

方案2：通过Controller实现路由转发 #

如果不想新增配置类，也可以直接在Controller中添加路由匹配接口：

@GetMapping("/**/{path:[^\\.]*}")
public String handleAngularRoutes() {
    return "forward:/index.html";
}

备选方案：修改Angular路由为Hash模式（无需改后端代码） #

如果不想修改后端逻辑，可以把Angular的路由改为HashLocationStrategy，路径会自动携带#锚点，服务端只会处理#之前的根路径，不会出现404问题。修改Angular的路由配置即可：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

该方案的缺点是访问路径会带有#标识，比如http://localhost:8080/#/pageone。

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