spring - 制作前端和后端(Angular 2 和 Spring)Maven 多模块项目

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/但是这家伙使用了一些我不想要的自己编写的“前端 maven 插件”。有人可以解释一下这些步骤或将我链接到不使用第三方资源但只清理 Spring 和 Angular2 的教程吗？

EDIT: when I posted this question, WebDevelopment was for the most part new to me. The below solution worked at the beginning, but for better scalability we decided to make separate projects later on: one FE project containing multiple Angular apps and many FE-libs (check out NRWL's NX for that). And one project for each BE-Microservice, each deployable separately in the CI-Pipelines. Google themselves go with the approach of one project for all the FEs and BEs, but they do have special requirements (all libs have to work with each other in the latest version) and they use the ABC-stack (Angular + Bazel + Closure) stack for that, which is not yet fully available for the public, but is worth keeping an eye on: https://github.com/angular/angular/issues/19058

Answer 1

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

为了两全其美，您可以按照您的想法开发一个多模块项目。

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

git 克隆 https://github.com/prashantpro/ng-jee.git

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

我们希望获取 Angular 2 输出(dist 目录)并将其映射到 UI 部分的 Web 应用程序项目中。

以下是在没有任何花哨的第三方插件的情况下如何做到这一点。 让我们以这个多模块项目结构为例:

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 创建了 Angular 应用程序:

ng 新的 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 全新安装

然后你会看到它首先构建 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

在此之前希望这会有所帮助!