如何集成Angular 2 + Java Maven Web应用程序

问题描述 投票：33回答：4

我创建了一个Angular 2前端Application.and创建了一个连接到DB的Java Rest WS后端应用程序。

Angular 2 App的My Folder结构如下 -

  • 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类 资源 Web应用程序 WEB-INF web.xml中 的index.html 的pom.xml

我想知道如何将这两个应用程序集成到一个只生成一个war文件的应用程序中。

java web-applications typescript angular maven-plugin
4个回答
45
投票

这是我做的： -

  • 安装Nodejs v6.9 +
  • 为Angular CLI运行npm install @ angular / cli -g
  • 安装Apache Maven或使用任何Maven友好的IDE
  • 使用您所需的Maven配置，我使用简单的webapp（WAR）。

目录结构（ng app文件夹休息除外是标准的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

这个结构是Angular等效的Maven项目结构，而src目录是Angular Application的源代码，就像maven build命令在目标文件夹中生成它的输出一样，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插件： -

  1. compiler-plugin：在/ src / main / ngapp文件夹中编译没有Java东西，排除它。
  2. war-plugin：/ src / main / ngapp是Angular项目文件夹，它不应该打包在WAR中，排除它。
  3. 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。 （如果需要，调整主机名和端口）

如果一切顺利，你应该看到app工作！在浏览器中，这是Angular Application在工作!!

JSP预处理

我们可以利用Angular应用程序利用JSP技术的动态配置和页面呈现功能，Angular SPA作为常规HTML页面由Java容器提供服务，在这种情况下是index.html，如果我们将JSP Engine配置为预处理html文件，那么所有JSP魔术都可以包含在Angular SPA页面中，只需在web.xml中包含以下内容即可

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

保存，重建maven项目，部署WAR和瞧！

10
投票

我的方面我有一个叫做prj-angular的角度源的maven模块，另一个叫做prj-war的战争应用程序。

第一个prj angular建立：

  • 它使用maven-exec-plugin来调用npm install和ng build（感谢@J_Dev！）
  • 将资源默认目录更改为dist/
  • 跳过jar MANIFEST代
  • maven模块结果：仅生成角度dist /内容的jar！

然后，第二个prj_war构建：

  • 有prj角作为依赖
  • 使用解包阶段将之前的jar解压缩到Web应用程序目标
  • 这个模块用新鲜的角度dist构建你的app战争。

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

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

我建议让两个应用程序分开，这样你就有了模块化。这样您就可以在不影响服务的情况下更改Angular App，反之亦然。第二，你的apache / nginx可以更快地从Angular而不是Tomcat（例如）传递你的js和html。但是如果你仍然想把Angular应用程序放在战争中，那么模式就是所有的web资源都在src / main / webapp中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.