[英]Spring boot run Angular2
我有一个 REST 作为 Spring Boot 应用程序和客户端作为 Angular2 的应用程序。
早些时候,我分别启动了应用程序 - Spring Boot 通过启动 SpringBootApplication 主方法(它开始侦听端口 8080),Angular2 - 从命令行npm start
运行(通常在 3000 端口上启动)。
现在我希望 Maven 用一个命令运行这两个应用程序。
我一直在尝试应用答案和本教程。 但在第一种情况下仅启动 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 应用程序的源。
相反,我将在 maven 下管理整个构建,将 angular UI 和 spring boot 应用程序构建为单独的模块。 构建将完全由 maven 管理,使用frontend-maven-plugin将 angular UI 构建委托给 npm/gulp 等。 这既可以作为依赖添加到 spring boot app 的构建输出,也可以复制到 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>
使用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 引导模块相同,但添加了新的父级和 angular-ui 模块的依赖项。
由于 angular UI 的构建版本被打包在 target/classes/static 下,并且 angular-ui jar 位于 spring boot 的类路径中,因此 angular-ui 被打包到 spring boot 应用程序中。
或者,您可以运行复制资源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>
你的 package.json 被 npm 使用,它不是这里的基本工具。
我推荐你:
tprebs 提出的方案是有道理的,但是两个 maven 模块是强耦合的(因为 angular 模块将文件存放在 spring-boot 模块中,这不是一个好的做法)。
保持简单愚蠢,如果是一个团队开发前端和后端,一个maven模块就足够了。 例如:
假设 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 模块,但是,为了限制两个模块之间的耦合,我将角度部分发布为 webjar(参见https://spring.io/guides /gs/spring-boot-cli-and-js )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.