如何将Angular 4与Spring MVC集成在同一服务器运行？

当然可行！这是前后端集成非常常见的场景，我给你梳理两种最实用的方案，覆盖开发阶段和生产部署两种场景：

一、生产环境：打包Angular并部署到Spring MVC静态资源目录 #

这是最终上线时的标准做法，把Angular编译后的静态文件直接放到Spring项目里，共用一个Java服务器（比如Tomcat）运行：

• 第一步：打包Angular项目
  在Angular项目根目录执行命令：

  ng build --prod
  

  执行完成后会生成一个dist文件夹，里面包含所有编译好的HTML、CSS、JS等静态资源。

• 第二步：复制静态资源到Spring项目

  • 如果是Spring Boot项目：把dist里的所有文件复制到src/main/resources/static目录下（如果没有static文件夹就新建一个）。
  • 如果是传统Spring MVC项目：把文件复制到webapp目录下的静态资源文件夹，比如webapp/static，或者根据你Spring配置的静态资源路径调整。

• 第三步：处理Angular路由刷新404问题
  因为Angular是单页应用，直接刷新路由页面会触发Spring的请求匹配，导致404。需要添加一个转发控制器，把所有非API的请求指向Angular的index.html：

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

  这样用户刷新Angular路由页面时，Spring会把请求转发到index.html，由Angular自己处理路由。

二、开发阶段：用Angular代理转发API请求 #

开发时不需要每次修改都打包部署，我们可以让Angular和Spring各自独立运行，通过Angular的代理配置把API请求转发到Spring服务器：

• 第一步：创建代理配置文件
  在Angular项目根目录新建proxy.conf.json，内容如下：

  {
    "/api/*": {
      "target": "http://localhost:8080",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
    }
  }
  

  这里的/api/*表示所有以/api开头的请求都会转发到Spring的localhost:8080。

• 第二步：启动Angular时启用代理
  执行启动命令时加上代理配置：

  ng serve --proxy-config proxy.conf.json
  

  之后你在Angular代码里调用API时，直接写/api/xxx就会自动转发到Spring的接口，不用再处理跨域问题。

这样不管是开发还是生产，都能实现二者在同一服务器（生产）或统一请求入口（开发）的集成啦！

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