如何集成角度2+；Java Maven Web应用程序

我创建了一个Angular 2前端应用程序，并创建了一个连接到DB的Java Rest WS后端应用程序

Angular 2应用程序的我的文件夹结构如下-

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

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

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

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

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

---

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

我建议将这两个应用程序分开，这样就可以实现模块化。

---

通过这种方式，您可以在不影响服务的情况下更改Angular应用程序，反之亦然。其次，apache/nginx从Angular而不是Tomcat（例如）交付js和html的速度更快。但是，如果您仍然想将Angular应用程序放在war中，那么模式是所有web资源都在src/main/webapp中。

有趣的是，我上周刚刚做了这个

使用Netbeans 8.1和TomcatServlet版本8.0.27

Angular和Java项目文件结构

Java项目称为Foo。角度项目是酒吧

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

以下是我所做的：-

• 安装nodejsv6.9+
• 为angular cli运行npm install@angular/cli–g
• 安装ApacheMaven或使用任何Maven友好的IDE
• 使用您所需的Maven配置，我使用了SimpleWebApp（WAR）

目录结构（除了ngapp文件夹rest是标准的Maven结构。）

角度部分

在终端中打开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

此结构相当于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目录中生成内置的角度应用程序

Maven部分

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

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

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

编译器插件：在/src/main/ngapp文件夹中没有要编译的Java内容，请将其排除在外

war插件：/src/main/ngapp是角度项目文件夹，不应打包在war中，将其排除在外

exec plugin：执行NPM安装和Angular CLI构建命令，在webapp文件夹中生成Angular应用程序，以进行最终打包。注意--base href参数，需要从webapp的上下文路径加载角度资源

下面是它的外观：-

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

org.apache.maven.plugins
在浏览器中。（如果需要，请调整主机名和端口）

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

JSP预处理

我们可以在Angular应用程序中利用JSP技术的动态配置和页面呈现功能，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>


jsp
*.html

保存，重建maven项目，部署WAR，瞧
 在我这边，我有一个用于角度源的maven模块，名为prj angular，另一个用于战争应用的模块，名为prj war

第一个prj角度构建：


它使用maven exec插件调用
npm安装
和
ng构建
（感谢@J_Dev！）
将资源默认目录更改为
dist/
跳过jar清单生成
maven模块结果：仅包含生成的角度dist/内容的jar

然后，构建第二个prj_war：


具有prj角度作为依赖项

使用解包阶段将上一个jar解压到web应用程序目的地
本模块使用全新的角度距离为您构建应用程序war

下面是我使用的相应插件配置：

prj角度（pom.xml extract）


距离
org.apache.maven.plugins
maven编译器插件
默认编译
org.codehaus.mojo
execmaven插件
执行npm安装
生成源
${project.basedir}
npm.cmd
安装
执行官
执行npm ng构建
生成源
${project.basedir}/src
ng.cmd
建造
--没有进展
--基本href=/app/
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "baseHref":"/public/",
    "outputPath": "../resources/META-INF/resources/public",
    ...    

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