如何集成 Angular 2 + Java Maven Web 应用程序 [英] how to integrate Angular 2 + Java Maven Web Application
问题描述
我创建了一个 Angular 2 前端应用程序.我创建了一个连接到数据库的 Java Rest WS 后端应用程序.
我的 Angular 2 App 文件夹结构如下-
Angular2App配置区电子商务节点模块上市源文件应用程序图标索引.html主文件系统配置文件配置文件打字.d.ts时间打字.editorconfig.gitignoreangular-cli.jsonangular-cli-build.js包.json自述文件tslint.json打字.json我的 Java Maven Web 应用程序结构如下-
JerseyWebApp源文件主要的爪哇定制包java类资源网络应用程序网络信息网页.xml索引.htmlpom.xml我想知道如何将这两个应用程序集成到一个仅生成一个war文件的应用程序中.
这是我所做的:-
- 安装 Nodejs v6.9+
- 为 Angular CLI 运行 npm install @angular/cli –g
- 安装 Apache Maven 或使用任何 Maven 友好的 IDE
- 使用您所需的 Maven 配置，我使用的是简单的 webapp (WAR).
目录结构(除了 ngapp 文件夹是标准的 Maven 结构.)
ngfirst├── pom.xml├── src│ └── 主要│ ├── java│ ├──资源│ ├── 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├──应用├──资产├── 环境├── favicon.ico├── index.html├── main.ts├── polyfills.ts├── style.css├── test.ts└── tsconfig.json这个结构是 Angular 的 Maven 项目结构，src 目录是 Angular 应用程序的源代码，就像 maven build 命令在 target 中生成它的输出一样> 文件夹，ng build 命令在 dist 文件夹中生成其输出.
为了在 Maven 生成的 WAR 中打包生成的 Angular 应用程序，修改构建配置将输出文件夹从 dist 更改为 webapp，打开 angular-cli.json 文件并修改其 outDir 如下:-
"outDir": "../webapp/ng"此时ng build命令会在ngfirst/src/main/webapp文件夹的ng目录下生成构建好的Angular Application.>
Maven 部分
打开pom.xml并配置以下三个maven插件:-
- compiler-plugin:在/src/main/ngapp 文件夹中没有要编译的 Java 内容，排除它.
- war-plugin:/src/main/ngapp 是 Angular 项目文件夹，不应打包在 WAR 中，排除它.
- exec-plugin:执行 NPM Install 和 Angular-CLI Build 命令以在 webapp 文件夹中生成 Angular 应用程序以进行最终打包.注意 --base-href 参数，需要从 webapp 的上下文路径加载 Angular 资源.
它应该是这样的:-
<插件><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.3</version><配置><排除><exclude>ngapp/**</exclude></排除></配置></插件><插件><groupId>org.apache.maven.plugins</groupId><artifactId>maven-war-plugin</artifactId><version>3.0.0</version><配置><排除><exclude>ngapp/**</exclude></排除></配置></插件><插件><groupId>org.codehaus.mojo</groupId><artifactId>exec-maven-plugin</artifactId><version>1.5.0</version><执行><执行><id>exec-npm-install</id><phase>generate-sources</phase><配置><workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory><executable>npm</executable><参数><参数>安装</参数></参数></配置><目标><目标>执行</目标></目标></执行><执行><id>exec-npm-ng-build</id><phase>generate-sources</phase><配置><workingDirectory>${project.basedir}/src/main/ngapp</workingDirectory><executable>ng</executable><参数><argument>build</argument><argument>--base-href=/ngfirst/ng/</argument></参数></配置><目标><目标>执行</目标></目标></执行></执行></插件></插件> 构建 Maven 项目(以及 Angular 应用程序)
在项目根文件夹ngfirst中打开终端并运行mvn package命令，这将在target中生成一个WAR文件(ngfirst.war)文件夹.
在容器中部署ngfirst.war，打开http://浏览器中的 localhost:8080/ngfirst/ng/index.html.(如果需要，调整您的主机名和端口)
如果一切顺利，您应该会在浏览器中看到应用程序正常运行！，这就是 Angular 应用程序在运行！！
JSP 预处理
我们可以在 Angular 应用程序中利用 JSP 技术的动态配置和页面渲染能力，Angular SPA 由 Java 容器作为常规 HTML 页面提供服务，index.html 在这种情况下，如果我们配置 JSP引擎也对 html 文件进行预处理，然后所有 JSP 魔法都可以包含在 Angular SPA 页面中，只需在 web.xml
中包含以下内容<servlet-name>jsp</servlet-name><url-pattern>*.html</url-pattern></servlet-mapping> 保存，重建 maven 项目，部署 WAR，瞧！！
I have created a Angular 2 front-end Application.and i have created one Java Rest WS Back-end Application which is connected to DB.
My Folder structure for Angular 2 App is below-
Angular2App
confg
dist
e2e
node_modules
public
src
app
favicon.ico
index.html
main.ts
system-config.ts
tsconfig.json
typings.d.ts
tmp
typings
.editorconfig
.gitignore
angular-cli.json
angular-cli-build.js
package.json
README.md
tslint.json
typings.json
And My Java Maven Web Application Structure is below-
JerseyWebApp
src
main
java
Custom Package
java classes
resources
webapp
WEB-INF
web.xml
index.html
pom.xml
I want to know how to integrate these two applications into one application which will produce only one war file.
Here is what I did:-
- Install Nodejs v6.9+
- Run npm install @angular/cli –g for Angular CLI
- Install Apache Maven or use any Maven friendly IDE
- Use your required Maven configuration, I used simple webapp (WAR).
Directory Stucture (Except for ngapp folder rest is standard Maven structure.)
ngfirst
├── pom.xml
├── src
│ └── main
│ ├── java
│ ├── resources
│ ├── webapp
│ └── ngapp
Angular Part
Open ngapp folder in terminal and type ng init command to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-
├── 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
This structure is Angular equivalent of Maven project structure and src directory is Angular Application's source, just like maven build command generates its output in target folder, ng build command generates its output in dist folder.
In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from dist to webapp, open angular-cli.json file and modify its outDir as below:-
"outDir": "../webapp/ng"
At this point ng build command will generate built Angular Application inside ng directory of ngfirst/src/main/webapp folder.
Maven Part
Open pom.xml and configure following three maven plugins:-
- compiler-plugin: No Java stuff to compile in /src/main/ngapp folder, exclude it.
- war-plugin: /src/main/ngapp is Angular project folder and it should not be packaged in WAR, exclude it.
- exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Note --base-href argument, it is required to load Angular resources from webapp's context path.
Here is how it should look like:-
<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>
Building Maven Project (and Angular App too)
Open Terminal in project root folder ngfirst and run mvn package command, this will generate a WAR file (ngfirst.war) in target folder.
Deploy ngfirst.war in a container, open http://localhost:8080/ngfirst/ng/index.html in Browser. (adjust your hostname and port if required)
If everything went right, you should see app works! in browser, that is Angular Application at work!!
JSP Pre-Processing
We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.html in this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml
<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>
Save, rebuild maven project, deploy WAR and voila!!
这篇关于如何集成 Angular 2 + Java Maven Web 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
