我想将 Angular 4 客户端应用程序与在 http://localhost:8080/ 上工作并提供一些 Rest 端点的 Java Spring 应用程序集成。
我的目标是能够从像http://localhost:8080/adminisitration 这样的网址调用Angular 应用程序。我该怎么做？
提前致谢，
【问题讨论】：
标签： java spring angular rest spring-mvc
您需要构建您的 ng 应用并将其放在 spring-boot 文件夹中：
在你的spring-boot项目的resources下创建一个public文件夹
ng build --prod，在你的 Angular 项目上输入这个命令，它将在你的 Angular 项目目录下创建一个 dist 文件夹
从您的 dist 文件夹中复制文件并将其放在 spring-boot 项目资源下的 public 文件夹中。
这将帮助您在 spring-boot 下运行 angular-app。
然后点击 http://localhost:8080/adminisitration，它应该可以正常工作
【讨论】：
http://localhost:8080/adminisitration？您只是将应用添加到 ressource 文件夹中。
index.html 中base 标签的href 属性
首先有两种方法，即您将 Spring Boot 应用程序中的 Angular 应用程序作为静态资源提供服务，因此您需要将其打包到 jar 中，当您有两个不同的前端和后端存储库并且不希望使用时，这并不容易从维护的角度来看很好。
其次，你在 nginx 上有 angular 静态资源，并且 spring boot 应用程序可以通过 nginx 上配置的 angular thru 反向代理访问，例如
location /api/ {
proxy_pass http://localhost:8080/api/;
}
因此，当 Angular 请求 GET http://localhost/api/somerest 时，它会将其转发给 GET http://localhost:8080/api/somerest
【讨论】：
从 spring-boot 应用程序提供 Angular 前端的最简单方法是拥有一个多模块项目。然后自动化构建过程以在maven clean install 本身期间将 ui 模块中的 dist 文件夹复制到服务模块中。这样，您可以拥有一个也为 angular 服务的可执行 jar。例如，考虑以下项目结构：
SampleMultiModuleProject
|__SampleMultiModuleService
|__SampleMultiModuleUI
在这种情况下，您将拥有三个不同的 pom 文件，如下所示。
SampleMultiModuleProject main pom.xml :（所有主要依赖项都存在）
<modules>
<module>SampleMultiModuleUI</module>
<module>SampleMultiModuleService</module>
</modules>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/>
</parent>
//在此处添加其余的依赖项。
SampleMultiModuleService service pom.xml : (用于服务模块并添加springboot maven插件使其可以与嵌入式tomcat一起执行，并添加服务模块中需要的其他依赖项，例如lombok)
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
最后配置 ui 模块来构建 angular 像 SampleMultiModuleUI pom.xml ：
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.9.1</version>
<configuration>
<workingDirectory>./</workingDirectory>
<nodeVersion>v13.3.0</nodeVersion>
<npmVersion>6.13.1</npmVersion>
<nodeDownloadRoot>http://nodejs.org/dist/</nodeDownloadRoot>
<npmDownloadRoot>http://registry.npmjs.org/npm/-/</npmDownloadRoot>
<installDirectory>./</installDirectory>
<npmInheritsProxyConfigFromMaven>false</npmInheritsProxyConfigFromMaven>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<phase>generate-resources</phase>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<phase>generate-resources</phase>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>npm run-script build-prod</id>
<phase>prepare-package</phase>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
所以当你执行 maven clean install 时会发生什么，它会触发 ui 模块的构建，然后使用前端构建器安装一个本地 npm，该 npm 运行参数中指定的命令。默认情况下，您的 Angular 应用程序中的 package.json 文件将包含以下内容：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"stats": "webpack-bundle-analyzer dist/stats.json"
},
所以你实际上是通过这个过程调用这个ng build --prod。同样在angular.json中将output path设置为你项目中服务模块下的资源文件夹，这样资产就会在那里创建。
"newProjectRoot": "projects",
"projects": {
"SampleMultiModuleUI": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../SampleMultiModuleService/src/main/resources/static",
//rest of the config
【讨论】：
据我了解您的问题只需创建名为 proxy.config.json 的新文件并将以下代码粘贴到该文件中，将文件放在 .angular-cli.json 旁边
{
"/": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
要点击 url 到后端服务器，不要使用 http://localhost:8080/administration 而是使用 /administration，因为我们在代理文件中使用 http://localhost:8080/。
在app.component.ts 文件中的代码下面放在ngOnInit() 中
this.http.get('/adminisitration',someRequestOption).subscribe(res =>{
console.log('happy...!');
})
启动后端服务器：（端口8080上的tomcat）和
启动前端服务器：
ng serve --proxy-config proxy.config.json 打开浏览器并输入 url http://localhost:4200 您将看到服务器和客户端的日志（如果有）。
注意： 以上端口是 spring boot 和 angular 4 提供的默认端口
【讨论】：
我认为最好的方法是将 angular 4 应用程序和 java spring 应用程序分开。
在我的例子中，java spring 应用程序是 API 通过代理处理来自 angular 4 应用程序的所有请求（angular-cli 代理 -> 易于配置）。
Node.js 上的 Angular 4 应用程序，在 Visual Studio 代码中开发，以及在 Eclipse 中开发的嵌入式 tomcat（undertow）上的 java spring。它们可以位于单独的服务器上（例如，我的 Angular 4 应用程序位于 localhost:4200 而 java spring API 位于 http://mydomain.ch:8900）
如果您需要更多信息，请添加评论。
希望有帮助
PS。代理在客户端（angular 4 app）而不是在服务器端（java spring）处理
【讨论】：