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

Question

我创建了一个 Angular 2 前端应用程序。我创建了一个连接到数据库的 Java Rest WS 后端应用程序。

我的 Angular 2 App 文件夹结构如下 -

 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

我的 Java Maven Web 应用程序结构如下 -

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

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

原文由 RAJESHPODDER007 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是我所做的：-

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

这个结构是 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 应用程序。

Maven部分

打开 pom.xml 并配置以下三个 Maven 插件：-

1. 编译器插件：/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 。 （如果需要，调整您的主机名和端口）

如果一切顺利，您应该会看到 应用程序正常运行！ 在浏览器中，这是 Angular 应用程序在工作！

JSP 预处理

我们可以利用 Angular 应用程序的 JSP 技术的动态配置和页面渲染功能，Angular SPA 由 Java 容器作为常规 HTML 页面提供服务，在这种情况下为 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 瞧！

原文由 J_Dev 发布，翻译遵循 CC BY-SA 3.0 许可协议