java-春季启动运行Angular2

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

之前,我是分别通过启动SpringBootApplication主要方法(它开始侦听端口8080)和Angular2来启动应用程序-Spring Boot的-从命令行npm start(通常在3000端口启动)运行.

现在,我希望Maven使用一个命令运行两个应用程序.

>角4.0.0
> Spring Boot 1.5.4.发布

我一直在尝试申请answer和this tutorial.
但在第一种情况下,仅启动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": {}

解决方法:

我同意sinedsem的观点,对于开发人员,我会将两个应用程序分开.至于管理生产版本,我做的事情会稍有不同.我不喜欢在构建过程中涉及任何手动步骤的想法,例如将构建文件从angular复制到spring boot应用程序的源.

取而代之的是,我将使用分别作为独立模块构建的angular ui和spring boot应用程序在maven下管理整个构建.该构建将完全由maven进行管理,使用frontend-maven-plugin将angular ui构建委派给npm / gulp等.可以将其作为依赖项添加到构建输出的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 / classs / static或将构建的角度资源复制到target / classs / 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 Boop App模块

这应该与当前的spring boot模块相同,只是增加了新的parent和angular-ui模块的依赖关系.

由于将角度UI的构建版本打包在target / classes / static下,并且angular-ui jar位于Spring Boot的类路径中,因此将Angular UI打包到spring boot应用程序中.

或者,您可以运行copy resources maven插件,将资源从angular-ui模块的build目录复制到spring-boot模块的build目录.虽然我不太喜欢将资源文件从一个模块复制到另一个模块
例如

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