问题描述
如何创建带有Spring后端和Angular2前端的Maven多模块项目?分别使用spring initializr( https://start.spring.io )和角度cli似乎很简单，但是如何将其组织为具有链接但单独的pom文件的多模块Maven项目?我应以什么值以及按什么顺序创建和初始化这些值?如果可以简化事情，我可以使用Intellij IDEA，但我对CMD也很好(我在Windows上).
How do I create a Maven multimodule project with a Spring backend and Angular2 front-end? Using spring initializr (https://start.spring.io) and angular cli separately seems to be straightforward, but how do I organize that as a multi-module Maven project with linked but separate pom-files? With what values and in what order should I create and initialize those? I can use Intellij IDEA if it makes things easier, but i am also fine with CMD (I'm on windows).
我在这里找到的唯一教程是: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/，但是这个人使用了一些我不想写的自写的"frontend-maven-plugin".有人可以解释这些步骤或将我链接到一个不使用第三方资源但仅清理Spring和Angular2的教程吗?
The only tutorial I found on this is here: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ but the guy uses some self-written "frontend-maven-plugin" which I do not want. Can someone explain the steps or link me to a tutorial that doesn't use third-party-resources but just clean Spring and Angular2, please?
推荐答案
构建Angular 2应用程序的推荐方法是利用Angular CLI工具.同样，在处理Java EE项目时，通常将Maven用作构建工具.
The recommended way to build an Angular 2 application is to make use of Angular CLI tool. Similarly when you work with Java EE projects you typically use Maven as the build tool.
要充分利用这两个方面的优势，您可以开发一个多模块项目，如您所愿.
To get the best of both worlds you can develop a multi module project as you already figured.
如果您愿意，只需克隆此示例:
If you would like then just clone this sample:
git clone https://github.com/prashantpro/ng-jee.git
git clone https://github.com/prashantpro/ng-jee.git
鉴于前端/UI项目将是Angular 2应用程序.后端项目可以是Spring或纯Java EE应用程序(任何Web应用程序).
Given the frontend/UI project will be Angular 2 application.Backend project can be Spring or purely Java EE application (Any web app).
我们要获取Angular 2输出( dist 目录)，并将其映射到UI部分的Web应用程序项目中.
We want to take the Angular 2 output (dist directory) and map it into the web application project for the UI part.
这是您无需任何精美的第三方插件即可完成的操作.让我们以这种多模块项目结构为例:
Here's how you can do it without any fancy third party plugins.Lets take this Multi module project structure as an example:
cd ng-jee (这是您的父POM项目)
cd ng-jee (This is your parent POM project)
.
├── pom.xml
├── ngdemo
│ ├── pom.xml --- maven pom for angular module
│ ├── dist --- This will be Angular output
│ ├── e2e
│ ├── karma.conf.js
│ ├── node_modules
│ ├── package.json
│ ├── protractor.conf.js
│ ├── README.md
│ ├── src
│ ├── tsconfig.json
│ └── tslint.json
└── webdemo
├── pom.xml
└── src
父pom.xml需要列出两个模块. 第一个模块应该是UI(Angular 2)模块，然后是Java/Spring模块.
The parent pom.xml needs to list both modules. The first module should be the UI (Angular 2) module followed by the Java/Spring module.
重要部分如下所示 ng-jee/pom.xml
<packaging>pom</packaging>
<modules>
<module>ngdemo</module>
<module>webdemo</module>
</modules>
下一步，如果您是使用CLI像这样创建角度应用程序的:
Next, if you have created your angular app using CLI like this:
ng new ngdemo
ng new ngdemo
然后，您需要将pom.xml放在同一目录中 ngdemo/pom.xml 具有以下构建插件:(这将构建Angular CLI项目并在其 dist 文件夹中生成输出.
Then you need to place a pom.xml in that same directory ngdemo/pom.xmlHaving the below build plugins: (This will build the Angular CLI project and generate output in its dist folder.
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-clean-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<failOnError>false</failOnError>
<filesets>
<fileset>
<directory>.</directory>
<includes>
<include>dist/**/*.*</include>
</includes>
<followSymlinks>false</followSymlinks>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>angular-cli build</id>
<configuration>
<workingDirectory>.</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--prod</argument>
<argument>--base-href</argument>
<argument>"/ngdemo/"</argument>
</arguments>
</configuration>
<phase>generate-resources</phase>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
</build>
最后一个难题是引用此 ngdemo/dist 文件夹，以便我们可以将输出复制到我们的WAR文件中.
The last piece of the puzzle is to reference this ngdemo/dist folder so we can copy the output into our WAR file.
因此，这是在 webdemo/pom.xml
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
</resource>
</resources>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<failOnMissingWebXml>false</failOnMissingWebXml>
<webResources>
<resource>
<!-- this is relative to the pom.xml directory -->
<directory>../ngdemo/dist/</directory>
</resource>
</webResources>
</configuration>
</plugin>
</plugins>
</build>
现在，如果您从父目录 ng-jee
Now, if you build the project from the parent directory ng-jee
mvn clean install
然后，您将看到，它首先构建Angular项目，然后构建Web Project，同时为后者进行构建，还将Angular dist内容复制到Web项目的根目录中.
Then you will see that first it builds the Angular project then Web Project, while doing the build for the latter it also copies the Angular dist contents into the Web projects root.
因此，您会在WAR/Web项目目标目录中获得如下所示的内容:
So you get something like the below in the WAR/Web project target directory:
/ng-jee/webdemo/target/webdemo-1.0-SNAPSHOT.war
/ng-jee/webdemo/target/webdemo-1.0-SNAPSHOT.war
.
├── favicon.ico
├── index.html
├── inline.d72284a6a83444350a39.bundle.js
├── main.e088c8ce83e51568eb21.bundle.js
├── META-INF
├── polyfills.f52c146b4f7d1751829e.bundle.js
├── styles.d41d8cd98f00b204e980.bundle.css
├── vendor.fb5e0f38fc8dca20e0ec.bundle.js
└── WEB-INF
└── classes
就是这样.我将在其中一些方面进行一系列研究，并在此处 Angular和JEE
That's it. I will be doing a series on few of these aspects and more here Angular and JEE
然后希望这会有所帮助！
Till then hope this helps!
这篇关于制作前端和后端(Angular 2和Spring)Maven多模块项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！