比较来自世界各地的卖家的域名和 IT 服务价格

如何整合 Angular 2 + Java Maven Web应用程序

我创建 Angular 2 front-end Application.and 我创造了一个 Java Rest WS Back-end 连接到的应用程序 DB.

我的文件夹结构 Angular 2 如下所示


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


以及我的Web应用程序的结构 Java Maven 如下所示


JerseyWebApp
src
main
java
Custom Package
java classes
resources
webapp
WEB-INF
web.xml
index.html
pom.xml


我想知道如何在一个应用程序中集成这两个应用程序,只有一个文件将产生 war.
已邀请:

冰洋

赞同来自:

这就是我所做的: -

安装 Nodejs v6.9+

发射

npm 安装 @angular/cli –g

为了 Angular CLI

安装 Apache Maven 或者使用任何 Maven 友好的 IDE

需要使用配置 Maven, 我是一个简单的Web应用程序 /WAR/.

目录结构

/为了

除了

文件夹 ngapp 休息是标准结构 Maven./


ngfirst
├── pom.xml
├── src
│   └── main
│   ├── java
│   ├── resources
│   ├── webapp
│   └── ngapp


Angular 部分

打开

文件夹 ngapp 在 terminal 并输入命令

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


这个结构是 Angular 相当于项目结构 Maven, 和目录

src

这是应用程序的来源 Angular, 就像

收集团队

maven 生成其输出

目标

文件夹,团队

部件 ng

在文件夹中生成其输出

dist

.

打包生成的应用程序 Angular 在 Maven Sgenerirovannoe. WAR , 更改装配配置以更改输出文件夹

dist



webapp

, 打开

文件 angular-cli.json 并改变它 outDir, 如下所示: -


"outDir": "../webapp/ng"


此时该团队

ng build

创建内置应用程序 Angular 内部目录

ng

文件夹 ngfirst/src/main/

webapp

.

Maven 部分

打开 pom.xml 并设置以下三个插件 maven:-

编译器插头

: 不是 Java 汇编材料

文件夹 /src/main/ ngapp, 排除它。

war-plugin

: /src/main/

ngapp

- 这个项目文件夹 Angular, 它不应该包装在 WAR, 排除它。

exec-plugin

: 命令 NPM Install 和 Angular-CLI Build 创建应用程序 Angular 在文件夹中 webapp 用于最终包装。 基于注意的HREF参数,是下载所必需的 Angular 来自上下文的资源Web应用程序和软件的路径。

这是它应该是什么样的: -


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

打开 Terminal 在根文件夹中

项目

ngfirst 并执行命令

mvn package

, 这将创建一个文件 WAR /ngfirst.war/ 在

目标

文件夹。

扩张

ngfirst.war

在容器中,打开
http://localhost:8080/ngfirst/ng/index.html
在浏览器中。 /如有必要,更改主机名和端口/

如果一切都出了问题,你应该看看如何

作品应用程序!

在浏览器中是一个应用程序 Angular 工作中!!

JSP 初步处理

我们可以使用动态配置和呈现技术页面的能力 JSP 随着应用程序 Angular, Angular SPA 服务容器 Java 作为常规页面 HTML,

index.html

在这种情况下,如果我们配置引擎 JSP 用于预处理文件 html 也是,那么所有的魔力 JSP 可能包含在页面内 Angular SPA, 只需打开页面内部的以下内容。

web.xml


<servlet-mapping>
<servlet-name>jsp</servlet-name>
<url-pattern>*.html</url-pattern>
</servlet-mapping>


保存,重建项目 maven, 扩张 WAR 和瞧!!

风见雨下

赞同来自:

在我侧面,我有一个模块 maven 对于来源 angular 题为

prj-angular

和 anoter 对于称为军事申请

prj-war

.

第一的

prj angular

建造:

他用 maven-exec-plugin 对于挑战
npm install


ng build

/谢谢 @J_Dev!/

默认资源目录
dist/


跳过 jar MANIFEST 一代

模块的结果 maven: a jar 只有生成

内容 angular dist/!

然后,第二个

prj_war

建造

它有

prj angular 在

质量质量

使用解压缩阶段解压缩上一个文件 jar 到Web应用程序的目的地

该模块与新鲜的申请战建造 angular R-N.

按照我使用的插件的相应配置进行操作:

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></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> &lt;== 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 随着战争 /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> &lt;== to update
<artifactid>prj-angular</artifactid> &lt;== to update
<overwrite>true</overwrite>
<includes>**/*</includes>
</artifactitem>
</artifactitems>
<outputdirectory>${project.build.directory}/prjwar/ng</outputdirectory> &lt;== to update
<overwritereleases>true</overwritereleases>
<overwritesnapshots>true</overwritesnapshots>
</configuration>
</execution>
</executions>
</plugin>

龙天

赞同来自:

奇怪的是,我上周只做了它!

使用 Netbeans 8.1 和 Tomcat servlet版本 8.0.27

Angular 和 Java 文件项目结构。

项目 Java 叫 Foo. 项目 Angular 有


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

石油百科

赞同来自:

我建议分开这两个应用程序,所以你有模块化。
所以你可以改变应用程序 Angular, 不影响您的服务,反之亦然。 其次,你的 apache/nginx 更快地将提供你的 js 和 html 的 Angular 反而 Tomcat /例如/. 但如果你仍然想要把申请表 Angular 在战争里面,那么图片是所有网络资源都在 src/main/webapp.

詹大官人

赞同来自:

我想分享我如何设置我的项目 Angular/Java. 一些重要的事情:

只有一个项目 Maven, 他允许我建立整个项目。 因此,我可以分别构建一个整个项目或构建客户端和服务器部分。

我的项目基于框架 Spring Boot. 但是,您可以轻松调整我对您的情况的决定。 我生成代码
output

项目 Angular, 它放在文件夹中 `META-INF'. 显然,如果您不使用,您可以更改它 Spring Boot.

在我的项目中,我想发布该项目 angular 在文件夹中
public

.

当我描述时,我推出了项目 Angular 和后端项目分开: Angular 从
ng serve

和后端项目 /部分 Java/ 在 IDE /Eclipse/.

好的,让我们开始。 项目的整个结构如下图所示。

https://i.stack.imgur.com/guCQs.png
正如您所看到的,我放置了项目 Angular 在文件夹中 'src\main\ngapp'. 对于项目 Java /到贝克/ 我用了 Eclipse IDE, 对于项目 Angular 我用了 Webstorm. 你可以选择首选 IDE 用于项目管理。 最重要的是:你需要两个 IDE, 管理整个项目。

建立一个项目 Angular 从 Maven, 我使用了以下配置文件定义 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

安装节点并启动 npm 用于组装项目 Angular. 所以,当我运行配置文件时 maven
build-client

, 插件用于:

如有必要,检查并安装节点的版本
v10.13.0

在项目文件夹中 Angular
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 必须放在文件夹中
public

Web应用程序。 对于这个项目 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",
...


在项目中 no-Spring Boot 您可能需要放置一个建筑项目 angular 直接到文件夹
src/main/webapp/public

. 为此,只需更改文件即可。
angular.json

所以你需要。

您可以找到整个项目代码
https://github.com/xcesco/files-on-cloud
github . 普通项目位于
https://github.com/eirslett/frontend-maven-plugin
.

喜特乐

赞同来自:

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

要回复问题请先登录注册