制作前端和后端(Angular 2 和 Spring)Maven 多模块项目 [英] Make front- and backend (Angular 2 and Spring) Maven Multimodule Project

问题描述

如何创建一个带有 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 对我来说大部分都是新的.下面的解决方案一开始是有效的，但为了更好的可扩展性，我们决定稍后制作单独的项目:一个包含多个 Angular 应用程序和许多 FE-libs 的 FE 项目(查看 NRWL 的 NX).每个 BE-Microservice 有一个项目，每个项目都可以在 CI-Pipelines 中单独部署.Google 自己对所有 FE 和 BE 都采用一个项目的方法，但他们确实有特殊要求(所有库必须在最新版本中相互配合)并且他们使用 ABC 堆栈(Angular + Bazel + Closure)堆栈，尚未完全向公众开放，但值得关注:https://github.com/angular/angular/issues/19058

解决方案

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

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

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

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

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

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

这是无需任何花哨的第三方插件即可完成的操作.让我们以这个多模块项目结构为例:

cd ng-jee(这是你的父 POM 项目)

<预><代码>.├── pom.xml├── ngdemo│ ├── pom.xml --- angular 模块的 maven pom│ ├── dist --- 这将是 Angular 输出│ ├── e2e│ ├── karma.conf.js│ ├── node_modules│ ├── package.json│ ├── protractor.conf.js│ ├── README.md│ ├── src│ ├── tsconfig.json│ └── tslint.json└── 网络演示├── pom.xml└── src

父 pom.xml 需要列出两个模块.第一个模块应该是 UI (Angular 2) 模块，然后是 Java/Spring 模块.

重要部分如下所示ng-jee/pom.xml

pom<模块><module>ngdemo</module><module>webdemo</module></模块>

接下来，如果您像这样使用 CLI 创建了 angular 应用程序:

ng 新的 ngdemo

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

 <插件><插件><groupId>org.apache.maven.plugins</groupId><artifactId>maven-clean-plugin</artifactId><version>3.0.0</version><配置><failOnError>false</failOnError><文件集><文件集><目录>.</目录><包括><include>dist/**/*.*</include></包括><followSymlinks>false</followSymlinks></文件集></文件集></配置></插件><插件><groupId>org.codehaus.mojo</groupId><artifactId>exec-maven-plugin</artifactId><version>1.5.0</version><执行><执行><id>angular-cli build</id><配置><workingDirectory>.</workingDirectory><executable>ng</executable><参数><argument>build</argument><argument>--prod</argument><argument>--base-href</argument><argument>"/ngdemo/"</argument></参数></配置><phase>生成资源</phase><目标><目标>执行</目标></目标></执行></执行></插件></plugins></build>

最后一块拼图是引用这个 ngdemo/dist 文件夹，以便我们可以将输出复制到我们的 WAR 文件中.

所以，这是webdemo/pom.xml

中需要做的事情

<资源><资源><目录>src/main/resources</directory></资源></资源><插件><插件><groupId>org.apache.maven.plugins</groupId><artifactId>maven-war-plugin</artifactId><version>2.3</version><配置><failOnMissingWebXml>false</failOnMissingWebXml><网络资源><资源><!-- 这是相对于 pom.xml 目录--><目录>../ngdemo/dist/</directory></资源></webResources></配置></插件></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├── style.d41d8cd98f00b204e980.bundle.css├── vendor.fb5e0f38fc8dca20e0ec.bundle.js└── 网络信息└── 课堂

就是这样.我将在这些方面中的几个方面做一个系列，更多在这里Angular 和 JEE

直到那时希望这会有所帮助！

How do I create a Maven multimodule project with a Spring backend and Angular2 front-end? Using spring initializr (https://start.spring.io) and angular cli separately seems to be straightforward, but how do I organize that as a multi-module Maven project with linked but separate pom-files? With what values and in what order should I create and initialize those? I can use Intellij IDEA if it makes things easier, but i am also fine with CMD (I'm on windows).

The only tutorial I found on this is here: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/ but the guy uses some self-written "frontend-maven-plugin" which I do not want. Can someone explain the steps or link me to a tutorial that doesn't use third-party-resources but just clean Spring and Angular2, please?

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

解决方案

The recommended way to build an Angular 2 application is to make use of Angular CLI tool. Similarly when you work with Java EE projects you typically use Maven as the build tool.

To get the best of both worlds you can develop a multi module project as you already figured.

If you would like then just clone this sample:

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

Given the frontend/UI project will be Angular 2 application. Backend project can be Spring or purely Java EE application (Any web app).

We want to take the Angular 2 output (dist directory) and map it into the web application project for the UI part.

Here's how you can do it without any fancy third party plugins. Lets take this Multi module project structure as an example:

cd ng-jee (This is your parent POM project)

.
├── 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

The parent pom.xml needs to list both modules. The first module should be the UI (Angular 2) module followed by the Java/Spring module.

The important section is shown below for ng-jee/pom.xml

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

Next, if you have created your angular app using CLI like this:

ng new ngdemo

Then you need to place a pom.xml in that same directory ngdemo/pom.xml Having the below build plugins: (This will build the Angular CLI project and generate output in its dist folder.

 <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>

The last piece of the puzzle is to reference this ngdemo/dist folder so we can copy the output into our WAR file.

So, here's what needs to be done in 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>

Now, if you build the project from the parent directory ng-jee

mvn clean install

Then you will see that first it builds the Angular project then Web Project, while doing the build for the latter it also copies the Angular dist contents into the Web projects root.

So you get something like the below in the WAR/Web project target directory:

/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

That's it. I will be doing a series on few of these aspects and more here Angular and JEE

Till then hope this helps!

这篇关于制作前端和后端(Angular 2 和 Spring)Maven 多模块项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！