java 如何将 Angular 4 应用程序与 Spring Boot 堆栈集成？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45750276/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to integrate an Angular 4 app with a Spring Boot stack?
提问by Mario90
i would like to integrate an Angular 4 client app with a Java Spring application working on http://localhost:8080/and offering some Rest endpoints.
My goal is to be able to call the Angular app from a url like http://localhost:8080/adminisitration. How can I do that?
我想将 Angular 4 客户端应用程序与处理http://localhost:8080/并提供一些 Rest 端点的 Java Spring 应用程序集成。我的目标是能够从像http://localhost:8080/adminisitration. 我怎样才能做到这一点？
Thanks in advance,
提前致谢，
采纳答案by Akshay Srivastava
You would need to prod build your ng app and place that in spring-boot folder
您需要构建您的 ng 应用程序并将其放在 spring-boot 文件夹中
1. Create a public folder under resources in your spring-boot project
2. ng build --prod, type this command on you angular project which will create a dist folder under your angular project directory
3. copy files from you dist folder and place it in public folder under resources of your spring-boot project.
This will help you run your angular-app under spring-boot.
这将帮助您在 spring-boot 下运行 angular-app。
then hit http://localhost:8080/adminisitration, it should work fine
然后点击http://localhost:8080/adminisitration，它应该可以正常工作
回答by Rahul Singh
Take a look at this tutorial might help you link
看看这个教程可能会帮助你链接
You can also use angular cli in this tutorial and point it to a resource folder (the one you create... i.e. front end) then set up that as a resource in your maven pom.xml.
您还可以在本教程中使用 angular cli 并将其指向资源文件夹（您创建的文件夹...即前端），然后将其设置为您的 maven pom.xml 中的资源。
回答by S?awomir Czaja
There are two ways first is that you serve angular app from your spring boot application as static resources so you need to pack it into jar and that's not easy when you have two diffrent reposetories for frontend and backend and doesn't look to good from maintenance point of view.
有两种方法，首先是您将 Spring Boot 应用程序中的 angular 应用程序作为静态资源提供，因此您需要将其打包到 jar 中，当您有两个不同的前端和后端存储库时，这并不容易，而且维护起来也不好观点看法。
Second is that you have angular static resources on nginx and spring boot app is reachable to angular thru reverse proxy configured on nginx like
其次是您在 nginx 上拥有 angular 静态资源，并且 spring boot 应用程序可以通过在 nginx 上配置的反向代理访问 angular
location /api/ {
proxy_pass http://localhost:8080/api/;
}
location /api/ {
proxy_pass http://localhost:8080/api/;
}
so when angular asks for GET http://localhost/api/somerestit forwards it to GET http://localhost:8080/api/somerest
所以当 angular 要求GET http://localhost/api/somerest它转发它时GET http://localhost:8080/api/somerest
回答by Ananthapadmanabhan
The easiest way to serve an angular front-end from a spring-boot application , is to have a multi-module project. Then automate the build process to copy the dist folder from the ui module into the service module during maven clean installitself.This way, you could have a single executable jar that serves the angular as well.For instance, consider the following project structure :
从 spring-boot 应用程序提供角度前端的最简单方法是拥有一个多模块项目。然后自动化构建过程，将 dist 文件夹从 ui 模块复制到服务模块中maven clean install。这样，你就可以有一个单一的可执行 jar 来为 angular 提供服务。例如，考虑以下项目结构：
SampleMultiModuleProject
|__SampleMultiModuleService
|__SampleMultiModuleUI
In this case, you will have three different pom files like as follows.
在这种情况下，您将拥有三个不同的 pom 文件，如下所示。
SampleMultiModuleProject main pom.xml: (where all main dependencies are present)
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>
//add rest of the dependencies here.
//在这里添加其余的依赖项。
SampleMultiModuleService service pom.xml: (for service module and add the springboot maven plugin to make it executable with embedded tomcat, and add other dependencies that are needed in service module , for instance lombok)
SampleMultiModuleService 服务pom.xml：（对于服务模块并添加 springboot maven 插件使其可以通过嵌入式 tomcat 执行，并添加服务模块中所需的其他依赖项，例如 lombok）
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
and finally configure the ui module to build angular like SampleMultiModuleUI pom.xml:
最后配置 ui 模块以构建像 SampleMultiModuleUI 一样的 angular 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>
So what happens is when you do maven clean install, it will trigger the build of the ui module which in turn uses the frontend builder to install a local npm which runs the command specified in the arguments. The package.jsonfile in your angular application will by default contain something like :
因此，当您执行 maven clean install 时，会触发 ui 模块的构建，该模块反过来使用前端构建器安装本地 npm，该 npm 运行参数中指定的命令。package.json默认情况下，angular 应用程序中的文件将包含以下内容：
"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"
},
So you are essentially calling this ng build --prodthrough this process.Also in angular.jsonset the output pathas the resources folder under the service module in your project, so that the assets will be created there.
所以你本质上是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
回答by mo sean
as i understand your question just create new file named proxy.config.jsonand paste below code in that file, place file next to .angular-cli.json
据我了解，您的问题只是创建名为的新文件proxy.config.json并将其粘贴到该文件中的代码下方，将文件放在旁边.angular-cli.json
{
"/": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug"
}
}
for hitting url to backend server don't use http://localhost:8080/administrationinstead use /administrationas we use http://localhost:8080/in our proxy file.
in app.component.tsfile place below code in ngOnInit()
将 url 访问到后端服务器不要使用，http://localhost:8080/administration而是使用/administration我们http://localhost:8080/在代理文件中使用的方式。在app.component.ts文件下面的代码中ngOnInit()
this.http.get('/adminisitration',someRequestOption).subscribe(res =>{
console.log('happy...!');
})
start backend server: (tomcat on port 8080) and
启动后端服务器：（端口上的tomcat 8080）和
start frontend server:
ng serve --proxy-config proxy.config.jsonopen browser and type url http://localhost:4200you will see logs on server and client if any.
启动前端服务器：
ng serve --proxy-config proxy.config.json打开浏览器并输入 urlhttp://localhost:4200您将看到服务器和客户端上的日志（如果有）。
NOTE:above ports are default as provided by spring boot and angular 4
注意：上述端口是 spring boot 和 angular 4 提供的默认端口
回答by dev_in_progress
I think best way is to separate angular 4 app and java spring app.
我认为最好的方法是将 angular 4 应用程序和 java spring 应用程序分开。
In my case java spring app is API handling all requests from angular 4 app via proxy (angular-cli proxy -> easy to configure).
在我的情况下，java spring 应用程序是 API 通过代理处理来自 angular 4 应用程序的所有请求（angular-cli 代理 -> 易于配置）。
Angular 4 app on node.js, developed in visual studio code, and java spring on embedded tomcat (undertow) developed in eclipse. They can be on separated servers (eg. my angular 4 app is on localhost:4200 while java spring API is on http://mydomain.ch:8900)
node.js 上的 Angular 4 应用程序，在 Visual Studio 代码中开发，以及在 eclipse 中开发的嵌入式 tomcat (undertow) 上的 java spring。它们可以在单独的服务器上（例如，我的 angular 4 应用程序在 localhost:4200 上，而 java spring API 在http://mydomain.ch:8900 上）
If you need more info then add comment.
如果您需要更多信息，请添加评论。
Hope in helps
希望有帮助
PS. proxy is handled on client side (angular 4 app) not on server side (java spring)
附注。代理在客户端（angular 4 app）而不是在服务器端（java spring）处理
