Spring Boot+Angular应用导航异常：页面刷新无法加载组件

Angular是单页应用（SPA），正常页面跳转由前端路由RouterModule接管，不会向后端发送请求。但刷新页面时，浏览器会直接向服务器发送对应路径的GET请求，而Spring Boot后端没有匹配该路径的控制器方法，因此返回404，无法加载Angular的Page2组件。

方法1：Spring Boot配置请求转发（推荐，History模式） #

通过后端配置，将所有非API、非静态资源的GET请求转发到Angular的index.html，让前端路由重新接管页面渲染。

实现方式1：创建转发控制器

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

@Controller
public class SpaForwardController {
    // 匹配所有不带后缀的路径（排除静态资源如.js/.css等），转发到index.html
    @GetMapping(value = {"/page2", "/**/{path:[^\\.]*}"})
    public String forwardToIndex() {
        return "forward:/index.html";
    }
}

实现方式2：通过WebMvcConfigurer配置

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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 匹配所有非静态资源路径，转发到index.html
        registry.addViewController("/**/{path:[^\\.]*}").setViewName("forward:/index.html");
    }
}

注意：确保Angular打包后的index.html及静态资源放在Spring Boot的src/main/resources/static目录下，后端能正常访问到这些文件。

方法2：Angular启用Hash模式路由 #

修改Angular路由配置，使用Hash模式，此时URL会带上#（如http://localhost:8080/#/page2）。刷新时浏览器只会请求根路径，后端返回index.html后，Angular路由会解析#后的路径加载对应组件。

import { NgModule } from '@angular/core';
import { Routes, RouterModule, HashLocationStrategy, LocationStrategy } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

const routes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
  { path: '', redirectTo: '/page1', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }] // 启用Hash模式
})
export class AppRoutingModule { }

• History模式（方法1）：URL更简洁美观，符合现代Web应用风格，但需要后端配置转发规则，需注意排除API接口和静态资源路径，避免冲突。
• Hash模式（方法2）：配置简单，无需修改后端，但URL会带有#，对SEO友好度较低。

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