Angular 2（Angular CLI）集成Java后端：如何从target目录启动服务？

嘿，我来帮你搞定这个问题！你想要让npm serve直接从target目录提供已经打包好的Angular文件，而不是默认编译src目录的代码对吧？下面有两种可行的方案，你可以根据自己的需求选择：

方案一：基于Angular CLI配置修改（保留Angular开发服务器特性） #

首先，确保你的Angular构建产物已经输出到target目录（你提到mvn clean install已经能做到这一点，不过还是建议确认下配置）：

• 打开项目根目录下的angular.json，找到projects -> [你的项目名称] -> architect -> build -> options -> outputPath，确认它指向target下的对应目录，比如"target/angular-dist"（如果还没设置，直接改成这个路径即可，这样ng build和Maven的构建都会把产物放到这里）。

接下来，添加一个新的Angular CLI服务目标，用来servetarget目录的静态文件：

1. 在angular.json的projects -> [你的项目名称] -> architect下，新增一个serve-target配置：

"serve-target": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "[你的项目名称]:build",
    "staticFilePath": "target/angular-dist", // 这里要和上面的outputPath保持一致
    "port": 4200 // 可选，指定服务器端口，默认就是4200
  }
}

2. 打开package.json，修改scripts里的serve命令，指向我们刚创建的新目标：

"scripts": {
  "serve": "ng run [你的项目名称]:serve-target"
}

现在执行npm serve，Angular的开发服务器就会直接从target/angular-dist目录加载已打包好的文件，而不会重新编译源码了。

方案二：使用http-server快速serve静态文件（简单直接） #

如果不需要Angular开发服务器的热重载等特性，只是想快速启动一个静态文件服务器，这个方案更省事：

1. 安装http-server作为开发依赖：

npm install --save-dev http-server

2. 修改package.json里的serve脚本：

"scripts": {
  "serve": "http-server target/angular-dist -p 4200 -o"
}

• 这里的-p 4200指定端口为4200（和Angular默认端口一致），-o会自动打开浏览器。

执行npm serve后，就会直接启动服务器，从target目录提供静态文件了。

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