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

Question

我想将Angular 4客户端应用程序与Java Spring应用程序集成在一起，该应用程序正在http://localhost:8080/并提供一些Restendpoint。我的目标是能够通过url调用Angular应用程序http://localhost:8080/adminisitration。我该怎么做？

提前谢谢，

Answer 1

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

SampleMultiModuleProject
 |__SampleMultiModuleService
 |__SampleMultiModuleUI

在本例中，您将有三个不同的pom文件，如下所示。

SampleMultiModuleProject mainpom.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>

//在这里添加其余的依赖项。

样本服务pom。xml：（对于服务模块，添加springboot maven插件，使其可通过嵌入式tomcat执行，并添加服务模块中需要的其他依赖项，例如lombok）

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

最后配置用户界面模块来构建角度像SampleMultiModuleUIpom.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安装时，它将触发ui模块的构建，该模块反过来使用前端生成器安装一个本地npm，该npm运行参数中指定的命令。包。默认情况下，angular应用程序中的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将输出路径设置为项目中服务模块下的resources文件夹，以便在那里创建资产。

  "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 2

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

第二，你在nginx上有angular静态资源，spring boot应用可以通过nginx上配置的angular-Through反向代理访问

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

所以当角请求GEThttp://localhost/api/somerest时，它会将其转发到GEThttp://localhost:8080/api/somerest

Answer 3

您需要创建ng应用程序，并将其放在Spring Boot文件夹中：

>

在您的Spring Boot项目的资源下创建一个公共文件夹

ng build--prod，在angular project上键入此命令，它将在angular project目录下创建一个dist文件夹

从dist文件夹中复制文件，并将其放在Spring启动项目资源下的公共文件夹中。

这将帮助你在Spring启动下运行你的角应用程序。

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