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

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

Angular 2 App的My Folder结构如下 –

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文件的应用程序中.

解决方法:

这是我做的： –

>安装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插件： –

> compiler-plugin：在/ src / main / ngapp文件夹中编译没有Java东西,排除它.
> war-plugin：/ src / main / ngapp是Angular项目文件夹,它不应该打包在WAR中,排除它.
> 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和瞧！

标签：java,angular,typescript,maven-plugin,web-applications
来源： https://codeday.me/bug/20190926/1820782.html