如何在JHipster项目中独立运行Spring Boot与Angular并解决前端空白页问题

1. 核对API代理配置 #

JHipster依赖代理转发前端API请求到后端，配置失效会导致页面加载异常：

• 打开前端根目录的 proxy.conf.json，确认后端地址指向http://localhost:8080，配置示例：

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  },
  "/management": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

• 检查 angular.json 的serve配置，确保已引用代理文件：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "your-app:build",
    "proxyConfig": "proxy.conf.json"
  }
}

修改后重启前端服务。

2. 配置后端CORS允许前端跨域 #

后端未授权4200端口跨域请求，会导致资源加载失败：

• 找到后端的WebConfigurer.java，修改addCorsMappings方法，添加http://localhost:4200到允许列表：

@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/api/**")
        .allowedOrigins("http://localhost:4200")
        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
        .allowedHeaders("*")
        .allowCredentials(true);
}

重启后端服务生效。

3. 查看浏览器控制台定位具体错误 #

空白页大多由资源加载失败或JS报错导致，按F12打开控制台：

• Network标签：若出现404，检查src/environments/environment.ts中的baseUrl和apiUrl是否正确：

export const environment = {
  production: false,
  apiUrl: 'http://localhost:8080/api'
};

• Console标签：若有语法或依赖错误，删除node_modules和package-lock.json，执行npm install重新安装依赖后重启前端。

4. 修复Angular与JHipster版本兼容问题 #

JHipster5.4.1默认Angular版本低于12，手动升级易引发冲突：

• 检查package.json中所有@angular/*依赖版本统一为12.x，调整后执行npm install。
• 若存在依赖冲突，执行npm audit fix自动修复，或手动调整依赖版本。

5. 使用JHipster原生开发命令 #

JHipster提供适配分离开发的命令，比单独启动更稳定：

• 后端启动：./mvnw -DskipTests
• 前端启动：npm run start:dev（自动加载代理配置，适配JHipster默认逻辑）

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