制作前端和后端（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

直到那時希望這有幫助！