制作前端和后端（Angular 2 和 Spring）Maven 多模块项目

问题描述 投票：0回答：2

如何创建具有 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-我不想要的插件”。有人可以解释一下这些步骤或将我链接到一个不使用第三方资源而仅使用干净的 Spring 和 Angular2 的教程吗？

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

spring maven angular spring-boot angular-cli
2个回答
16
投票

构建 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 需要列出这两个模块。 first 模块应该是 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 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

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

0
投票

如果后端是基于 spring 框架的，它可以利用 

ResourceHttpRequestHandler
，它将在可配置位置提供静态资源，例如。 /公共，/静态。那么maven唯一需要的就是，打包前端子模块，并使用上面的可配置路径（例如/public或/static）作为前端package/jar中的根级别。后端（Spring jar）原样。假设后端使用 Spring MVC（例如嵌入式 tomcat），那么它将按以下方式路由流量： 1. 对于静态资源，将其路由到前端包， 2. 对于后端，将其路由到后端包。

https://lwpro2.wordpress.com/2024/03/22/maven-multi-module-with-both-front-end-and-backend/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.