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

这就是我所做的： -

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