Java 弹簧启动运行角度2

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

早些时候，我分别启动了应用程序—通过启动SpringBootApplication主方法启动SpringBoot应用程序（它在端口8080上开始侦听），Angular2—从命令行

npm start

运行（它通常在3000端口上启动）

现在我想让Maven用一个命令运行两个应用程序

角度4.0.0

弹簧防尘套1.5.4.1释放

我一直在努力申请和工作。 但在第一种情况下，只启动角度应用程序，是第二个唯一的休息

My 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": {}

---

您的package.json由npm使用，npm不是这里的基本工具

我建议你：

• 对于开发，请分别运行两个应用程序
• 生产：
  • 打包您的角度应用程序。例如，使用
  • 将包放到/src/main/resources/static下的spring启动项目
  • 运行SpringBoot应用程序，它将从静态资源为您的Angular应用程序提供服务

---

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

相反，我将在maven下管理整个构建，angular UI和spring boot应用作为单独的模块构建。构建将完全由maven管理，将角度UI构建委托给npm/gulp等使用。这可以添加为spring boot应用程序的依赖项，也可以将生成的输出复制到spring boot模块的目标目录

母体聚甲醛 创建一个新的父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>

Spring Boop应用程序模块 这应该与当前的spring引导模块相同，添加了新的父级和angular ui模块的依赖项

由于angular UI的构建版本打包在target/classes/static下，angular UI jar位于spring boot的类路径上，因此angular UI被打包到spring boot应用程序中

或者，您可以运行maven插件将资源从angular ui模块的build目录复制到spring引导模块的build目录。虽然我不喜欢将资源文件从一个模块复制到另一个模块 e、 g

maven资源插件
3.0.1
复制角度分量
进程类
复制资源
${project.build.outputDirectory}/static
${basedir}/./角度ui/target/classes/static
假的

---

tprebs提出的解决方案是有意义的，但两个maven模块是强耦合的（因为角度模块在spring boot模块中存放文件，这不是一个好的做法）

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

单maven模块进近（KISS） 假设spring引导源代码位于

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构建角度零件

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

com.github.eirslett
).
是的，我当然是指自动构建bundle和spring应用程序。很好，它可以工作，但当我手动刷新页面（例如localhost:8080/welcome）时，我会看到一个
白标签错误页面。当我浏览localhost:8080时-只需第一次手动刷新就可以了。在开发工具中，我看到所有的源代码都消失了。我希望您会看到白色标签错误页面，因为您没有映射到
/welcome
的任何控制器。如果角度状态提供程序中映射了
/welcome
，请尝试url localhost:8080/#/welcome/。这将从index.html加载angular应用程序，然后路由到映射到url“/welcome”的状态
{
  [...]
  "apps": [
    {
      "root": "src",
      "outDir": "../resources/static",
      [...]
    },
   [...]
  ]
}

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