如何集成Angular 2 + Java Maven Web应用程序
我创建了一个Angular 2前端Application.and创建了一个连接到DB的Java Rest WS后端应用程序。
Angular 2 App的我的文件夹结构位于 -
之下- Angular2App
- CONFG
- DIST
- E2E
- node_modules
- 公共
- SRC
- 应用
- 的favicon.ico
- 的index.html
- main.ts
- 系统config.ts
- tsconfig.json
- typings.d.ts
- TMP
- 分型
- .editorconfig
- 的.gitignore
- 角cli.json
- 角-CLI-build.js
- 的package.json
- README.md
- tslint.json
- typings.json
我的Java Maven Web应用程序结构如下 -
- JerseyWebApp
- SRC
- 主
- 的java
- 自定义套餐
- java classes
- 资源
- web应用
- WEB-INF
- 的web.xml
- 的index.html
- 的pom.xml
- SRC
我想知道如何将这两个应用程序集成到一个只生成一个war文件的应用程序中。
6 个答案:
答案 0 :(得分：48)
这是我做的： -
- 安装Nodejs v6.9 +
- 为Angular CLI运行 npm install @ angular / cli -g
- 安装Apache Maven或使用任何Maven友好的IDE
- 使用您所需的Maven配置，我使用简单的webapp（WAR）。
目录结构（ ngapp 文件夹休息除外是标准的Maven结构。）
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
角色部分
在终端中打开 ngapp 文件夹并输入 ng init 命令来初始化节点和npm配置，结果将是一个简单的Angular2示例应用程序将在ngapp内部的以下目录结构文件夹： -
├── angular-cli.json
├── e2e
├── karma.conf.js
├── node_modules
├── package.json
├── protractor.conf.js
├── README.md
├── tslint.json
├── src
├── app
├── assets
├── environments
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
└── tsconfig.json
此结构与Angven等效于Maven项目结构， src 目录是Angular Application的源，就像 maven build 命令在目标中生成其输出一样> folder， ng build 命令在 dist 文件夹中生成其输出。
为了在Maven生成的WAR中打包生成的Angular应用程序，修改构建配置以将输出文件夹从 dist 更改为 webapp ，打开 angular-cli .json 文件并修改其outDir如下： -
"outDir": "../webapp/ng"
此时 ng build 命令将在ngfirst / src / main / webapp 文件夹的 ng 目录中生成内置的Angular应用程序。
Maven Part
打开pom.xml并配置以下三个maven插件： -
- 编译器插件：在/ src / main / ngapp 文件夹中没有要编译的Java东西，请将其排除。
- war-plugin ：/ src / main / ngapp 是Angular项目文件夹，不应将其打包在WAR中，将其排除。
- exec-plugin ：执行NPM Install和Angular-CLI Build命令，在webapp文件夹中生成Angular Application以进行最终打包。注意--base-href参数，需要从webapp的上下文路径加载Angular资源。
以下是它的样子： -
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>3.0.0</version>
<configuration>
<excludes>
<exclude>ngapp/**</exclude>
</excludes>
</configuration>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<version>1.5.0</version>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>npm</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory>
<executable>ng</executable>
<arguments>
<argument>build</argument>
<argument>--base-href=/ngfirst/ng/</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
构建Maven项目（以及Angular App）
在项目根文件夹 ngfirst 中打开终端并运行 mvn package 命令，这将在目标中生成WAR文件（ngfirst.war）文件夹中。
在容器中部署 ngfirst.war ，在浏览器中打开http://localhost:8080/ngfirst/ng/index.html。 （如果需要，调整主机名和端口）
如果一切顺利，你应该在浏览器中看到应用程序工作！，即工作中的Angular应用程序!!
JSP预处理
我们可以利用Angular应用程序利用JSP技术的动态配置和页面呈现功能，Angular SPA作为常规HTML页面由Java容器提供服务，在这种情况下，如果我们配置JSP，则 index.html 引擎也可以预处理html文件，然后所有JSP魔术都可以包含在Angular SPA页面中，只需在 web.xml
中包含以下内容<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
保存，重建maven项目，部署WAR和瞧!!
答案 1 :(得分：10)
我的方面我有一个名为 prj-angular 的角度来源的maven模块，以及一个名为 prj-war 的战争应用程序。
首先构建 prj angular ：
- 它使用maven-exec-plugin来调用
npm install和ng build（感谢@J_Dev！） - 将资源默认目录更改为
dist/ - 跳过jar MANIFEST generation
- maven模块结果：仅生成角度 dist / 内容的jar！
然后，构建第二个 prj_war ：
- 将 prj angular 作为依赖
- 使用解压缩阶段将先前的jar解压缩到Web应用程序目标
- 这个模块用新鲜的角度来构建你的app war。
按照我使用的相应插件配置进行操作：
prj angular（pom.xml提取）
<build>
<resources>
<resource>
<directory>dist</directory>
</resource>
</resources>
<plugins>
<!-- skip compile -->
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<executions>
<execution>
<id>default-compile</id>
<phase />
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.codehaus.mojo</groupId>
<artifactId>exec-maven-plugin</artifactId>
<executions>
<execution>
<id>exec-npm-install</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}</workingDirectory>
<executable>npm.cmd</executable>
<arguments>
<argument>install</argument>
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
<execution>
<id>exec-npm-ng-build</id>
<phase>generate-sources</phase>
<configuration>
<workingDirectory>${project.basedir}/src</workingDirectory>
<executable>ng.cmd</executable>
<arguments>
<argument>build</argument>
<argument>--no-progress</argument>
<argument>--base-href=/app/ng/</argument> <== to update
</arguments>
</configuration>
<goals>
<goal>exec</goal>
</goals>
</execution>
</executions>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-jar-plugin</artifactId>
<configuration>
<archive>
<addMavenDescriptor>false</addMavenDescriptor>
<manifest>
<addClasspath>false</addClasspath>
</manifest>
</archive>
</configuration>
</plugin>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-shade-plugin</artifactId>
<executions>
<execution>
<phase>package</phase>
<goals>
<goal>shade</goal>
</goals>
<configuration>
<filters>
<filter>
<artifact>*:*</artifact>
<excludes>
<exclude>META-INF/</exclude>
</excludes>
</filter>
</filters>
</configuration>
</execution>
</executions>
</plugin>
</plugins>
</build>
prj war（pom.xml提取）
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-dependency-plugin</artifactId>
<executions>
<execution>
<id>unpack angular distribution</id>
<phase>generate-resources</phase>
<goals>
<goal>unpack</goal>
</goals>
<configuration>
<artifactItems>
<artifactItem>
<groupId>com.myapp</groupId> <== to update
<artifactId>prj-angular</artifactId> <== to update
<overWrite>true</overWrite>
<includes>**/*</includes>
</artifactItem>
</artifactItems>
<outputDirectory>${project.build.directory}/prjwar/ng</outputDirectory> <== to update
<overWriteReleases>true</overWriteReleases>
<overWriteSnapshots>true</overWriteSnapshots>
</configuration>
</execution>
</executions>
</plugin>
答案 2 :(得分：7)
有趣的是，我上周做了这个！
使用Netbeans 8.1和Tomcat servlet版本8.0.27
Angular和Java项目文件结构。
Java Project被称为Foo。 Angular Project是Bar
Foo (Java Maven Project)
|__ src
| |__ main
| | |__ webapp (This folder contains the entire Angular Project)
| | | |__ META-INF
| | | | \__ context.xml
| | | |__ WEB-INF
| | | | \__ web.xml
| | | |__ includes
| | | | |__ css
| | | | |__ images
| | | | \__ js
| | | |
| | | | ## Bar project files are located here ##
| | | |
| | | |__ app
| | | | \__ All .ts and compiled .js files are located here
| | | |__ node_modules
| | | | \__ any dependencies used for Bar are located here
| | | |__ typings
| | | | \__ typings for Typescript located here
| | | |
| | | |__ README.txt
| | | |__ index.jsp
| | | |__ package.json
| | | |__ systemjs.config.js
| | | |__ tsconfig.json
| | | |__ typings.json
| | | \ ## Bar project files end here
| | |
| | |__ resources
| | | |__META-INF
| | | | \__ persistence.xml
| | |__ java
| | | |__ hibernate.cfg.xml
| | | |__ com
| | | | |__ orgName
| | | | | |__ packageName
| | | | | | \__ .java files are here
|__ pom.xml
\__ nb-configuration.xml
答案 3 :(得分：3)
我建议让两个应用程序分开，这样你就有了模块性。 这样您就可以在不影响服务的情况下更改Angular App，反之亦然。第二，你的apache / nginx可以更快地从Angular而不是Tomcat（例如）传递你的js和html。但是如果你仍然想把Angular应用程序放在战争中，那么模式就是所有的web资源都在src / main / webapp中。
答案 4 :(得分：0)
我想分享如何设置我的Angular / Java项目。一些重要的事情：
-
只有一个Maven项目，它使我可以构建整个项目。这并不意味着我总是可以分别构建前端和后端。
-
我的项目基于Spring Boot框架。但是，您可以轻松地根据自己的情况调整我的解决方案。我将Angular项目的
output代码放在“ META-INF”文件夹下。如果不使用Spring Boot，显然可以更改它。 -
在我的项目中，我想在
public文件夹中发布有角度的项目。 -
开发时，我分别运行Angular项目和后端项目：在
ng serve中使用Angular，在IDE（Eclipse）中运行后端项目（Java部分）。
好，我们开始吧。整个项目结构如下图所示。
如您所见，我将Angular项目放置在“ src \ main \ ngapp”文件夹中。对于Java项目（后端），我使用Eclipse IDE；对于Angular项目，我使用Webstorm。您可以选择首选的IDE来管理项目。重要的是：您将需要两个IDE来管理整个项目。
要使用Maven构建Angular项目，我使用了以下maven配置文件定义。
<profile>
<id>build-client</id>
<build>
<plugins>
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.3</version>
<configuration>
<nodeVersion>v10.13.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<workingDirectory>src/main/ngapp/</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<execution>
<id>npm run build-prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>
</executions>
</plugin>
</plugins>
</build>
</profile>
如您所见，我使用了com.github.eirslett:frontend-maven-plugin插件来安装node并运行npm来构建Angular项目。这样，当我运行Maven配置文件build-client时，插件将用于：
-
检查并安装Angular项目文件夹
v10.13.0中的节点版本src/main/ngapp/ -
运行命令
npm run build。在Angular项目中，在package.json中定义了构建别名。
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
}
Angular客户端必须放置在Web应用程序的public文件夹中。为此，将Angular项目配置为具有baseHref=/public。此外，构建的项目必须放置在src/main/resources/META-INF/resources/public中。在angular.json中，您将找到：
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"baseHref":"/public/",
"outputPath": "../resources/META-INF/resources/public",
...
在没有Spring Boot的项目中，您可能需要将构建的angular项目直接放在src/main/webapp/public文件夹中。为此，只需根据需要修改angular.json文件。
您可以在my github project中找到项目的所有代码。插件项目为here。
答案 5 :(得分：0)
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.3</version>
<configuration>
<nodeVersion>v10.13.0</nodeVersion>
<npmVersion>6.4.1</npmVersion>
<workingDirectory>src/main/ngapp/</workingDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
</execution>
<execution>
<id>npm run build-prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run build</arguments>
</configuration>
</execution>
<execution>
<id>prod</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>run-script build</arguments>
</configuration>
<phase>generate-resources</phase>
</execution>
</executions>
</plugin>
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？