Spring Boot运行Angular2

Question

Spring Boot运行Angular2

javaspringangularmaven

3

我有一个使用Spring Boot应用程序作为REST客户端的Angular2应用。

以前，我是分别启动两个应用程序的 - Spring Boot通过启动SpringBootApplication主方法（它开始监听8080端口），Angular2 - 从命令行运行npm start（通常在3000端口上启动）。

现在我想要Maven用一个命令来运行这两个应用程序。

Angular 4.0.0
Spring Boot 1.5.4.RELEASE

我一直在尝试应用答案和这个教程。但是在第一种情况下只启动了Angular应用程序，在第二种情况下只启动了REST应用程序。

我的package.json：

"scripts": {
    "build": "tsc -p src/",
    "build:watch": "tsc -p src/ -w",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve --proxy-config proxy-config.json\" ",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/material": "^2.0.0-beta.7",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "angular-in-memory-web-api": "~0.3.0",
    "angular2-modal": "^3.0.1",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "jsplumb": "^2.4.3",
    "ng2-bs3-modal": "^0.10.4",
    "ng2-popup": "^0.4.0",
    "rxjs": "5.0.1",
    "systemjs": "0.19.40",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "concurrently": "^3.2.0",
    "lite-server": "^2.2.2",
    "typescript": "~2.1.0",
    "canonical-path": "0.0.2",
    "tslint": "^3.15.1",
    "rimraf": "^2.5.4",
    "@types/node": "^6.0.46"
  },
  "repository": {}

- Markiza

3个回答

1

您的package.json文件由npm使用，但这并不是本次操作的主要工具。

我建议您：

在开发过程中分别运行两个应用程序。
对于生产环境：
- 将您的Angular应用程序打包成捆绑包。例如，使用webpack。
- 将您的捆绑包放置在Spring Boot项目的/src/main/resources/static目录下。
- 运行Spring Boot应用程序，它将从静态资源中提供您的Angular应用程序。

- sinedsem

1

tprebs提出的解决方案很有道理，但两个maven模块之间耦合度很高（因为angular模块将文件存放在spring-boot模块中，这不是一个好的做法）。

保持简单愚蠢原则，如果是单一团队开发前端和后端，则单个maven模块就足够了。例如：

单个maven模块方法（KISS）

假设spring boot源代码位于src/main/java文件夹中，angular代码位于src/main/js文件夹中。

src/main/js/angular-cli.json文件：

将Angular应用程序作为spring boot静态资源提供。

{
  [...]
  "apps": [
    {
      "root": "src",
      "outDir": "../resources/static",
      [...]
    },
   [...]
  ]
}

pom.xml :

使用 npm 从 maven 构建 Angular 部分

<plugin>
    <!-- build UI angular -->
    <groupId>com.github.eirslett</groupId>
    <artifactId>frontend-maven-plugin</artifactId>
    <version>1.0</version>
    <executions>
        <execution>
            <id>install node and npm</id>
            <goals>
                <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
                <workingDirectory>src/main/js</workingDirectory>
                <nodeVersion>v6.9.2</nodeVersion>
                <npmVersion>4.1.1</npmVersion>
            </configuration>
        </execution>

        <execution>
            <id>npm install</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <!-- Optional configuration which provides for running any npm command -->
            <configuration>
                <workingDirectory>src/main/js</workingDirectory>
                <arguments>install</arguments>
            </configuration>
        </execution>

        <execution>
            <id>npm build</id>
            <goals>
                <goal>npm</goal>
            </goals>
            <!-- Optional configuration which provides for running any npm command -->
            <configuration>
                <workingDirectory>src/main/js</workingDirectory>
                <arguments>run-script build</arguments>
            </configuration>
        </execution>
    </executions>
</plugin>

另一方面，如果这两个团队是不同的，我确实会选择两个独立的Maven模块，但为了限制两个模块之间的耦合，我将把Angular部分发布为Webjar（请参见https://spring.io/guides/gs/spring-boot-cli-and-js）。

- Sébastien Helbert

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tprebs · Accepted Answer

我同意sinedsem的观点，在开发时我会保持两个应用程序分开。至于管理生产构建，我会做一些不同的事情。我不喜欢在构建过程中涉及任何手动步骤，比如将构建文件从angular复制到spring boot应用程序的源代码中。

相反，我会在maven下管理整个构建过程，使用独立模块构建angular UI和spring boot应用程序。构建将完全由maven管理，使用frontend-maven-plugin委派给npm/gulp等。这可以作为spring boot应用程序的依赖项添加，或者构建的输出可以复制到spring boot模块的目标目录中。

父POM

创建一个新的父POM

<project xmlns="http://maven.apache.org/POM/4.0.0"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>

<groupId>org.example.angularboot</groupId>
<artifactId>boot-ui-parent</artifactId>
<version>0.1</version>
<packaging>pom</packaging>

<modules>
    <module>spring-boot-app</module>
    <module>angular-ui-resources</module>
</modules>

Angular UI 模块

使用frontend-maven-plugin构建 Angular UI 模块，以执行任何 npm/bower/gulp 等构建步骤。将构建输出设置为target/classes/static或将构建的 Angular 资源复制到target/classes/static

例如，下面的插件会安装 node/npm 并运行所需的 npm、bower 和 gulp 步骤来构建 Angular 应用程序。

<plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.3</version>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                            <configuration>
                                <nodeVersion>v6.10.3</nodeVersion>
                                <npmVersion>4.6.1</npmVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>npm install</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <execution>
                            <id>bower install</id>
                            <goals>
                                <goal>bower</goal>
                            </goals>
                            <configuration>
                                <arguments>install --allow-root</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>gulp build</id>
                            <goals>
                                <goal>gulp</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                    </executions>
                </plugin>

Spring Boot 应用模块

这个模块应该与当前的 Spring Boot 模块相同，只是新增了一个新的父模块和 angular-ui 模块的依赖。

由于内置版本的 Angular UI 已经打包在 target/classes/static 目录下，而且 Angular-UI jar 包已经在 Spring Boot 的 classpath 中，所以 Angular-UI 会被打包到 Spring Boot 应用程序中。

另外，你还可以运行 copy resources Maven 插件将 angular-ui 模块的构建目录中的资源复制到 Spring Boot 模块的构建目录中。不过，我并不喜欢从一个模块复制资源文件到另一个模块。

<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.1</version>
<executions>
    <execution>
        <id>copy-angular-components</id>
        <phase>process-classes</phase>
        <goals>
            <goal>copy-resources</goal>
        </goals>
        <configuration>
            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
            <resources>
                <resource>
                    <directory>${basedir}/../angular-ui/target/classes/static</directory>
                    <filtering>false</filtering>
                </resource>
            </resources>
        </configuration>
    </execution>
</executions>