如何将 Angular 4 应用程序与 Spring Boot 堆栈集成？

Question

我想将 Angular 4 客户端应用程序与在http://localhost:8080/上工作的 Java Spring 应用程序集成并提供一些 Rest 端点。 我的目标是能够从像http://localhost:8080/adminisitration这样的 URL 调用 Angular 应用程序。 我该怎么做？

提前致谢，

Answer 1

您需要构建您的 ng 应用程序并将其放在 spring-boot 文件夹中：

1. 在你的 spring-boot 项目中的 resources 下创建一个 public 文件夹

2. ng build --prod ，在你的 angular 项目上输入这个命令，这将在你的 angular 项目目录下创建一个 dist 文件夹

3. 从 dist 文件夹中复制文件并将其放在 spring-boot 项目资源下的 public 文件夹中。

这将帮助您在 spring-boot 下运行 angular-app。

然后点击 http://localhost:8080/adminisitration，它应该可以正常工作

Answer 2

有两种方法首先是您将 Spring Boot 应用程序中的 angular 应用程序作为静态资源提供，因此您需要将其打包到 jar 中，当您有两个不同的前端和后端存储库并且从维护中看起来不太好时，这并不容易观点。

其次是您在 nginx 上拥有 angular 静态资源，并且 spring boot 应用程序可以通过在 nginx 上配置的反向代理访问 angular

location /api/ {
    proxy_pass http://localhost:8080/api/;
}

因此，当 angular 请求GET http://localhost/api/somerest它会将其转发到GET http://localhost:8080/api/somerest

Answer 3

看一下本教程可能会帮助您链接

您也可以在本教程中使用angular cli并将其指向资源文件夹（您创建的文件夹，即前端），然后在maven pom.xml中将其设置为资源。

Answer 4

从 spring-boot 应用程序提供角度前端的最简单方法是拥有一个多模块项目。 然后自动化构建过程，在maven clean install全新maven clean install期间将 dist 文件夹从 ui 模块复制到服务模块中。这样，你可以有一个单一的可执行 jar 也可以为 angular 提供服务。例如，考虑以下项目结构：

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

Answer 5

据我了解，您的问题只是创建名为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 提供的默认端口

Answer 6

我认为最好的方法是将 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 上）

如果您需要更多信息，请添加评论。

希望有帮助

附注。 代理在客户端（angular 4 app）而不是在服务器端（java spring）处理