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

Question

我创建了一个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文件的应用程序中.

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 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引擎来预处理html文件,那么所有JSP魔术都可以包含在Angular SPA页面中,只需在web.xml中包含以下内容即可

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

保存,重建maven项目,部署WAR和瞧!

Answer 2

在我的身边,我有一个叫做prj-angular的角度源的maven模块,以及一个叫做prj-war的战争应用程序.

第一个prj angular建立:

• 它采用了Maven的exec-插件调用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>

Answer 3

有趣的是,我上周做了这个!

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

Answer 4

我建议将这两个应用程序分开，这样就可以实现模块化。这样您就可以更改 Angular 应用程序而不会影响您的服务，反之亦然。其次，您的 apache/nginx 可以更快地从 Angular（而不是 Tomcat）传递 js 和 html（例如）。但如果您仍然想将 Angular 应用程序放入战争中，则模式是所有 Web 资源都位于 src/main/webapp 中。