如何集成Angular 2 + Java Maven Web应用程序 [英] how to integrate Angular 2 + Java Maven Web Application

问题描述

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

I have created a Angular 2 front-end Application.and i have created one Java Rest WS Back-end Application which is connected to DB.

我的文件夹结构对于Angular 2 App低于 -

My Folder structure for Angular 2 App is below-

• Angular2App
  
  
  
  
  • confg
  
  
  • dist
  
  
  • e2e
  
  
  • node_modules
  
  
  • public
  
  
  • src
    
    
    
    
    • app
    
    
    • favicon.ico
    
    
    • index.html
    
    
    • main.ts
    
    
    • system-config.ts
    
    
    • tsconfig.json
    
    
    • typings.d.ts
    
    
    • Angular2App
      • confg
      • dist
      • e2e
      • node_modules
      • public
      • src
        • app
        • favicon.ico
        • index.html
        • main.ts
        • system-config.ts
        • tsconfig.json
        • typings.d.ts

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

        And My Java Maven Web Application Structure is below-

        
        
        • JerseyWebApp
          
          
          
          
          • src
            
            
            
            
            • main
            
            
            • java
              
              
              
              
              • 自定义套餐
              
              
              • java classes
              
              
              
              
              • WEB-INF
              
              
              • web.xml
              
              
              • index.html
              
              

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

              I want to know how to integrate these two application into one application which will produce only one war file.

              推荐答案

              以下是我的所作所为： -

              Here is what I did:-

              
              
              • 安装Nodejs v6.9 +
              
              
              • 为Angular CLI运行 npm install @ angular / cli -g
              
              
              • 安装Apache Maven或使用任何Maven友好的IDE
              
              
              • 使用所需的Maven配置，我使用简单的webapp（WAR）。
              
              
              • Install Nodejs v6.9+
              • Run npm install @angular/cli –g for Angular CLI
              • Install Apache Maven or use any Maven friendly IDE
              • Use your required Maven configuration, I used simple webapp (WAR).

              目录结构（ ngapp 文件夹休息除外是标准Maven结构。）

              Directory Stucture (Except for ngapp folder rest is standard Maven structure.)

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

              Angular Part

              在终端中打开 ngapp 文件夹并输入 ng init 命令初始化节点和npm配置，结果将是一个简单的Angular2示例应用程序将在ngapp文件夹中的以下目录结构： -

              Open ngapp folder in terminal and type ng init command to initialize node and npm configuration, the result will be a simple Angular2 example application will the following directory structure inside ngapp folder:-

                           ├── 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 命令在 target 文件夹， ng build 命令在 dist 文件夹中生成其输出。

              This structure is Angular equivalent of Maven project structure and src directory is Angular Application's source, just like maven build command generates its output in target folder, ng build command generates its output in dist folder.

              为了将生成的Angular应用程序打包在Maven生成的WAR中修改构建配置以将输出文件夹从 dist 更改为 webapp ，打开 angular-cli.json 文件并修改其outDir如下： -

              In order to package the generated Angular application within Maven generated WAR modify the build configuration to change the output folder from dist to webapp, open angular-cli.json file and modify its outDir as below:-

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

              此时 ng build 命令将在ngfirst / src / main /的 ng 目录中生成内置的Angular Application webapp 文件夹。

              At this point ng build command will generate built Angular Application inside ng directory of ngfirst/src/main/webapp folder.

              Maven Part

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

              Open pom.xml and configure following three maven plugins:-

              
              
              1. compiler-plugin ：无需编译Java内容/ src / main / ngapp 文件夹，将其排除。
              
              
              2. war-plugin ：/ src / main / ngapp 是Angular项目文件夹，不应该打包在WAR中，将其排除。
              
              
              3. exec-plugin ：执行NPM安装和Angular-CLI Build命令在webapp文件夹中生成Angular Application以进行最终打包。注意--base-href参数，需要从webapp的上下文路径加载Angular资源。
              
              
              1. compiler-plugin: No Java stuff to compile in /src/main/ngapp folder, exclude it.
              2. war-plugin: /src/main/ngapp is Angular project folder and it should not be packaged in WAR, exclude it.
              3. exec-plugin: Execute NPM Install and Angular-CLI Build commands to generate Angular Application in webapp folder for final packaging. Note --base-href argument, it is required to load Angular resources from webapp's context path.

              以下是它的外观： -

              Here is how it should look like:-

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

              Building Maven Project (and Angular App too)

              在项目根文件夹 ngfirst 中打开终端并运行 mvn package 命令，这将生成一个WAR文件（ngfirst.war）在 target 文件夹。

              Open Terminal in project root folder ngfirst and run mvn package command, this will generate a WAR file (ngfirst.war) in target folder.

              在容器中部署 ngfirst.war ，打开 http：// localhost：8080 / ngfirst / ng / index.html 。 （如果需要，调整你的主机名和端口）

              Deploy ngfirst.war in a container, open http://localhost:8080/ngfirst/ng/index.html in Browser. (adjust your hostname and port if required)

              如果一切正常，你应该在浏览器中看到 app works！，即Angular Application at工作!!

              If everything went right, you should see app works! in browser, that is Angular Application at work!!

              JSP预处理

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

              We can leverage dynamic configuration and page rendering capabilities of JSP technology with Angular application, Angular SPA is served by the Java container as regular HTML page, index.html in this case, if we configure JSP Engine to pre-process html files too, then all JSP magic can be included inside Angular SPA Page, just include the following inside web.xml

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

              保存，重建maven项目，部署WAR和voila !!

              Save, rebuild maven project, deploy WAR and voila!!

              这篇关于如何集成Angular 2 + Java Maven Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！