Question

如何使用Spring后端和Angular2前端创建Maven多模块项目？分别使用spring initializr（https://start.spring.io）和angular cli似乎很简单，但是我如何组织它作为一个多模块Maven项目与链接但单独的pom文件？我应该创建和初始化那些值和顺序？我可以使用Intellij IDEA，如果它让事情变得更容易，但我对CMD也很好（我在Windows上）。

我在这里找到的唯一教程就是：https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/但是这个人使用了一些自编的＆＃34; frontend-maven-plugin＆＃34;这是我不想要的。有人可以解释这些步骤或将我链接到一个没有使用第三方资源但只是清理Spring和Angular2的教程吗？

编辑：当我发布这个问题时，WebDevelopment对我来说是最新的。下面的解决方案在开始时工作，但为了更好的可扩展性，我们决定稍后进行单独的项目：一个包含多个Angular应用程序和许多FE-lib的FE项目（请查看NRWL's NX）。每个BE-Microservice都有一个项目，每个项目都可以在CI-Pipelines中单独部署。谷歌自己采用所有FE和BE的一个项目的方法，但他们确实有特殊要求（所有的库必须在最新版本中相互合作）并且他们使用ABC堆栈（Angular + Bazel + Closure）堆栈，但尚未完全公开，但值得关注：https://github.com/angular/angular/issues/19058

Answer 1

构建Angular 2应用程序的推荐方法是使用Angular CLI工具。类似地，当您使用Java EE项目时，通常使用Maven作为构建工具。

为了充分发挥这两方面的优势，您可以按照自己的想法开发一个多模块项目。

如果您愿意，只需克隆此示例：

git clone https://github.com/prashantpro/ng-jee.git

鉴于前端/ UI项目将是Angular 2应用程序。后端项目可以是Spring或纯Java EE应用程序（任何Web应用程序）。

我们想要获取Angular 2输出（ dist 目录）并将其映射到UI部件的Web应用程序项目中。

如果没有任何花哨的第三方插件，你可以做到这一点。让我们以这个Multi模块项目结构为例：

cd ng-jee （这是您的父POM项目）

.
├── 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模块。

重要部分如下所示的 NG-JEE / pom.xml的

<packaging>pom</packaging> <modules> <module>ngdemo</module> <module>webdemo</module> </modules>

接下来，如果您使用CLI创建了角度应用程序：

ng new ngdemo

然后你需要在同一个目录中放置一个pom.xml ngdemo / pom.xml 拥有以下构建插件:(这将构建Angular CLI项目并在其 dist 文件夹中生成输出。

<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文件中。

所以，这里需要做的是 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>  <directory>../ngdemo/dist/</directory> </resource> </webResources> </configuration> </plugin> </plugins> </build>

现在，如果您从父目录 ng-jee
构建项目
mvn clean install

然后您将看到首先构建Angular项目然后构建Web项目，同时为后者构建它还将Angular dist内容复制到Web项目根目录中。

所以你在WAR / Web项目目标目录中得到如下内容：

/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 and JEE

然后希望这有帮助！

制作前端和后端（Angular 2和Spring）Maven Multimodule Project

1 个答案: