制作前端和后端(Angular 2和Spring)Maven Multimodule项目

Question

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

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

编辑:当我发布这个问题时,WebDevelopment对我来说是最新的.下面的解决方案在开始时工作,但为了更好的可扩展性,我们决定稍后进行单独的项目:一个FE项目包含多个Angular应用程序和许多FE-libs(请查看NRWL的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>
                        <!-- this is relative to the pom.xml directory -->
                        <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和JEE

直到那时希望这有帮助!