后端基于Java+STS，能否用STS开发Angular5？如何关联VS Code？

安全阿岳

2026-5-26

关于STS开发Angular 5及关联VS Code、CORS问题的解答

嗨，我来帮你梳理这些实际开发中常见的问题，给你一步步的解决方案：

一、能不能用STS开发Angular 5？当然可以！

STS本身是基于Eclipse的IDE，虽然主打Java/Spring开发，但完全支持前端项目开发，只是在前端生态的工具链集成上，体验不如VS Code那么轻量化，但用来开发Angular 5完全没问题。

要在STS里顺畅开发Angular 5，你需要先做好这些配置：

先安装基础依赖：确保本地已经安装了Node.js（建议选Angular 5兼容的Node版本，比如8.x-10.x），然后全局安装对应版本的Angular CLI：
```
npm install -g @angular/cli@1.7.4
```
（注：Angular 5对应的CLI稳定版本是1.7.x，别装错版本哦）
安装STS前端插件：打开STS，点击Help -> Eclipse Marketplace，搜索并安装Angular IDE或者Angular Tools插件，安装完成后重启STS，这样STS就能识别Angular项目结构、提供语法提示了。
创建/导入Angular项目：
- 新建项目：点击File -> New -> Other，在弹出的窗口里找到Angular相关的项目模板，跟着向导创建即可；
- 或者用终端创建：打开STS内置终端（Window -> Show View -> Terminal），直接运行ng new my-angular5-app生成项目，然后在STS里通过File -> Import -> Existing Maven Projects（如果项目用了Maven管理）或者General -> File System导入项目。
运行Angular项目：
- 最简单的方式是在终端里cd到项目根目录，执行ng serve；
- 也可以配置STS的运行任务：点击Run -> Run Configurations，新建一个npm类型的配置，选择项目根目录，在Command里选start（对应package.json里的start脚本），点击运行即可。

其实不需要复杂的“绑定”操作，因为前后端分离开发的场景下，两者可以各司其职，同时协作：

共享项目目录：在STS里右键后端项目，选择Show In -> System Explorer，找到前端项目所在的文件夹，然后在VS Code里打开这个文件夹，两边的文件修改会实时同步（因为都是操作本地同一份文件）。
设置文件关联：如果想在STS里快速用VS Code打开前端文件，可以配置外部编辑器：
1. 打开Window -> Preferences -> General -> Editors -> File Associations；
2. 选择.html、.ts、.css等前端文件类型，点击Add，选择VS Code的可执行文件作为关联编辑器；
3. 之后右键前端文件，选择Open With -> VS Code就能直接打开编辑了。
同步资源刷新：在STS里开启自动刷新，点击Window -> Preferences -> General -> Workspace，勾选Refresh using native hooks or polling，这样VS Code修改的文件会及时在STS的资源管理器里更新。

这是前后端分离开发中必然会遇到的问题：当你的Angular项目在http://localhost:4200运行，后端Spring Boot项目在http://localhost:8080运行时，前端调用后端接口会触发浏览器的跨域限制，也就是CORS错误。常用的两种解决方法：

后端配置CORS：
- 局部配置：在Spring Boot的控制器类或方法上添加@CrossOrigin(origins = "http://localhost:4200")注解，允许指定的前端域名访问；
- 全局配置：创建一个CORS过滤器Bean，统一配置允许跨域的域名、请求方法等，适合全项目的跨域需求。
使用Angular CLI代理：
- 在Angular项目根目录创建proxy.conf.json文件，内容示例：
```
{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}
```
- 修改package.json里的start脚本："start": "ng serve --proxy-config proxy.conf.json"；
- 之后前端调用/api/user/list这样的接口时，Angular CLI会自动把请求代理到http://localhost:8080/api/user/list，绕开浏览器的CORS限制。

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